Echarts餅圖(環圖)開啓默認高亮

Echarts的餅圖或環圖,默認繪製完成是沒有高亮的,只有鼠標懸浮會觸發高亮,鼠標離開高亮就消失

現在需要默認高亮。參考簡書作者行舟2009的文章

實現(鼠標懸浮後,讓label駐留)功能

只需在myChart.setOption(options);之後添加以下代碼即可:

      // 默認高亮
      let index = 0; // 高亮索引
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: index,
        dataIndex: index
      });
      myChart.on("mouseover", function(e) {
        if (e.dataIndex != index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index
          });
        }
      });
      myChart.on("mouseout", function(e) {
        index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      });

默認效果如下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章