快捷導(dǎo)航

利用Echarts如何實現(xiàn)多段圓環(huán)圖

更新時間：2022年03月03日 11:34:33 作者：NorthMaple

這篇文章主要給大家介紹了關(guān)于利用Echarts如何實現(xiàn)多段圓環(huán)圖的相關(guān)資料,文中通過實例代碼代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

開發(fā)某款app時,產(chǎn)品給的UI原型圖上有個分為三段的圓環(huán)圖,本來以為使用echarts應(yīng)該會很好做的,主要考慮移動端echarts的兼容問題就好了,但是實際操作后發(fā)現(xiàn)還是沒法做到完美的還原,最終找了很多類似的案例,加上自己的一些調(diào)整實現(xiàn)了.

原型示例

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

第二時間又看到了一些圓環(huán)進(jìn)度條的示例

本來以為這種圖應(yīng)該可以實現(xiàn)了,但去看了示例的代碼發(fā)現(xiàn)這種圖是echarts里的pie組件的一個疊加,一般疊加一次,有兩個區(qū)域效果還算可以,但是3個區(qū)域的效果在不設(shè)置圓弧的寬度時還算可以接受,但是設(shè)置了寬度后總會有一些疊加后超出不太美觀的問題.

完美實現(xiàn)

最終在玫瑰圖的網(wǎng)站上找到一個比較復(fù)雜的實現(xiàn),通過修改各項配置基本完美的使用ehcarts實現(xiàn)了這個圖形. 首先是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是對傳入的數(shù)據(jù)的一個處理
      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: {
            // 控制弧的寬,弧的寬的控制并沒有做太多的情況判斷,簡單的區(qū)分了一下
            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種顏色區(qū)域的一個處理

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的組件,具體的一個配置項是怎么實現(xiàn)我并沒有深入探究.

效果圖

最終實現(xiàn)的一個效果圖在真機(jī)上的展示

既保證了每段弧的首尾的圓角的問題,也實現(xiàn)了每段弧寬的增加

總結(jié)

echarts這個庫確實博大進(jìn)深,同時對一些沒有做過的需求的評估需要謹(jǐn)慎再謹(jǐn)慎,我看到這個圖形時覺得用echarts應(yīng)該就ok了,但實際在開發(fā)的過程中,坑還是很多,同樣機(jī)會也在不經(jīng)意中就出現(xiàn)了,機(jī)會還是留給有準(zhǔn)備的人的,如果想著圖形太復(fù)雜隨隨便便用個環(huán)形圖就去實現(xiàn)可能在頁面的呈現(xiàn)上也沒有這么好的效果了.

到此這篇關(guān)于利用Echarts如何實現(xiàn)多段圓環(huán)圖的文章就介紹到這了,更多相關(guān)Echarts多段圓環(huán)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: