微信小程序中引入echart图表的方法

这篇文章给大家分享的是有关微信小程序中引入echart图表的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

正文：

准备：小程序开发环境，下载ECharts组件，gitHub地址：https://github.com/ecomfe/echarts-for-weixin

操作过程：

把ec-canvas拷贝到项目中（可以不是根目录，但是后续引用的时候，注意更改文件地址）

对应页面json文件引入组件

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

对应页面js文件

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: {      text: '测试下面legend的红色区域不应被裁剪',      left: 'center'    },    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],    legend: {      data: ['A', 'B', 'C'],      top: 50,      left: 'center',      backgroundColor: 'red',      z: 100    },    grid: {      containLabel: true    },    tooltip: {      show: true,      trigger: 'axis'    },    xAxis: {      type: 'category',      boundaryGap: false,      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],      // show: false    },    yAxis: {      x: 'center',      type: 'value',      splitLine: {        lineStyle: {          type: 'dashed'        }      }      // show: false    },    series: [{      name: 'A',      type: 'line',      smooth: true,      data: [18, 36, 65, 30, 78, 40, 33]    }, {      name: 'B',      type: 'line',      smooth: true,      data: [12, 50, 51, 35, 70, 30, 20]    }, {      name: 'C',      type: 'line',      smooth: true,      data: [10, 30, 31, 50, 40, 20, 10]}]  };  chart.setOption(option);  return chart;}Page({  data: {    ec: {      onInit: initChart    }  },  onReady() {  }});

wxml文件

<!--index.wxml--><view class="container">  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">  </ec-canvas>  </view>

页面样式

.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;}

感谢各位的阅读！关于“微信小程序中引入echart图表的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！