ycwh/miniapp/pages/yuecai/home/test.vue

<template>
  <view class="content">
    <!-- config-echarts.js中的seriesTemplate为option.series模板，可以作为series中的默认配置，:chartData.series中的配置如果有相同的，会覆盖掉 seriesTemplate 中的配置 -->
    <qiun-title-bar title="柱状图+动态更新数据" />
    <view class="charts-box">
      <!-- 如果发布到二级或者多级目录中，需要配置 directory 属性 -->
      <!-- <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true" directory="/h5/" @complete="complete"/> -->
      <qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true"
        @complete="complete" />
    </view>
    <qiun-title-bar title="堆叠柱状图+点击获取索引" />
    <view class="charts-box">
      <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！ -->
      <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}"
        :eopts="{xAxis:{axisLabel:{color:'#FF0000'}}}" :chartData="chartsDataColumn2" :echartsH5="true"
        :echartsApp="true" @getIndex="getIndex" />
    </view>
    <qiun-title-bar title="柱状图+渐变色" />
    <view class="charts-box">
      <qiun-data-charts type="column" :chartData="chartsDataColumn3" :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="圆角柱状图" />
    <view class="charts-box">
      <!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传itemStyle，将会覆盖:chartData.series 实现更低的代码量 -->
      <qiun-data-charts type="column" :eopts="{seriesTemplate:{itemStyle:{normal:{barBorderRadius:[30, 30, 0, 0]}}}}"
        :chartData="chartsDataColumn4" :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="横向柱状图(仅ECharts)" />
    <view class="charts-box">
      <qiun-data-charts type="column" :eopts="columneopts" :chartData="chartsDataColumn5" :echartsH5="true"
        :echartsApp="true" />
    </view>
    <qiun-title-bar title="折线图" />
    <view class="charts-box">
      <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="曲线图" />
    <view class="charts-box">
      <!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
      <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :eopts="{seriesTemplate:{smooth:true}}"
        :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="区域图" />
    <view class="charts-box">
      <qiun-data-charts type="area" :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :chartData="chartsDataLine2"
        :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="渐变色区域图" />
    <view class="charts-box">
      <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
      <qiun-data-charts type="area"
        :opts="{yAxis:{data:[{min:0}]},extra:{area:{type:'curve',addLine:true,gradient:true}}}"
        :chartData="chartsDataLine3" :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="饼图" />
    <view class="charts-box">
      <qiun-data-charts type="pie" :chartData="chartsDataPie1" :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="环形图+动态更新option" />
    <view class="charts-box">
      <!-- 演示动态改变eopts -->
      <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2"
        :echartsH5="true" :echartsApp="true" />
    </view>
    <qiun-title-bar title="面积玫瑰图" />
    <view class="charts-box">
      <!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
      <qiun-data-charts type="rose" :opts="{legend:{position:'bottom'}}" :chartData="chartsDataPie3" :echartsH5="true"
        :echartsApp="true" />
    </view>
    <qiun-title-bar title="漏斗图" />
    <view class="charts-box">
      <qiun-data-charts type="funnel" :chartData="chartsDataPie4" :echartsH5="true" :echartsApp="true" />
    </view>
    <view class="charts-box">
      <qiun-data-charts type="map" :opts="mapOpts" :chartData="mapDataColumn" />
    </view>
  </view>
</template>

