共计 2052 个字符，预计需要花费 6 分钟才能阅读完成。
如何用 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，这样就大功告成了！
吐槽：晚上改完的图表，隔天早上领导就说还是换回环形图展示吧(・`ω´・)
