在微信小程序中使用图表的方法示例

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

<view class="container">
 <ec-canvas id="mychart-dom-bar" style="width:100%;height:300px;" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

import  as echarts from '../../ponent/ec-canvas/echarts';

function initChart(canvas, width, height) {
 const chart = echarts.init(canvas, null, {
  width: width,
  height: height
 });
 canvas.setChart(chart);

 //这里复制了官方示例配置
 var option = {
  title: {
   text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
   data: ['销量']
  },
  xAxis: {
   data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  yAxis: {},
  series: [{
   name: '销量',
   type: 'bar',
   data: [5, 20, 36, 10, 10, 20]
  }]
 };
 chart.setOption(option);
 return chart;
}

Page({

 /
   页面的初始数据
  /
 data: {
  ec:{
   onInit:initChart
  }
 },

 /
   生命周期函数--监听页面加载
  /
 onLoad: function (options) {

 },

 /
   生命周期函数--监听页面初次渲染完成
  /
 onReady: function () {

 },

 /
   生命周期函数--监听页面显示
  /
 onShow: function () {

 },

 /
   生命周期函数--监听页面隐藏
  /
 onHide: function () {

 },

 /
   生命周期函数--监听页面卸载
  /
 onUnload: function () {

 },

 /
   页面相关事件处理函数--监听用户下拉动作
  /
 onPullDownRefresh: function () {

 },

 /
   页面上拉触底事件的处理函数
  /
 onReachBottom: function () {

 },

 /
   用户点击右上角分享
  /
 onShareAppMessage: function () {

 }
})