如何将echart图表引入微信小程序(echart小程序)

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

使用Canvas 2D可以让微信小程序环境中的Canvas更接近W3C标准Canvas接口，因此可以解决之前接口实现不一致导致的bug。而且Canvas 2D的同级别渲染可以解决图表和其他原生组件之间的叠加级别问题。

简要介绍echarts:

商业数据图表(Commercial data chart)，这是一个纯JavaScript的图标库，兼容大部分浏览器，底层依靠轻量级的画布类库ZRender，提供直观、生动、交互、高度个性化的数据可视化图表。拖放重算、数据查看和范围漫游等创新功能极大地增强了用户体验，并为用户提供了挖掘和整合数据的能力。

文本:

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

操作流程:

1.将ec-canvas复制到项目中(可能不是根目录，但是以后引用的时候注意改一下文件地址)

2.相应页面的json文件被引入到组件中

{ 使用组件 :{ ec-画布 : ../../ec-画布/ec-画布 }}(免费视频教程:php视频教程)

3.相应页面的js文件

从 # 39；../../ec-canvas/e charts # 39；；函数initChart(canvas，width，height){ const chart = echarts . init(canvas，null，{ width: width，height:height })；canvas.setChart(图表)；var option = { title:{ text: # 39；以下测试图例的红色区域不应被裁剪 # 39；，左: # 39；中心 # 39；}，颜色:

推荐:小程序开发教程以上是如何在微信小程序中介绍echart的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：如何将echart图表引入微信小程序(echart小程序) https://zhujicankao.com/79510.html