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

如何用echarts实现半圆图表？在echarts官方实例倒腾一波，发现官方并没有提供半圆图表的写法，那怎么办呢？官方没提供，但需求还是要实现的。半圆图表其实就是饼图的一半，那么简单的思路如下：设置一个sum值，用来累计所有要展示的数据的总和，再添加到数据里面，那么整个饼图就可以分成均匀的两半，然后将sum值的数据在饼图里面隐藏，就只剩下半圆。下面上代码：安装echartsnpm install echarts –save全局引入、配置// main.js 文件import echarts from ’echarts’Vue.prototype.$echarts = echarts 全局引入echarts，文件会比较大，我们实现半圆其实只需要饼图，那么建议还是按需引入// MyChart.vueimport 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)’}}})// 下面给图例加上配置 都是官方的apipieChart.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改造：// 原先的formatterformatter: ‘{b}:{c}({d}%)’// 改造formatterformatter: 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，这样就大功告成了！吐槽：晚上改完的图表，隔天早上领导就说还是换回环形图展示吧(・｀´・)