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>

巴特西

vue 结合 Echarts 实现半开环形图

Echarts 实现半开环形图

1.先看看实现的图

2.HTML部分

3.封装的 option

4.JS部分

最新文章

热门文章