vue+uniapp+echarts的使用（H5环境下echarts）

最新推荐文章于 2026-03-10 00:12:07 发布

原创最新推荐文章于 2026-03-10 00:12:07 发布 · 958 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts #前端 #javascript #uni-app

ECharts 专栏收录该内容

10 篇文章

订阅专栏

1.安装

npm install echarts@4.9.0 --save // 带版本号

2.main.js中全局引用

// import echarts from 'echarts' // 如果是5.0以上版本用这个

import * as echarts from 'echarts'

Vue.prototype.$echarts=echarts

3.使用

<template>
    <view id="box" style="width: 520rpx;height: 520rpx;"></view>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var box = this.$echarts.init(document.getElementById("box"));
      var options;
      options = {
		tooltip: {
			show: true,
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      box.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

然后，你会发现，npm install echarts --save安装出现报错，然后呢提示框写了不生效，嘿嘿；

说说我的报错解决方法吧！

vue+uniapp+echarts在H5环境下的报错日志

报错一：.init is undefined

初始化图表失败，请检查你的echarts是否安装成功

成功的话，请检查你当前安装的版本是否过高，是就降低版本（比如我之前安装了5.5.4版本，后来降为4.9.0就不报了）；不是那就 百度一下你就知道了~~

失败的话，重新安装（比如安装4.9.0版本的？？或者 百度一下？？

问题一：echart的tooltip不显示（如上示例，pc端是可以显示，H5就不显示了）

博主一顿好找，嘿嘿找到了

说在main.js中添加 window.wx = {} ，嘿，我添加也不生效

不卖关子了

新建一个自定义模块，在自定义模块中设置window.wx；然后在main.js第一行导入该模块，刷新一下

if(window.wx) {  
    window.wx = undefined  
}  

export default {  

}

问题二参考：解决H5环境下echarts tooltip无法显示html的问题 - DCloud问答