Echarts環形圖設定空資料樣式

需求背景

由于最近的需求涉及到圖表的展示，是以引入Echarts來渲染圖表，但是問題也随之而來了，仔細閱讀過文檔後發現，Echarts對于環形圖并沒有能夠設定預設樣式的地方，對于空資料，界面直接就是空白一片，産品不能接受，沒辦法隻能一頓搗鼓了。

解決問題的方法

經過一番搗鼓後，想到，既然元件不支援空資料，而且還想顯示一個帶顔色的預設的圓環，那麼我們就可以給資料項後多添加一個資料，即預設資料

代碼如下：

// 處理空資料
    if (props.chartdata?.filter(item => item.value > 0).length === 0) {
      tempdata.push({
        value: 100,
        name: ''
      })
    }
           

這裡的props.chartdata即為傳入的表格資料，當傳入表格的資料的value沒有0的時候，即資料為空，補充一個資料給圖表。

注意：

補充的這一項name值必須為空，否則會顯示底部名額文案

加入圖檔後，我們發現，雖然是空資料，但是還是顯示了0% 這個是我們不希望看到的，是以需要進一步處理

優化我們的圖表

1、去除空資料名額

這個還是需要在傳入資料前做處理，即将資料的value設定為 null，具體代碼如下：

tempdata.map(item => {
      if (!item.value) {
        item.value = null;
        return item;
      }
    })
           

效果如下：

現在好一點了，但是我們發現那個設定的空資料，還顯示了根線條，繼續優化

2、去除預設資料的線條

labelLine: {
            normal: {
              lineStyle: {
                opacity: tempdata.length === 6 ? 0 : 1
              }
            }
          },
           

說明一下，這裡，我們通過在series中設定laberLine的樣式，通過判斷資料長度來控制線條透明度進而控制線條是否顯示。

效果如下：

處理完這一步後，比較完美了，但是我們的測試小姐姐還是發現了另外一個問題，當滑鼠放到圓環上的時候，又變成空白了，這個問題産生的原因是：Echarts是有預設動畫的，滑鼠放上去會有放大效果，是以，我們需要禁止空資料時的動畫。

禁止空資料時滑鼠移入動畫

代碼如下：

silent:tempdata.length === 6 ? true : false,
hoverAnimation:tempdata.length === 6 ? false : true,
           

效果如下

至此大工告成！謝謝大家的閱讀。

完整代碼如下：

let tempdata = props.chartdata;
    if (props.chartdata?.filter(item => item.value > 0).length === 0) {
      tempdata.push({
        value: 100,
        name: ''
      })
    }
    tempdata.map(item => {
      if (!item.value) {
        item.value = null;
        return item;
      }
    })
    let myChart = echarts.init(document.getElementById('chart'))
    myChart.setOption({
      legend: {
        show: true,
        left: 'center',
        y: 'bottom',
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 16,
      },
      grid: {
        x: 100,
        y: 20,
        bottom: 30,
      },
      series: [
        {
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['30%', '55%'],
          data: tempdata,
          color: ['#6699FF', '#52CCA3', '#9580FF', '#A1E6CE', '#B3CDFF', "#E9F0FF"],
          label: {
            position: 'outside',
            alignTo: 'none',
            formatter: function (item) {
              return item.name.split(' ')[2]
            }
          },
          silent:tempdata.length === 6 ? true : false,
          hoverAnimation:tempdata.length === 6 ? false : true,
          // 是否避免标簽顯示超出，這個設定為true後，導緻名額較小的時候名額顯示異常
          // avoidLabelOverlap: false,  
          labelLine: {
            normal: {
              lineStyle: {
                opacity: tempdata.length === 6 ? 0 : 1
              }
            }
          },
        },
      ]
    })