微信使用e-char图表采坑

话不多说html:请注意这个属性“

force-use-old-canvas="true"

”真机调试使用，发布线上版本一定要删除，你也可以在调试的时候把他删掉，删一次就知道是干什么的了，实践出真知

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
</view>

css

.container{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}
ec-canvas{
  height: 500rpx;
  width: 100%;
}

josn

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

js:这个ec-covers文件包可以去e-char官网下载：https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

import * as echarts from '../../ec-canvas/echarts'
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
        subtext: '违章趋势'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name: '最高气温',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10]
        }
    ]
};
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});