Taro+Vue3 小程序引入echarts表

背景：根据需求在一个报告界面需要展示不同的echarts表来使数据更友好的显示。

效果如下：

一.taro支持echarts

官方说明：Taro 文档支持引用小程序端第三方组件库

物料文档：Taro 物料市场 | 让每一个轮子产生价值

二.引入echarts-for-weixin插件

github地址: https://github.com/ecomfe/echarts-for-weixin

只引入ec-canvas文件夹下的wx-canvas.js

三.自定义 下载echarts

地址: https://echarts.apache.org/zh/builder.html

可自行选择版本，笔者测试了5.3.3和5.4.1都支持

下载后得到echarts.min.js

请根据需要自行选择需要的图表打包下载，我只选了默认的饼图、柱图、线图;
注意点：折线图中如果需要显示面积图的平均线，则要下载对应的标线组件。

经过三、四步骤之后会得到两个文件，目录结构如下：

四.封装组件ec-canvas.vue

 五.封装e-chart.vue组件

六.使用封装的组件

此时封装的目录结构如下：

子组件：

父组件引用子组件：

import loanAnalysis from './loan-analysis.vue';

 



【 问题描述 】在小程序使用echarts，图表展示出来之后不跟随页面滚动，浮在最上方。
【 问题原因 】布局中含有position:fixed或absulote的元素，导致echarts图表无法滑动。
官方文件说明：canvas为原生组件故有一下的性质： bash 由于原生组件脱离在 WebView 
渲染流程外，因此在使用时有以下限制： 组件的层级是最高的，所以页面中的其他组件无论设置
 z-index 为多少，都无法盖在原生组件上。 后插入的原生组件可以覆盖之前的原生组件。 
原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。 
部分CSS样式无法应用于原生组件，例如： 无法对原生组件设置 CSS 动画 无法定义
原生组件为 position: fixed 不能在父级节点使用 overflow:hidden 来裁剪
原生组件的显示区域
【 解决方法 】所有父级元素（有包含ec-canvas的所有view元素）的position不可为
fixed或absulote，将其改为其他，另外兄弟元素可以为position:absulote或fixed，
否在还是会有重叠

原文链接：https://blog.csdn.net/samscat/article/details/126182735

 参考博文：Taro3+Vue3使用echarts_taro使用echarts_江渚清沨的博客-CSDN博客