1. 程式人生 > 實用技巧 >微信使用e-char圖表採坑

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