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>