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

2022-03-03 13:00:15

前言

開發某款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多段圓環圖內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

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

目錄

前言

原型範例

完美實現

效果圖

總結

熱門文章