本文为个人近期学习总结，若有错误之处，欢迎指出！
Echarts之饼图绘制
前言
在前文页面布局、DataV 的使用、Echarts 的基础使用的基础上，开始绘制大屏中的饼图。
1.需求
饼图展示公司人员学历占比情况。
2.实现效果
3.大概思路
为简化代码量，将基础饼图封装为组件：
（1）子组件绘制基础饼图，只有一个系列（type值为’pie’）；
（2）父组件向子组件传递数据，数据格式为：
[
{ value: 456, name: '大专' },
{ value: 735, name: '本科' },
{ value: 580, name: '硕士' },
{ value: 58, name: '博士' }
]
4.代码实现
子组件写法
HTML
<template>
<div class="block" style="height:100%;">
<dv-border-box-13>
<div class="title" style="height:25%;">
学历占比
</div>
<div ref="circleArea" :style="{width: '100%',height: '75%'}" />
</dv-border-box-13>
</div>
</template>
JavaScript
<script>
export default {
name: 'circle-pie',
props: {//子组件接收的数据
data: {
type: Array,
default: () => []
}
},
// eslint-disable-next-line max-lines-per-function
data () {
return {
option: {
color: [// 扇形的颜色
'#065aab',
'rgb(145,204,117)',
'#0682ab',
'rgb(238,102,102)'
],
tooltip: {
trigger: 'item', // 类目触发，axis是坐标轴触发
formatter: '{a}<br />{b}：{c}<br />占比：{d}%',
// a:学历情况:series里的name
// b:本科：series里的data的name
// c:735：series里的data的value
// d:echarts自己将值换算的百分数
backgroundColor: 'rgba(83,164,230,.6)',
borderColor: 'rgba(83,164,230,1)', // 边框颜色
textStyle: {// 设置文字样式
color: 'rgba(255,255,255,1)',
fontSize: 10
}
},
legend: {// 图例
orient: 'vertical',
x: 'right',
y: 'center',
left: '80%',// 距离左边为80%
itemWidth: 10,// 小图标的宽度
itemHeight: 10,
textStyle: { // 图例文字的样式
color: 'rgba(255, 255, 255, 0.5)'
}
},
series: [
{
name: '学历情况',
type: 'pie',
center: ['50%', '45%'],// 设置饼形图在容器中的位置
radius: ['0%', '65%'],// 内圆半径和外圆半径
avoidLabelOverlap: false,
label: {// 显示标签文字
show: true,
color: 'rgba(255,255,255,.7)',
formatter: '{d}%'
// formatter: ' {b}：{c}\n{d}%'
},
labelLine: {// 显示连接线(图形和文字之间的线)
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.7)'
},
smooth: 0.2,
// 以下两个指线的长度
length: 7, // 连接扇形图线长
length2: 12 // 连接文字线长
},
// data: [
// { value: 1048, name: '博士' },
// { value: 735, name: '硕士' },
// { value: 580, name: '本科' },
// { value: 484, name: '大专' }
// ]
data: this.data
}
]
}
}
},
mounted () {
this.drawCircle()
},
methods: {
drawCircle () {
let myCircle = this.$echarts.init(this.$refs.circleArea)
myCircle.setOption(this.option, true)
window.addEventListener('resize', () => {
myCircle.resize()
})
}
}
}
</script>
CSS与前文“柱图绘制”相同，故这里省略。
父组件写法
HTML
<circle-chart :data="circleData" />
Javascript
引入组件和注册组件的部分代码与前文“柱图绘制”相似，这里写关键代码：
data(){
return {
// 圆环饼图传递给子组件的数据
circleData: [
{ value: 456, name: '大专' },
{ value: 735, name: '本科' },
{ value: 580, name: '硕士' },
{ value: 58, name: '博士' }
]
}
}
5.附加
（1）圆环饼图的绘制
如：要实现空心圆环饼图
要点：修改series中系列的radius属性
// 内圆半径和外圆半径
radius: ['30%', '65%']
（2）南丁格尔玫瑰饼图
需求：将上述圆环饼图改为玫瑰饼图。
要点：修改series中系列的roseType属性
A.半径展示数据的大小
// 饼形图的显示模式:半径模式，半径展示数据的大小
roseType: 'radius'
B.面积展示数据的大小
// 饼形图的显示模式:面积模式，面积展示数据的大小
roseType: 'area'
