Echarts关于饼图的运用
- 环形进度图
如图就是一个环形的进度条这里的颜色我用了一个渐变的色调。
this.circleOption = {
title: {
text: "", // 这里的text值指的是我们的环形图主标题就是我们这里的‘交付率’
left: "center",
top: "32%",
textStyle: {
color: "#304D5D",
fontSize: 1.4 * this.basicDataService.deviceRatio.ratio
},
subtext: "", // 这里的subtext指的是我们的副标题,这里就是我们的‘100%’的数值
subtextStyle: {
color: "#6adeb8",
fontSize: 2.6 * this.basicDataService.deviceRatio.ratio // 这里的字体我用了一个基础的比例值来进行赋值
}
},
series: {
name: '',
type: 'pie',
radius: ['90%', '95%'], // 这里的半径是来规定我们环形图的大小的,半径越大环形图越大。而这两个值分别决定我们内圆半径和外圆半径的
avoidLabelOverlap: false, // 这个值是用来进行我们环形图tooltip显示可能会覆盖一些数值显示,因为这里没有设置tooltip所以不需要管
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: []
}
}
// 这里的函数我是用来给eCharts配置进行动态赋值
// 这里的赋值我主要是用来赋值数据和名称
renderCharts(data: number, name: string) {
this.circleOption.title.text = name
this.circleOption.title.subtext = data + '%'
this.circleOption.title.subtextStyle.color = '#6adeb8'
let process = data > 100 ? 100: (data < 0 ? 0 : data) // 注意我们的环形图正常来说比列达到100%就是已经满值了,所以超过100的我们就按100来进行显示,同理低于0的我们就按0来进行显示(注意,这里的data一定是要数据类型)
this.circleOption.series.data = [
{
value: process, // 这里的value指的就是我们的数值
name: '',
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#66d4d6' // 0% 处的颜色
}, {
offset: 0.4, color: '#66d4d6' // 50% 处的颜色
}, {
offset: 1, color: '#4fa3ee' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}, // 这里我是采用了一个渐变的颜色在不同位置来规定它的颜色
shadowBlur: 3, // 这里是设置阴影
shadowColor: '#4fa3ee',
}
},
{
value: 100 - process, // 这里的值就是我们未到达100的数据
itemStyle: {
color: '#fff',
shadowBlur: 8,
shadowColor: '#66d4d6',
}// 我们可以给未达到100的环形图距离设置颜色这里我就设置为白色了
}
]
this.eCharts.init(this.cycle_charts_one.nativeElement).setOption(this.circleOption) // 这里是采用Angular进行的一种eCharts的渲染
}
2.环形组成比例图
如图就是一个我们环形组件的比例图,可以很好显示各个数据的占比
this.circleOption = {
color: [], // 这里的颜色我是用动态赋值的,我们也可以已开始定义好
tooltip: {
trigger: 'item', // 饼图的提示一般是设置为item,柱状图,折线图设置为axis
formatter: `{b}({d}${
this.unit})`, // b是我们的数值name,d是我们的比列值,unit是我传入的单位
confine: true
},
title: {
text: "", // 我们的主标题
left: "center",
top: "32%",
textStyle: {
color: "#304D5D",
fontSize: 1.4 * this.basicDataService.deviceRatio.ratio
},
subtext: '', // 副标题
subtextStyle: {
color: "#101010",
fontSize: 2.1 * this.basicDataService.deviceRatio.ratio,
fontWeight: "bolder",
rich: {
a: {
fontSize: 1.6 * this.basicDataService.deviceRatio.ratio
}
} // 这里我们可以自定义一些其他内容的单独的样式,这里我就是对于单位进行单独的样式设置
},
itemGap: 5,
},
series: [{
name: '',
type: 'pie',
silent: false,
radius: ['80%', '90%'],
avoidLabelOverlap: false,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data: []
}]
}
// 这里是动态添加数据并渲染
renderCharts() {
if(this.subtextUnit) {
this.circleOption.title.subtext = this.currentSubtext + `{a|${
this.subtextUnit}}` // 注意这里我们因为一开始是以定义a来设置样式的,所以这里的内容也需要加上‘a|’来进行单独内容的样式设置
}else {
this.circleOption.title.subtext = this.currentSubtext
}
this.circleOption.title.