Echarts 問題解決 —— 環狀餅圖預設顯示第一條資料及提示框、滑鼠移動上去後不突出、中間展示指定樣式數字、滑鼠移到扇形上顯示不同顏色的數字、迴圈高亮顯示餅圖各模組的扇形；

阿新 • • 發佈：2021-01-07

目錄

1.環狀餅圖預設顯示第一條資料及提示框

2.環狀餅圖滑鼠移動上去後不突出顯示

3.環狀餅圖中間展示指定樣式數字

4.環狀餅圖滑鼠移到圖例上顯示不同顏色的數字

5.環狀餅圖迴圈高亮顯示餅圖各模組的扇形

6.formatter、rich 結合

7.折點無法完全顯示

8.設定時延後圖表不顯示

1.環狀餅圖預設顯示第一條資料及提示框

效果展示：
// 預設展示第一條資料的提示框
myChart.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: 0
});

// 預設高亮展示第一條資料
myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 0
});

myChart.on('mouseover', (v) => {
  if (v.dataIndex != 0) {
    // 高亮顯示懸停的那塊
    myChart.dispatchAction({
      type: 'hideTip',
      seriesIndex: 0,
      dataIndex: 0
    });
    // 當檢測到滑鼠懸停事件，取消所有選中高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: 0
    });
  }
});

// 檢測滑鼠移出後顯示之前預設高亮的那塊
myChart.on('mouseout', (v) => {
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 0
  });
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
  });
}); 

2.環狀餅圖滑鼠移動上去後不突出顯示

效果展示：滑鼠移動上去之後，圖表保持原樣，而不是像 1 中那樣突出展示
扇形不突出：series / hoverAnimation:false

3.環狀餅圖中間展示指定樣式數字

效果展示：見 2 中的環狀圖中間文字數字的效果
為中間內容指定單獨樣式： series / emphasis / label / formatter + rich

                emphasis: {
                    label: {
                        // 未指定元素時，其他文字的樣子
                        show: true,
                        fontSize: "18",
                        fontWeight: "bold",
                        padding: [-10, 0, 0, 0],
                        formatter: function(data) {
                            // 將中間的文字資訊進行分割，設定不同的類名
                            // 百分數字的樣式、百分號的樣式、百分項名字的樣式
                            return (
                                "{percent|" +
                                data.percent +
                                "}" +
                                "{per|%}" +
                                "\n{name|" +
                                data.name +
                                "}"
                            );
                        },
                        // 書寫不同類名對應的樣式
                        rich: {
                            // 中間彩色數字
                            percent: {
                                fontSize: 28,
                                fontFamily: "DIN-Bold",
                                fontWeight: "bold",
                                color: "#FFEA00",
                            },
                            // 中間百分號
                            per: {
                                fontSize: 16,
                                color: "#FFFFFF",
                                fontFamily: "MicrosoftYaHei",
                                padding: [0, 5, 5, -5],
                            },
                            // 中間下方標題
                            name: {
                                fontSize: 16,
                                color: "#FFFFFF",
                                fontFamily: "MicrosoftYaHei",
                                padding: [-25, 0, 0, 0],
                            },
                        },
                    },
                },

4.環狀餅圖滑鼠移到圖例上顯示不同顏色的數字

場景再現：
實現餅圖中，滑鼠懸浮在每個模組上，圖例相應模組的數值顏色發生改變
問題分析：

各個模組對應的數值設定對應的富文字樣式
監聽餅圖例項 myChart 的 mouseover 和 mouseout 事件，在事件回撥函式裡獲取引數物件的 dataIndex 屬性
使用 switch case 判斷滑鼠懸浮在哪個模組上，讓該模組的數值對應它自己的富文字樣式
最後，把 option 追加到 myChart 例項上
formatter: function (name) {
    var target ;
    for (1et i = 0; i < data.length; i++) {
        if (data[i].name === name) {
        target = data[i].value
      }
}
    var arr=['{b|'+ name + '}，'{a' + (index) + '|' + target + '}']
    index++ ;
    index %= data . length;
    return arr. join('')
},
textstyle: {
    width: 200,
    rich: {
        a0: {
            fontSize: 12,
            color:” #fff"
            align: 'right',
            fontweight: ' bold'
        },
        a1: { ...


// 最後，把 option 追加到 myChart 例項上
myChart . on( ' mouseover', function (v) {
    var dataIndex =' a' + v.dataIndex; 
    switch (dataIndex) {
        case 'a0' :
            option.legend.textStyle.rich.a0.color = ' #00ffff'
            break;
        case 'a1' :
            option.legend.textStyle.rich.a0.color = ' #00ffff'
            break;
        ...... 

5.環狀餅圖迴圈高亮顯示餅圖各模組的扇形

問題分析：設定定時器，使用 Echarts 提供的 dispatchAction 觸發圖表行為：
每次高亮後，改變需要高亮顯示模組的索引
/**
 * 餅圖各模組自動迴圈高亮顯示
 * 
 */
function autoHighlight(flag) {
  var index = -1
  mTime = setInterval(function () {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: index
    });
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index + 1
    });
    index++;
    if (index >= option.series[0].data.length) {
      index = -1;
    }
  }, 1000)
}

6.formatter、rich 結合

給 label 新增 formatter 和 rich富文字 格式化圖例文字
formatter: function(data) {
    return '{percent|' + data.percent + '}'
}
rich: {
  percent: {
    fontSize: 40,
    fontWeight: 'bold',
    fontFamily: 'din-bold'
  }
7.折點無法完全顯示
series: [
  showAllSymbol: true;
  ]
8.設定時延後圖表不顯示

已經給圖表容器設定寬高了，並且增加了時延，圖表顯示不出來
改變匯入 echarts 的形式
// bad：
import echarts from 'echarts'
// good：
import * as echarts from 'echarts'