<script>
  //下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
  import demodata from '@/mockdata/demodata.json';
  import mapdata from '@/mockdata/mapdata.json';

  export default {
    data() {
      return {
        mapOpts: {
          timing: "easeOut",
          duration: 1000,
          rotate: false,
          rotateLock: false,
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [0, 0, 0, 0],
          fontSize: 13,
          fontColor: "#666666",
          dataLabel: false,
          dataPointShape: true,
          dataPointShapeType: "solid",
          touchMoveLimit: 60,
          enableScroll: false,
          enableMarkLine: false,
          extra: {
            map: {
              border: true,
              borderWidth: 1,
              borderColor: "#666666",
              fillOpacity: 0.6,
              activeBorderColor: "#F04864",
              activeFillColor: "#FACC14",
              activeFillOpacity: 1,
              mercator: false,
              active: true,
              activeTextColor: "#FFFFFF"
            },
            tooltip: {
              showBox: true,
              showArrow: true,
              showCategory: false,
              borderWidth: 0,
              borderRadius: 0,
              borderColor: "#000000",
              borderOpacity: 0.7,
              bgColor: "#000000",
              bgOpacity: 0.7,
              gridType: "solid",
              dashLength: 4,
              gridColor: "#CCCCCC",
              boxPadding: 3,
              fontSize: 13,
              lineHeight: 20,
              fontColor: "#FFFFFF",
              legendShow: true,
              legendShape: "auto",
              splitLine: true,
              horizentalLine: false,
              xAxisLabel: false,
              yAxisLabel: false,
              labelBgColor: "#FFFFFF",
              labelBgOpacity: 0.7,
              labelFontColor: "#666666"
            }
          }
        },
        mapDataColumn: {},
        chartsDataColumn1: {},
        chartsDataColumn2: {},
        chartsDataColumn3: {},
        chartsDataColumn4: {},
        chartsDataColumn5: {},
        chartsDataPie1: {},
        chartsDataPie2: {},
        chartsDataPie3: {},
        chartsDataPie4: {},
        chartsDataLine1: {},
        chartsDataLine2: {},
        chartsDataLine3: {},
        ringOpts: {},
        //横向柱状图的配置，您也可以把默认配置写在config-echarts.js中
        columneopts: {
          grid: {
            left: '3%',
            right: '4%',
            bottom: 30,
            top: 10,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: []
          },
          //series模板，会覆盖至chartData中的series中的每一个数组内
          seriesTemplate: {
            "label": {
              "show": true,
              "color": "#666666",
              "position": 'right',
            },
          }
        }
      };
    },
    onReady() {
      setTimeout(() => {
        this.getServerData();
      }, 1000);

      //演示变更数据后显示loading状态，如果不想展示loading状态，则不需要此步，可以注释掉看效果
      setTimeout(() => {
        this.chartsDataColumn1.series = [];
      }, 4000);

      setTimeout(() => {
        //模拟新的柱状图
        this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Line));
        let md = {
          visualMap: {
            min: 800,
            max: 50000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: mapdata.features
        };
        this.mapDataColumn = JSON.parse(JSON.stringify(md));
        console.log(this.mapDataColumn);
        //测试动态绑定的eopts
        this.ringOpts = {
          color: ['#FF00FF', '#AAFF11'],
          legend: {
            show: false
          }
        }
      }, 5000);
    },
    methods: {
      getServerData() {

        //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
        //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式

        this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column));
        let tmpColumn3 = JSON.parse(JSON.stringify(demodata.Column));
        //series.linearGradient代表渐变色：
        //前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始；
        //第5个参数为数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
        tmpColumn3.series[0].linearGradient = [0, 0, 0, 1, [{
          offset: 0,
          color: '#0EE2F8'
        }, {
          offset: 1,
          color: '#1890FF'
        }]];
        tmpColumn3.series[1].linearGradient = [0, 0, 0, 1, [{
          offset: 0,
          color: '#2BDCA8'
        }, {
          offset: 1,
          color: '#91CB74'
        }]];
        this.chartsDataColumn3 = tmpColumn3;

        this.chartsDataColumn4 = JSON.parse(JSON.stringify(demodata.Column));
        this.chartsDataColumn5 = JSON.parse(JSON.stringify(demodata.Column));
        this.chartsDataPie1 = JSON.parse(JSON.stringify(demodata.PieA))
        this.chartsDataPie2 = JSON.parse(JSON.stringify(demodata.PieA))
        this.chartsDataPie3 = JSON.parse(JSON.stringify(demodata.PieA))
        this.chartsDataPie4 = JSON.parse(JSON.stringify(demodata.PieA))
        this.chartsDataLine1 = JSON.parse(JSON.stringify(demodata.Line))


        //处理堆叠柱状图的series
        let duidie = JSON.parse(JSON.stringify(demodata.Column))
        for (var i = 0; i < duidie.series.length; i++) {
          duidie.series[i].stack = 'one'
          duidie.series[i].barWidth = '50%'
          duidie.series[i].label = {
            position: 'inside',
            color: '#FFFFFF'
          }
        }
        //这里需要注意，一定要定义一个临时的变量再统一赋值给chartData，否则chartData具有监听属性，只要有变化就会导致重新渲染
        this.chartsDataColumn2 = duidie


        let areadata = JSON.parse(JSON.stringify(demodata.Line))
        areadata.series = areadata.series.reverse()
        this.chartsDataLine2 = areadata

        //渐变色区域图
        let linearareadata = {
          categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
          series: [{
            name: "成交量A",
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#1890FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [100, 80, 95, 150, 112, 132]
          }]
        }
        this.chartsDataLine3 = linearareadata

      },
      complete(e) {
        console.log("渲染完成事件", e);
      },
      getIndex(e) {
        console.log("获取点击索引事件", e);
      }
    }
  };
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>