本文详细介绍在uni-app微信小程序中集成echarts图表库的完整流程。针对mpvue-echarts组件在小程序环境下的兼容性问题，提供了修改echarts.min.js源码以解决addEventListener报错及dataZoom滑动异常的具体代码方案，并展示如何在页面中正确引入和配置图表实例。
前言：
原本计划使用ucharts组件，但由于其无法监听图例点击事件，无法满足项目对交互功能的需求，因此决定放弃该方案。
首先，需要下载并配置echarts相关组件。
建议先创建一个临时文件夹，执行npm init初始化项目，随后下载必要的依赖包。
npm install echarts mpvue-echarts下载完成后，进入node_modules\mpvue-echarts目录，查看内部文件结构。
仅保留src目录，删除其他未使用的文件，然后将mpvue-echarts文件夹复制到你项目的components目录中。
接下来，需要获取echarts.min.js文件。
访问ECharts在线构建定制页面，根据项目需求选择所需的图表及组件，并勾选代码压缩选项。将下载得到的echarts.min.js文件放入项目指定位置。注意，该文件还需要进行代码修改。
必须修改echarts.min.js，否则运行时会报错“t.addEventListener is not a function”。
第一步，增加相关代码。
var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener;具体添加位置如下图所示。
第二步，修改Le和Pe函数（可通过Ctrl+F搜索定位），修改方式如下。
// An highlighted block
function Pe(t, e, n, i) {
if (isDomLevel2) {
t.addEventListener(e, n, i)
} else {
t.attachEvent('on' + e, n)
}
}
function Le(t, e, n, i) {
if (isDomLevel2) {
t.removeEventListener(e, n, i)
} else {
t.detachEvent('on' + e, n)
}
}
第三步，全文搜索preventDefault()，在当前方法函数中增加判断逻辑。起初未修改此部分时图表显示正常，但在使用dataZoom滑动功能时会报错“t.preventDefault is not a function”。修改为如下代码后，滑动功能即可正常使用。
具体修改代码如下。
// An highlighted block
if (isDomLevel2) {
t.preventDefault(), t.stopPropagation(), t.cancelBubble = !0
} else {
t.returnValue = false;
t.cancelBubble = !0
}
由于压缩代码格式化后体积会增加一倍，因此最终选择不格式化，直接在压缩代码中找到对应位置进行修改。
准备工作已全部完成，接下来开始正式使用。
在页面中引入并使用echarts组件。
<template>
<view class="echarts-wrap">
<my-echarts
id="main"
ref="mapChart"
:echarts="echarts"
:onInit="initChart"
/>
</view>
</template>
<script>
import * as echarts from "@/pages/data/static/js/echarts.min.js"; //这里根据自己存放的路径修改
import myEcharts from "@/pages/data/components/mpvue-echarts/src/echarts.vue"; //这里根据自己存放的路径修改
let chart = null; //放外层方便拿到echart实例
export default {
components: {
myEcharts,
},
data() {
return {
echarts,
};
},
onReady() {},
mounted() {
setTimeout(() => {
chart.on("click", (params) => { //监听图例点击事件（详细参见echart文档）
this.$emit("chartClick", params);
});
}, 500);
this.updateData() //模拟动态更新数据
},
methods: {
initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
});
canvas.setChart(chart);
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
},
]
}; // ECharts 配置项（详细的图表配置参见 echart配置项）
chart.setOption(option);
return chart; // 返回 chart 后可以自动绑定触摸操作
},
updateData(){
setTimeout(()=>{
chart.setOption({
series:[{
data:[30, 90, 111, 20, 70, 88, 11]
}]
})
},1000)
},
},
};
</script>
<style>
.echarts-wrap {
width: 100%;
height: 300px;
}
</style>
详细的图表配置参数请参考官方echarts配置项文档。最终实现的图表效果如下图所示。
总结：
至此，关于在uni-app微信小程序中使用echarts的教程介绍完毕。如需了解更多相关内容，可搜索本站往期文章或继续浏览后续文章，感谢大家的支持！