微信小程序Echarts封装 -- 折线图封装

• 先下载官方的示例项目:echarts-for-weixin

1. 在自己的小程序里面创建一个分包

// 在app.json里面
"subPackages": [
  {
      "root": "packages/report",
      "pages": [
          "pages/reportAnalyse/reportMain/index",
      ]
  }
]

2. 在该分包中建立一个components的文件夹,在文件夹中将官方的 ec-canvas 文件夹放在其中，官方提供的版本是2.0的版本的，小程序版本如果使用其他版本的可能在点击的时候会报错，所以只能退而且其次
3. 然后继续在该文件夹中建立一个组件(echarts-line) – 折线图

// index.json
{
  "component": true,
  "usingComponents": {
      "ec-canvas": "../es-canvas/ec-canvas"
  }
}

// index.wxml
/**
 * force-use-old-canvas="true" 是否使用新的 Canvas 2d
 * 不配置默认使用最新的
 * 电脑上调试阶段配置上这个，不会出现滑动页面，图标不会随着页面的滑动而滑动的bug
 * 真机调试的时候，可以去掉这个配置
 */ 
<ec-canvas style="width:630rpx;height:500rpx" id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>

// 引入echarts
import * as echarts from '../es-canvas/echarts';

Component({
  /**
 * 组件的属性列表
 */
 properties: {
  dataList:{ // 图表的数据
    type: Array,
    value: [],
  },
  yAxis: { // y轴
    type: Object,
    value:{
      x: 'center', 
      type: 'value', 
      minInterval: 1,
      splitLine: { lineStyle: { type: 'dashed' } },
      nameTextStyle: {
        fontSize: 10,
        color: "#80858D"
      },
      axisLine: {
        show:false,
        lineStyle: {
          color: "#80858D",
          width: 0,
          type: "solid"
        }
      },
      axisTick: {
        show: true
      }
    }
  },
  xAxis:{
    type:Array,
    value: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  legend: {
    type: Array,
    value: ["今日", "昨日"]
  },
  colorList: {
    type:Array,
    value: ['#5570CB','#E36E6A'],
  }
 },

 /**
 * 组件的初始数据
 */
 data: {
   ec: {
      onInit: null
   }
  },

  /**
   * 监听dataList 数据的变化从而对echarts 的重新渲染 
   */ 
  observers:{
  'dataList':function(dataList){
    if(this.chart) {
      // 判断是否已经初始化过图标，如果已经初始化过了，那就直接闯入当前需要渲染的option
      this.chart.setOption(this.createOptions());
      return
    }

    this.setData({
      ec: {
        onInit: this.initChart.bind(this)
      }
    });

   }
 },

 /**
 * 组件的方法列表
 */
 methods: {
  initChart(canvas, width, height, dp){
      const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
      });

      canvas.setChart(chart);
      let option = this.createOptions();
      this.chart = chart;
      chart.setOption(option);
      return chart;
  },

  createOptions() {
      return {
          // 调色盘颜色列表
          color: this.data.colorList,
          legend: {
              data: this.data.legend,
              bottom: 0, // legend在下方
              left: 'center', // 居中
              icon: 'pin', // 小圆点
              backgroundColor: '#fff',
              z: 100
          },
          grid: {
              containLabel: true,
              left: '3%',
              top: '8%',
              right: '4%',
              bottom: '10%',
          },
          tooltip: {
              // 点击之后的浮窗
              show: true,
              trigger: 'axis',
              backgroundColor: 'rgba(0,0,0,0.6)',
              color: "#fff",
              textStyle: {
                color: "#fff" //设置文字颜色
              },
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisTick:{
                show: false
              },
              axisLine:{
                // x轴线的颜色以及宽度
                show: true,
                lineStyle: {
                  color: "#80858D",
                  width: 1,
                  type: "solid"
                }
              },
              axisLabel:{
                  interval: this.data.xAxis.length > 9 ? Math.floor(this.data.xAxis.length / 4) : 0,
                  showMinLabel: true,  //是否显示最小 tick 的 label
                // showMaxLabel: true,  //是否显示最大 tick 的 label
              },
              data: this.data.xAxis,
              // show: false
          },
          yAxis: this.data.yAxis,
          series: this.data.dataList
      }
  },
 }
})