（小小黑科技）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，這樣就大功告成了！

吐槽：晚上改完的圖表，隔天早上領導就說仍是換回環形圖展現吧(・｀ω´・)