快捷導(dǎo)航

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

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

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

前言

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

原型示例

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

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

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

完美實(shí)現(xiàn)

最終在玫瑰圖的網(wǎng)站上找到一個(gè)比較復(fù)雜的實(shí)現(xiàn),通過修改各項(xiàng)配置基本完美的使用ehcarts實(shí)現(xiàn)了這個(gè)圖形. 首先是echarts的一個(gè)option的配置代碼,為了方便將series與option做了一個(gè)分離

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是對(duì)傳入的數(shù)據(jù)的一個(gè)處理
      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
}

然后是對(duì)3種顏色區(qū)域的一個(gè)處理

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

效果圖

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

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

總結(jié)

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

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

您可能感興趣的文章: