微信小程序使用echarts动态加载数据(页面滚动、ios)

一、引入加载使用

1.下载官方库到当地

官网地址 GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本 
将官网代码下载到当地，并进行解压，可以运行一下查看示例代码

将图示中的文件夹复制粘贴到小程序相应位置，发起放在components文件夹中 

 2.引入echarts组件

json文件，路径要与文件的位置保持同等

1. {
2.   "usingComponents": {
3.     "ec-canvas":"../../components/ec-canvas/ec-canvas"
4.   }
5. }

复制代码

 wxml文件，给ec-canvas一个父容器，并给组件两个对应的id

1. <view class="evabar">
2.         <ec-canvas id="evabar" canvas-id="evabar" ec="{{evabarEc}}"></ec-canvas>
3. </view>

复制代码

wxss文件，给父容器一个固定宽高，并给ec-canvas宽高都设置百分百

1.     .evabar {
2.         width: 100%;
3.         height: 220px;
4.     }
6.     ec-canvas {
7.         width: 100%;
8.         height: 100%;
9.     }

复制代码

js文件，引入相应位置的 echarts.js 文件，data中添加渲染必要的对应数据，获取完动态数据后加载innitFn方法

1. import * as echarts from "../../components/ec-canvas/echarts"
4. Page({
5.   data: {
6.     evabarEc: {
7.         disableTouch: true,
8.         lazyLoad: true, // 延迟加载
9.         // 不需要延迟加载时,只使用下面onInit进行渲染即可
10.         // onInit: (canvas: any, width: any, height: any, dpr: any) => {
11.         //   const chart = echarts.init(canvas, null, {
12.         //     width: width,
13.         //     height: height,
14.         //     devicePixelRatio: dpr // new
15.         //   })        
16.         //   var option = {
17.         //     ...
18.         //   };
19.         //   chart.setOption(option);
20.         //   return chart
21.         // }
22.     },
23.   },
24.   onReady() {
25.     // 获取组件
26.     this.ecComponent = this.selectComponent('#evabar');
27.   },
28.    /** 获取数据后渲染图表 */
29.   initFn() {
30.       // 获取数据后
31.       this.ecComponent.init((canvas: any, width: any, height: any, dpr: any) => {
32.         const chart = echarts.init(canvas, null, {
33.           width: width,
34.           height: height,
35.           devicePixelRatio: dpr // new
36.         });
37.         var option = {
38.             ...
39.         };
40.         chart.setOption(option);
41.         return chart
42.       })
43.   }
44. })

复制代码

3.以上方法可以根本实现动态数据渲染

因为 echarts 是通过 canvas 画图实现 ，canvas作为微信小程序的原生组件，层级较高且无法通过 zIndex 进行更改，所以会出现页面滚动，而图表在屏幕固定位置占位影响页面效果的情况，下面对代码进行更改，办理该问题
 二、实现页面滚动时，图表随之滚动

1.方法一（小程序模仿器、android）

 在组件中添加 force-use-old-canvas="true" 属性，这个方法可以办理 charts 在win和Android的不滚动问题，但是 ios系统 中的问题得不到办理，该方法属于逼迫使用旧canvas，2.9.0版本以上就不推荐使用该方法

1. <ec-canvas id="evabar" canvas-id="evabar" ec="{{evabarEc}}" force-use-old-canvas="true"></ec-canvas>

复制代码

2.方法二（小程序模仿器、android、ios）

将 cahrt 转换成图片，data中添加变量用来存储图片地址 ，并在 initFn 中添加以下代码

1. data:{
2.     ...,
3.     evabarEc: { disableTouch: true, lazyLoad: true },
4.     evabarImg:''
5. }
7. ...
8.         // initFn中
9.         var option = {...};
10.         
11.         // =================================== 添加以下代码
12.         chart.on('finished', () => {
13.           this.evabarEcComponent.canvasToTempFilePath({
14.             success: (res: any) => {
15.               this.setData({
16.                 evabarImg: res.tempFilePath
17.               })
18.             },
19.             fail: (res: any) => console.log('转换图片失败', res)
20.           });
21.         })
22.         // ======================================= 结束
23.         chart.setOption(option);
24.         return chart

复制代码

 wxml文件，这里假如使用 wx:if 对图表进行体现隐蔽，在下一次图表更新时会报错（找不到对应的node节点），使用 hidden 减少了页面的重新渲染，且不会出现节点烧毁问题

1.                                 <view class="evabar" hidden="{{evabarImg!=''}}">
2.                                         <ec-canvas id="evabar" canvas-id="evabar" ec="{{evabarEc}}"></ec-canvas>
3.                                 </view>
4.                                 <view class="evabar" hidden="{{evabarImg==''}}">
5.                                         <image src="{{evabarImg}}" class="image" mode=""/>
6.                                 </view>

复制代码

 三、引入对应的图表，减少引入量，提高性能

  Apache ECharts echarts官网地址
在 echarts 的 github 中点开 ec-canvas 文件夹，查看当前下载的版本

到官网中找到下载，在线定制

选择与代码同版本的，然后在下面勾选必要的图表，页面最后进行下载，会得到一个  echarts.min.js 文件
把项目的 ec-canvas 文件夹中的 echarts.js 删除，将 echarts.min.js 复制到文件夹中
将文件夹中的 ec-canvas.js 和 其它页面 引入的 echarts.js 更改成 echarts.min.js 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。