Echarts 实现半圆饼图 ,渐变颜色
在Echarts的实例库当中并没有半圆的饼图,但是我们又想实现一个半圆的饼图,并且想要一个渐变颜色的效果,那该怎么做呢。效果如下:
首先我们可以在Echarts的饼图实例中选取一个效果如下图的饼图
接着,我们修改option
中的配置项属性。
- 上面饼图的
option
中的data
项为5项,我们只需要将其删减为3项,并且将其value
值按照2:1:1划分。 - 设置饼图的角度
startAngle
属性。
startAngle: 0, // 角度根据value值的分配情况进行修改
- 将设置好
data
值中,饼图最大的那一部分的itemStyle
里面的normal
中的color
设置为transparent
//透明色,代码如下:
itemStyle: {
normal: {
color: "transparent" // 透明色
}
},
- 设置
data
值中任意一项数据的颜色为渐变色,代码如下,颜色可根据自己的需求更改
itemStyle: {
normal: { // 渐变色操作
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCCCC' }, // 初始颜色
{ offset: 1, color: '#FF99CC' }]) // 结束颜色
}
},
设置好后即可完成饼图的半圆效果。
po一下整个代码:
option = {
series: [
{
startAngle: 0, // 饼图的角度
hoverAnimation: false, // 取消饼图放大效果
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 100,
itemStyle: {
normal: {
color: "transparent" // 透明色
}
}, name: ''
},
{
value: 60, name: '',
itemStyle: {
normal: { // 渐变色操作
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCCCC' }, // 起始颜色
{ offset: 1, color: '#FF99CC' }]) // 结束颜色
}
},
},
{
value: 40, name: '',
itemStyle: {
// 原本的颜色
normal: { color: "#CCCCFF" },
// 鼠标移动上去覆盖高亮的颜色
emphasis: { color: '#CCCCFF' }
},
},
]
}
]
};
我的饼图去除了鼠标移上去的放大效果和高亮效果,有需要的也可以自行进行更改和设置。