微信小程式中使用ECharts，實作折線圖、曲線圖、柱形圖等

echarts-for-weixin 項目提供了一個小程式元件，用這種方式可以友善地使用 ECharts。 如有必要，将 ec-canvas 目錄下的 echarts.js 替換為最新版的 ECharts。如果希望減小包體積大小，可以使用自定義建構生成并替換 echarts.js

根據Echarts官方文檔可以看到，Echarts是相容了微信小程式的；那麼我們就可以放心大膽地使用了；找到相對于的代碼即可開始開發了

官方網站：https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app/

GitHub：https://github.com/ecomfe/echarts-for-weixin

我們在GitHub中将代碼下載下傳下來拿到ec-canvas檔案放置到我們自己項目中去；也可以根據自己的需要去下載下傳相對應的模闆；

然後在需要的頁面的json檔案中引入檔案

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

引入元件在html中

<view class="mall-ec">
    <ec-canvas
        id="mychart-dom-bar"
        canvas-id="mychart-bar"
        ec="{{ ec }}"
      ></ec-canvas>
  </view>           

然後初始化并配置；參數，這兒的操作就跟Echarts正常操作是一緻的（看文檔即可）

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 = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  };
  chart.setOption(option);
  return chart;
}

data: {
    ec: {
      onInit: initChart
    },
},           

這樣效果圖就出來；是不是很簡單啊？ 你也趕緊去試試吧！

---更新---

我們可能用不到所有的api，那麼我們可能就會定制自己開發需要的api這些；這個時候會出現以下報錯：

Cannot read property 'get' of undefined           

當大家看到這個錯誤的時候；降本就行；我試了很多版本；發現4.7.0這個版本是可以的；大家有興趣的話也可以去試試其他的版本；到時候可以跟我說一哈哦。