Echarts 柱状图默认选中第一个并显示tooltip

在默认情况下，要想查看柱状图的具体详情，我们可以用鼠标点击或者鼠标移入进行查看对应的信息。但是最近碰到了个这么个需求，用户希望能在页面进来的时候展示柱状图的第一个鼠标移入效果，听到这个的时候还是一头雾水。后查阅echart文档可知，除了在echarts图里触发之外，还有一种方式可以触发，即我们可以手动触发。

我用的是action.tooltip.showTip 。通过这个即可实现我需要的效果

后面直接上代码：

mounted() {
    this.init() // 页面加载
},

methods: {
    init() {
        // 绑定的echarts图
        this.myChart = echarts.init(document.getElementById(this.id));
         // 判断是否默认显示第一个鼠标移入效果
          if(this.isShowHover) {  // 忽略，因为我这里是一个公共的封装组件，所以我需要加一个判断
            this.myChart.dispatchAction({
              type: 'showTip',   
              seriesIndex: 0,   // 指定数据项
              dataIndex: 0   // 指定的数据项
         })
      }
     }
}


//

想展示哪一列就将dataIndex换成对应的索引即可。大功告成！！

如果有帮助到你，不妨留下你的小点赞，嘿嘿