echarts map地图默认显示高亮和tooltip

最新推荐文章于 2025-02-19 11:13:02 发布

原创最新推荐文章于 2025-02-19 11:13:02 发布 · 3.3k 阅读

7 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Echarts库在地图上设置默认的高亮效果，并且展示如何实现鼠标悬停时的Tooltip信息显示，帮助读者更好地理解和应用Echarts地图功能。

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('mapEcharts'))
      // 绘制图表
      myChart.setOption(this.getOptions)
      // 默认高亮
      myChart.dispatchAction({
            type: 'geoSelect',
            name:'山西'
      }) 
      // 默认显示toollip
      myChart.dispatchAction({
            type: 'showTip',
            seriesIndex:0 ,//第几条series
            dataIndex: 0,//显示第几个tooltip
       })
      //图表文字自适应
      window.addEventListener("resize", () => {
        this.windowCliW = document.body.clientWidth;
        myChart.setOption(this.getOptions);
        myChart.resize();
      });