【微信小程序】使用echarts

一、页面
    <view class="chartBox" style="width: 100%;height:300px">

      <ec-canvas id="efficiencyChart" canvas-id="graph" ec="{{ ec }}" ></ec-canvas>

    </view>

二、JS
    1、引用echarts 插件
        import * as echarts from '../../ec-canvas/echarts.js';
    2、data:{
            ec:{ lazyLoad:false , // 延迟加载}
        }

    3、  onLoad: function (options) {
           // 声明图表
           this.scaComponnet = this.selectComponent('#efficiencyChart');
             
            // 调用图表
           this.initChart();
          },

    4、写方法
    // 图表初始化
  initChart:function(){
    this.scaComponnet.init((canvas, width, height)=>{
      console.log(width,'widt')
      console.log(height,'height')
      // 初始化图表
      const history_chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      history_chart.setOption(this.efficiencyChart_option());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return history_chart;
    })
    
  },

  // 图表 option
  efficiencyChart_option:function(){
    return{
      xAxis: {
        type: 'category',
        data: ['TVOC(ppb)','PM(mg/m3)','CO(mg/m3)','PRESSURE(mbar)','O3(mg/m3)','CO2(mg/m3)',],
        
        // 设置坐标轴字体颜色和宽度
        axisLine: {  //这是x轴文字颜色
          lineStyle: {
            color: "rgba(255,255,255,.7)",
          }
        },
        axisLabel:{
          rotate:40,
          textStyle:{
            fontSize:'10'
          }
        }
       

      },
      yAxis: {
        type: 'value',
        //网格样式
        splitLine: {
          show: true,
          lineStyle:{
            color: ['#515761'],
            width: 1,
            type: 'solid'
          }
        },
        // 设置坐标轴字体颜色和宽度
        axisLine: { // 这是y轴文字颜色
          lineStyle: {
            color: "rgba(255,255,255,.7)",
          }
        }

      },
      series: [{
        data: [120, 200, 150, 80, 70, 110],
        type: 'bar',
        itemStyle:{
          color:'#3E8EF6'
        }
          
      }]
    }
  },