微信使用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
    }
  }
});