微信小程序中如何引入echart图表

发布日期： 2021-03-11 阅读量： 作者： 网络

微信小程序中如何引入echart图表

前不久，ECharts 团队与微信小程序团队合作公布了 ECharts 微信小程序支持 Canvas 2D 的更新。

使用 Canvas 2D 可以使微信小程序环境中的 Canvas 与 W3C 标准 Canvas 接口更为接近，因而可以解决之前接口实现不一致引起的 bug。并且，Canvas 2D 的同层渲染可以解决图表与其他原生组件覆盖层级的问题。

简单介绍下echarts：

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

正文：

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

操作过程：

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

2、对应页面json文件引入组件

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

随便看看