微信小程序中使用echarts图表

微信小程序中使用echarts

1. 首先在componens文件夹中引入组件ec-canvas
   ec-canvas组件下载
2. 在wxml中引入：

<ec-canvas force-use-old-canvas="true" id="one-line" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

3. 在json中引入组件

"usingComponents": {
    "ec-canvas":"../../../../components/ec-canvas/ec-canvas"
  },

5. 在js中设置

 data: {
    ec: {},
    lineOptions: {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: 'value',
      },
      label: {
        show: true,
      },
      series: [{
        data: [],
        type: 'line',
        itemStyle: {
          color: '#1AAD19'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(26,173,25,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(26,173,25,0.3)'
            }
          ])
        }
      }]
    }
  }，
  onLoad:function (options) {
  	// 渲染图表
  	this.initChart('#one-line');
  }
  // 初始化echarts
  initChart(idName) {
    const ecComponent = this.selectComponent(idName);
    ecComponent.init((canvas, width, height, dpr) => {
      // 2.这个不用管，固定写法
      const chart = echarts.init(canvas, null, {
        width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      // 3.注册地图
      // echarts.registerMap('china', geoJson)
      // 4.设置option
      this.setTimeLineOption(chart, idName);
      // 5.最后一定要返回chart
      return chart;
    })
  },
  // 设置options
  setTimeLineOption(chart, idName) {
  	 let _currOptions = this.data.lineOptions;
  	// 对xAxis.data设置数据
  	// 对series.data设置数据
 	 chart.setOption(_currOptions);
  }

注意：如果微信开发者工具中报vendor.js超过500k，可以查看gulp压缩文件