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

qq_46043270

已于 2024-08-28 09:15:33 修改

阅读量2.3k

点赞数 10

分类专栏：微信小程序文章标签：微信小程序 echarts 小程序

于 2024-02-02 16:39:00 首次发布

本文链接：https://blog.csdn.net/qq_46043270/article/details/135994064

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在微信小程序中使用ECharts库，包括下载官方库、引入组件、动态数据渲染以及解决页面滚动时图表滚动的问题，同时提供了性能优化的方法，如引入特定图表和使用图片替代canvas以适应不同系统需求。

摘要由CSDN通过智能技术生成

一、引入加载使用

1.下载官方库到本地

官网地址 GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

将官网代码下载到本地，并进行解压，可以运行一下查看示例代码

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

2.引入echarts组件

json文件，路径要与文件的位置保持一致

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

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

<view class="evabar">
	<ec-canvas id="evabar" canvas-id="evabar" ec="{{evabarEc}}"></ec-canvas>
</view>

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

    .evabar {
        width: 100%;
        height: 220px;
    }

    ec-canvas {
        width: 100%;
        height: 100%;
    }

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

import * as echarts from "../../components/ec-canvas/echarts"


Page({
  data: {
    evabarEc: { 
        disableTouch: true, 
        lazyLoad: true, // 延迟加载
        // 不需要延迟加载时,只使用下面onInit进行渲染即可
        // onInit: (canvas: any, width: any, height: any, dpr: any) => {
        //   const chart = echarts.init(canvas, null, {
        //     width: width,
        //     height: height,
        //     devicePixelRatio: dpr // new
        //   })        
        //   var option = {
        //     ...
        //   };
        //   chart.setOption(option);
        //   return chart
        // }
    },
  },
  onReady() {
    // 获取组件
    this.ecComponent = this.selectComponent('#evabar');
  },
   /** 获取数据后渲染图表 */
  initFn() {
      // 获取数据后
      this.ecComponent.init((canvas: any, width: any, height: any, dpr: any) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        var option = {
            ...
        };
        chart.setOption(option);
        return chart
      })
  }
})

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

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

二、实现页面滚动时，图表随之滚动

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

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

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

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

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

data:{
    ...,
    evabarEc: { disableTouch: true, lazyLoad: true },
    evabarImg:''
}

...
        // initFn中
        var option = {...};
        
        // =================================== 添加以下代码
        chart.on('finished', () => {
          this.evabarEcComponent.canvasToTempFilePath({
            success: (res: any) => {
              this.setData({
                evabarImg: res.tempFilePath
              })
            },
            fail: (res: any) => console.log('转换图片失败', res)
          });
        })
        // ======================================= 结束
        chart.setOption(option);
        return chart

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

				<view class="evabar" hidden="{{evabarImg!=''}}">
					<ec-canvas id="evabar" canvas-id="evabar" ec="{{evabarEc}}"></ec-canvas>
				</view>
				<view class="evabar" hidden="{{evabarImg==''}}">
					<image src="{{evabarImg}}" class="image" mode=""/>
				</view>