（小小黑科技）vue+echarts实现半圆图表

如何用echarts实现半圆图表？在echarts官方实例倒腾一波，发现官方并无提供半圆图表的写法，那怎么办呢？官方没提供，但需求仍是要实现的。

半圆图表其实就是饼图的一半，那么简单的思路以下：设置一个sum值，用来累计全部要展现的数据的总和，再添加到数据里面，那么整个饼图就能够分红均匀的两半，而后将sum值的数据在饼图里面隐藏，就只剩下半圆。下面上代码：

安装echarts

npm install echarts --save

全局引入、配置

// main.js 文件
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

全局引入echarts，文件会比较大，咱们实现半圆其实只须要饼图，那么建议仍是按需引入

// MyChart.vue

import echarts from 'echarts'
// 引入饼图
require('echarts/lib/chart/pie')
// 引入提示框等组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

建立容器

// MyChart.vue    
<div id="myChart" style="width: 400px;height: 400px;"></div>

初始化容器

let pieChart = echarts.init(document.getElementById('myChart'))

// 初始化数据
let data = [{name: '游泳健身', value: 1024}, {name: '学车考驾照', value: 2048}]
let sum = 0

// 放置须要显示的图例(if you need)
let legendData = []

// 循环数据 累计sum值
data.forEach(item => {
    sum += item.value * 1 // *1保证sum值为数值
    legendData.push(item.name)
})

// 给数据加上总数sum 经过颜色及透明度设置不显示
data.push({name: '总数', value: sum, itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}})

// 下面给图例加上配置 都是官方的api
pieChart.setOption({
    tooltip: {
        trigger: 'item',
        // formatter: '{a}<br/>{b}:{c}({d}%)'
        formatter: '{b}:{c}({d}%)'
    },
    legend: {
        orient: 'horizontal', // vertical 设置图例展现方向
        data: legendData
    },
    series: [
        {
            name: '随意啦', // 上面formatter的a，不显示a可不设置
            type: 'pie',
            startAngle: 180, // 重点！这里设置饼图从180°初渲染，恰好从上下将饼图平分红两部分 
            radius: ['50%', '60%'],
            center: ['50%', '60%'],
            data: data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})

配置完毕，来对比一下：

配置以前（环形）：

配置以后：

哈哈，半圆就已经出来了，可是不是已经完美了呢？咱们把鼠标覆盖上其中一个数据试试：

吃惊！果真有问题，这里由于咱们给数据加上了一条{name: '总数', value: sum}这样总的数据，因此图表统计的时候，其它数据占比就是原来比例的50%！那要怎么处理呢？formatter了解一下。

将原来的formatter改造：

// 原先的formatter
formatter: '{b}:{c}({d}%)'

// 改造formatter
formatter: function (param) {
    let str = ''
    let c = (param['value'] / sum) * 100 // 算出百分比
    c = c.toFixed(2)
    str = str + c + '%'
    return str
}

看下效果图：

nice！改形成功。但这里还有一个小小的问题，那就是把鼠标覆盖上被隐藏那部分圆形的时候，仍是会有提示显示：

这里的一个处理就是，当咱们在添加最后这一条总数据的时候，把它的tooltip设置为空就好了

data.push({name: '总数', value: sum, tooltip: {formatter: () => ''}, itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}})

最后，该渲染方法应该放在vue的mounted生命周期里，当dom渲染后再初始化容器

mounted () {
    this.drawPie()
},
methods: {
    drawPie () {
        ...
    }
}

OK，这样就大功告成了！

吐槽：晚上改完的图表，隔天早上领导就说仍是换回环形图展现吧(・｀ω´・)