移动端使用echarts绘制图表使用tooltip无效果

前言：经常使用echarts的码友们应该知道在PC端使用tooltip时是鼠标移入会有弹窗显示信息的功能，但是在移动端无论怎么样都无法触发弹窗显示，经过多方面信息收集发现只有用echarts版本4以下的才可以在移动端显示tooltip的功能

1. 项目期望

用手点击屏幕上对应区域时显示对应的数据

image.png

2. 项目实现

原本我用的是echarts最新的版本5.3.1发现在PC端功能一切正常到了移动端就会丢失该功能
安装echarts版本为3到4的版本即可实现该功能，为了有更好的兼容性我选择安装的是3系列的最高的版本3.8.4

npm install echarts@3.8.4

3系列一共有的版本如下

3系列echarts版本

然后还并没有结束一些4系列5系统的属性写法在3系列是无法使用的例如我遇到这个问题

image.png
如果你没不想让这些字和线条显示

在echarts版本为4系列和5系列的写法是

label: {
  show: false,
},
labelLine: {
  show: false,
},

在echarts版本为3系列的写法是

itemStyle: {
  normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
   },
},

如果我们想显示legend

image.png

在echarts版本为4系列和5系列的写法是

legend: {
  type: "scroll",
  orient: "vertical",
  right: 10,
  top: 20,
  bottom: 20,
},

在echarts版本为3系列的写法是

legend: {
  type: "scroll",
  orient: "vertical",
  right: 10,
  top: 20,
  bottom: 20,
  data: [] // 里面存放需要显示的内容 注意：要和series下的list里面的name一致方可有效
},

生活就是不断的积累 奥力给