vue 結合 Echarts 實現半開環形圖

Echarts 實現半開環形圖

1.先看看實現的圖

2.HTML部分

創建id 是 chart 的div標簽。

  <div class="content-item">
    <div id="chart" style="width:300px;height:300px"></div>
  </div>
  

3.封裝的 option

• import { getAnnulusOption } from './option.js'

下面內容是 文件 option.js (可以直接復制)

function deepCopy (obj) {
  let newObj
  // 如果不是數組對象，並且對象存在，直接返回就可以
  if (obj && typeof obj !== 'object') {
    newObj = obj
    return newObj
  }
  var targetObj = obj.constructor === Array ? [] : {}
  for (var keys in obj) {
    if (obj.hasOwnProperty(keys)) {
      if (obj[keys] && typeof obj[keys] === 'object') {
        targetObj[keys] = obj[keys].constructor === Array ? [] : {}
        targetObj[keys] = deepCopy(obj[keys])
      } else {
        targetObj[keys] = obj[keys]
      }
    }
  }
  return targetObj
  // return JSON.parse(JSON.stringify(obj));
}


const annulusOption = {
  title: {
    text: '',
    subtext: '',
    x: 'center',
    y: 'center',
    textStyle: {
      fontSize: 26,
      color: '#5b92fe'
    },
    subtextStyle: {
      fontSize: 12,
      color: '#616161'
    }
  },
  color: [],
  series: [
    {
      type: 'pie',
      radius: ['65%', '85%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        }
      },
      hoverAnimation: false,
      startAngle: -45,
      data: [{ value: 25 }, { value: 0 }, { value: 0 }]
    }
  ]
}


/**
 * 獲取環形圖的data，這個圖只用於半開環形圖， 並且只能有兩個數據輸入
 * @param {Number[2]} data 兩個數據，環形從做到右的數據
 * @param {string[2]} colors  兩個數據的顏色
 * @param {*} text 中心的主標題
 * @param {*} subtext  中心的副標題
 * @param {Number} textFontSize
 * @param {Number} subTextFontSize
 */
function getAnnulusOption (data, colors, text, subtext, textFontSize, subTextFontSize) {
  let resultOption = deepCopy(annulusOption)
  let optionColor = ['rgba(0,0,0,0)']
  optionColor = optionColor.concat(colors)
  resultOption.color = optionColor
  resultOption.title.text = text
  resultOption.title.subtext = subtext
  resultOption.title.textStyle.fontSize = textFontSize
  resultOption.title.subtextStyle.fontSize = subTextFontSize
  let firstData = data[0] || 0
  let secondData = data[1] || 0
  resultOption.series[0].data[1].value = 75 * firstData / (firstData + secondData)
  resultOption.series[0].data[2].value = 75 * secondData / (firstData + secondData)
  return resultOption
}



export { getAnnulusOption }

4.JS部分

<script>

//1.引入上面 創建的 option.js 

import { getAnnulusOption } from './option.js'

//2.引入 echarts 圖表插件

import echarts from 'Echarts'

export default {
    mounted() {
        this.$nextTick(() => {
          this.renderChart('chart',890, 1000)
        })
    },
    methods: {
        /**
         * @param {String} id  獲取HTML div元素的 ID,
         * @param {Number} dividend  數值1 ，（成功個數）
         * @param {Number} divisor   數值2，（總數）
         */
       //id,
       //dividend
       //divisor
        renderChart (id,dividend, divisor) {
          echarts.dispose(document.getElementById(id))
          const data = [dividend, divisor - dividend]
          const colors = ['#4b7efe', '#beddff']
          const percentage = divisor === 0 ? 0 : dividend / divisor * 100
          const text = formatValue(percentage, 1) + '%'
          const subText = ''
          const textFontSize = 20
          const subTextFontSize = 0
          const option = getAnnulusOption(data, colors, text, subText, textFontSize, subTextFontSize)
          const charts = echarts.init(document.getElementById(id))
          charts.setOption(option)
        },
        
        /**
         * @param {number or string} value 數值
         * @param {Number} digits 保留小數位數
         * @param {bool} returnStr 返回值是字符串（如果保留位數那么返回是一個string）
         */
        formatValue (value, digits, returnStr = false) {
          if (digits < 0) {
            console.log('小數點后位數不能為負數')
            value = 0
          }
          if (!value) {
            value = 0
          }
          if (returnStr) {
            return parseFloat(value).toFixed(digits)
          }
          return parseFloat(parseFloat(value).toFixed(digits))
        }
        
        }

}

</script>