小程序 使用echart

wxml

必须定义宽高
<view style="height: 500rpx;margin-top:40rpx;">
  <ec-canvas id="mychart-dom-bar" class="myCanvas" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
</view>

** index.js**

引入ec-canvas
import * as echarts from "../../ec-canvas/echarts";
data定义数据
 echart_option: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            grid: {
                left: "10%",
                right: "10%",
                bottom: "24%",
            },
            legend: {
                data: ['作业', '施肥', '病虫害防治']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['种前准备', '萌芽期', '出苗期', '分蘖期', '伸长期', '成熟期'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        fontWeight: 'bold',
                        fontSize: '11',
                        formatter: function (value) {
                            return value.split("").join("\n");
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额（元）',
                    min: 0,
                },
            ],
            series: [
                {
                    name: '作业',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' ml';
                        }
                    },
                    data: []
                },
                {
                    name: '施肥',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' ml';
                        }
                    },
                    data: []
                },
                {
                    name: '病虫害防治',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' ml';
                        }
                    },
                    data: []
                }
            ]
        },
给图表赋值
 this.setData({
  'echart_option.series[0].data': _zyData,
})
this.initpie()
initpie() {
  let ecComponent = this.selectComponent('#mychart-dom-bar');
  ecComponent.init((canvas, width, height, dpr) => {
  // 获取组件的 canvas、width、height 后的回调函数
  // 在这里初始化图表
     const chart = echarts.init(canvas, null, {
           width: width,
           height: height,
           devicePixelRatio: dpr
      });
      canvas.setChart(chart);
      chart.setOption(this.data.echart_option);
      return chart;
   });
},