利用Echarts如何實現多段圓環圖

Posted on by

前言

開發某款app時,產品給的UI原型圖上有個分為三段的圓環圖,本來以為使用echarts應該會很好做的,主要考慮移動端echarts的兼容問題就好瞭,但是實際操作後發現還是沒法做到完美的還原,最終找瞭很多類似的案例,加上自己的一些調整實現瞭.

原型示例

第一眼看的時候以為用echarts裡的餅圖做一些修改可以達到,但是效果都不太好,首先是每段弧段的邊緣有一個圓角的處理,其次是弧度的寬度是不同,灰色最細,紅色次之,綠色是最寬的.

第二時間又看到瞭一些圓環進度條的示例

本來以為這種圖應該可以實現瞭,但去看瞭示例的代碼發現這種圖是echarts裡的pie組件的一個疊加,一般疊加一次,有兩個區域效果還算可以,但是3個區域的效果在不設置圓弧的寬度時還算可以接受,但是設置瞭寬度後總會有一些疊加後超出不太美觀的問題.

完美實現

最終在玫瑰圖的網站上找到一個比較復雜的實現,通過修改各項配置基本完美的使用ehcarts實現瞭這個圖形. 首先是echarts的一個option的配置代碼,為瞭方便將series與option做瞭一個分離

const colorDataHandle = (data, total, width = 375) => {
    let num = 0
    let option = {
        angleAxis: {
            axisLine: {
		show: false,
            },
            axisLabel: {
		show: false,
            },
            splitLine: {
		show: false,
            },
            axisTick: {
		show: false,
            },
            min: 'dataMin',
            max: 'dataMax',
            startAngle: 135,
            },
            radiusAxis: {
                type: 'category',
                axisLine: {
                    show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        polar: {
            radius: '95%'
        },
        series: []
      }
      // option是對傳入的數據的一個處理
      const options = data.map((item, index) => {
        num += item
        const a = {
          type: 'bar',
          data: [0, 0, 0, num],
          coordinateSystem: 'polar',
          z: 9999 - index,
          roundCap: true,
          color: colors[index],
          barGap: '-100%',
          // barWidth: '30%',
          itemStyle: {
            // 控制弧的寬,弧的寬的控制並沒有做太多的情況判斷,簡單的區分瞭一下
            borderWidth: index === 0 ? 4 : index === 1 ? 2 : 0,
            // shadowBlur: 5,
            // color: 'transparent',
            borderColor: colors[index],
            shadowColor: colors[index],
          },
        }
        return a
      })
            option.series = options
      return option
}

然後是對3種顏色區域的一個處理

const colors = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#1DBC3F', // 0% 處的顏色
      },
      {
        offset: 1,
        color: '#1DBC3F', // 100% 處的顏色
      },
    ],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#CB3939', // 0% 處的顏色
      },
      {
        offset: 1,
        color: '#CB3939', // 100% 處的顏色
      },
    ],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#C0C0C0', // 0% 處的顏色
      },
      {
        offset: 1,
        color: '#C0C0C0', // 100% 處的顏色
      },
    ],
  },
];

這裡是靈活使用瞭echarts type為linear的組件,具體的一個配置項是怎麼實現我並沒有深入探究.

效果圖

最終實現的一個效果圖在真機上的展示

既保證瞭每段弧的首尾的圓角的問題,也實現瞭每段弧寬的增加

總結

echarts這個庫確實博大進深,同時對一些沒有做過的需求的評估需要謹慎再謹慎,我看到這個圖形時覺得用echarts應該就ok瞭,但實際在開發的過程中,坑還是很多,同樣機會也在不經意中就出現瞭,機會還是留給有準備的人的,如果想著圖形太復雜隨隨便便用個環形圖就去實現可能在頁面的呈現上也沒有這麼好的效果瞭.

到此這篇關於利用Echarts如何實現多段圓環圖的文章就介紹到這瞭,更多相關Echarts多段圓環圖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：