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

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问答