小程序开发-echarts—第三方图表组件集成.pptVIP

echarts—第三方图表组件集成小程序开发

echarts

echartsApacheECharts的微信小程序版本echartsgithub地址兼容微信小程序canvas提供ec-canvas组件特点支持ECharts的绝大部分功能支持图表下载echarts-for-weixin项目或使用其中对应的文件目录加入到微信小程序项目中使用方法官网下载

微信小程序集成echarts

微信小程序集成echarts第一步：在GitHub上下载ecomfe/echarts-for-weixin项目。

微信小程序集成echarts其中，ec-canvas是提供的组件，其他文件是如何使用该组件的示例，工程中提供以下图表的展现示例。

微信小程序集成echarts第二步：复制ec-canvas目录到微信小程序项目工程目录下。

json文件js文件微信小程序集成echarts第三步：在需要显示echarts图表的小程序页面的json文件、js文件中加入对应的引用。import*asechartsfrom../../ec-canvas/echarts;{usingComponents:{ec-canvas:../../ec-canvas/ec-canvas//配置页面支持ec-canvas组件}}

wxml文件微信小程序集成echarts第四步：在需要显示echarts图表的小程序页面的wxml文件中加入对应的ec-canvas组件。ec-canvasid=“eccanvasid”canvas-id=“mychart-pie”ec=“{{ec}}/ec-canvas

微信小程序集成echarts第五步：在js文件中初始化ec的值。对于所有ECharts图表都是通用的，用户只需要修改上面option的内容，即可改变图表。functioninitChart(canvas,width,height,dpr){constchart=echarts.init(canvas,null,{width:width,height:height,devicePixelRatio:dpr//像素});canvas.setChart(chart);?varoption={...};chart.setOption(option);returnchart;}?Page({data:{ec:{onInit:initChart}}});js文件

微信小程序集成echarts示例

显示echarts单个图表微信小程序集成echarts示例

为显示echarts单个图表，新建微信小程序页面eccanvastest，在eccanvastest.wxml文件中写入以下代码：微信小程序集成echarts示例eccanvastest.wxmlviewclass=container ec-canvasid=mychart-dom-linecanvas-id=mychart-lineec={{ec}}/ec-canvas/view

在eccanvastest.json文件中写入以下代码：微信小程序集成echarts示例eccanvastest.json{component:true,usingComponents:{ec-canvas:../ec-canvas/ec-canvas}}

eccanvastest.wxss微信小程序集成echarts示例//注意的点：//1这个container容器一定要设置固定宽高.container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;height:516rpx;width:611rpx;}//！！注意：这里也一定要设置个百分比宽高，不然图表在页面上不显示ec-canvas{width:100%;height:100%;}在eccanvastest.wxss文件中写入以下代码：

微信小程序集成echarts示例在eccanvastest.js文件中写入代码。eccanvastest.js

Echarts示例微信小程序集成echarts示例

实操演示实操视频

谢谢观看小程序开发