小程序加入echart 圖表

github上的地址 https://github.com/ecomfe/echarts-for-weixin

復制到當前項目根目錄下

添加展示bar圖表例子的文件夾

 

 

 index.json 中配置使用的組件，以及組件的位置

這一配置的作用是，允許我們在 pages/bar/index.wxml 中使用 <ec-canvas> 組件。注意路徑的相對位置要寫對

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

 

index.wxml   使用 <ec-canvas> 組件

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
</view>

注意此處的 .container，新建小程序項目后，其中 app.wxss 中默認自動生成的此 class ，修改成如下

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

在index.js中寫的echartInit方法進行初始化

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 = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      //onInit: initChart,如果在wxml中沒有寫bind:init方法，就直接這樣用
    }
  }，
 echartInit (e) {
    initChart(e.detail.canvas, e.detail.width, e.detail.height);
  }
});

進行封裝改寫

在utils中封裝圖表的方法

 

 

 在index.js中的使用

 

 

 當然在使用頁面前。都需要在app.json里面聲明頁面地址才能使用

 

 

 

了解到一個參數data-record="{{recordData}}"，就是可以在echartInit  方法中找到data里面的recordData的數據

 echartInit(e) {
       console.log(e);
       let recordData=e.target.dataset.record;
        initChart(e.detail.canvas, e.detail.width, e.detail.height,recordData);
    },