echarts多圓環餅圖

不用UI也可獲得的echarts超炫餅圖體驗（其實根本沒有UI）🌚

先看效果圖

這種樣式的餅圖要依賴echarts畫圓環的功力，多畫幾個就有這種效果了

上代碼

多圓環疊加之術😶

初始化一些參數

let echarts = require('echarts/lib/echarts')
let Chart1 = echarts.init(document.getElementById('pie_chart1'))
      //  餅圖開始
      let chartTitle1 = '總數'
      let chartLabel1 = ['有車', '沒車']
      let chartValue1 = [10, 15]
      let innerNumber1 = 456
      let chartData1 = []
      for (let i = 0; i < chartLabel1.length; i++) {
        chartData1.push({
          name: chartLabel1[i],
          value: chartValue1[i]
        })
      }
      // 顏色取值列表，餅圖漸變色解決方案
      let colorList1 = [new echarts.graphic.LinearGradient(0, 0, 0, 1,
        [
          { offset: 0, color: '#23bffe' },
          { offset: 0.5, color: '#4d6aff' },
          { offset: 1, color: '#23bffe' }
        ]), '#02edff']

      Chart1.setOption(this.setOption(chartTitle1, innerNumber1, chartLabel1, chartValue1, colorList1, chartData1))

設置option的函數

setOption(title, innerNum, chartLabel, chartValue, colorList, chartData){
        title: [{
          // 餅圖小標題
          show: true,
          text: title,
          x: '47%',
          y: '40%',
          textAlign: 'center',
          textStyle: {
            fontSize: '12',
            color: '#fff',
            fontWeight: '100'
          }
        }, {
          // 餅圖大標題
          text: innerNum,
          x: 'center',
          top: '23%',
          textStyle: {
            fontSize: '22',
            color: '#fff',
            fontWeight: '600'
          }
        }],
        legend: {
          // 圖下標簽
          orient: 'vertical',
          bottom: 0,
          data: chartLabel,
          textStyle: {
            color: '#fff'
          },
          formatter: function (name) {
            let index = 0
            let clientlabels = chartLabel
            let clientcounts = chartValue
            clientlabels.forEach(function (value, i) {
              if (value === name) {
                index = i
              }
            })
            return name + '  ' + clientcounts[index]
          }
        },
        series: [{
          // 第一環
          type: 'pie',
          zlevel: 1,
          silent: true,
          radius: ['68%', '69%'],
          center: ['50%', '35%'],
          hoverAnimation: false,
          color: 'rgba(88,142,197,0.5)',
          // animation:false,    //charts3 no
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [1]
        },
        {
          // 第二環
          type: 'pie',
          zlevel: 2,
          silent: true,
          radius: ['72%', '73%'],
          center: ['50%', '35%'],
          startAngle: 50,
          hoverAnimation: false,
          // animation:false,    //charts3 no
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: this._pie2()
        },
        {
          // 實際有用的圓環，第四環，展示后台數據的圓環
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              },
              borderColor: '#172659',
              borderWidth: 3
            }
          },
          label: {
            normal: {
              position: 'inner',
              show: false
            }
          },
          type: 'pie',
          // clockWise: false ,
          // roseType: 'radius',
          radius: ['50%', '60%'],
          center: ['50%', '35%'],
          labelLine: {
            normal: {
              lineStyle: {
                color: '#34569D'
              }
            }
          },
          data: chartData
        }, {
          // 第三環
          itemStyle: {
            normal: {
              color: 'rgba(62,109,255,0.4)'
            }
          },
          type: 'pie',
          hoverAnimation: false,
          radius: ['45%', '65%'],
          center: ['50%', '35%'],
          label: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 1
          }],
          z: -1
        }
        ]
      })

繪制等分圓環的函數（本段代碼引自echarts gallery）

_pie2 () {
      let dataArr = []
      for (let i = 0; i < 8; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: 'rgba(88,142,197,0.5)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        }
      }
      return dataArr
    }

這個例子告訴我們，萬物可疊👦👫👪

參考

echarts gallery