参考这个 ,把颜色改成渐变就行
var data = [
// {
// name: '受理业务总量',
// value: 100,
// num: 1234,
// },
// {
// name: '办结业务总量',
// value: 50,
// num: 5678,
// },
// {
// name: '在办业务总量',
// value: 49,
// num: 9012,
// },
{
name: '超期业务总量',
value: 1,
num: 50,
},
];
var titleArr = [],
seriesArr = [];
colors = [
['#5B8FF9', '#E9EEF4'],
['#5AD8A6', '#E9EEF4'],
['#FFFF80', '#E9EEF4'],
['#E86452', '#E9EEF4'],
];
data.forEach(function (item, index) {
titleArr.push({
text: item.num + '\n' +item.name,
left: index * 25 + 10 + '%',
top: '65%',
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: '16',
color: '#333',
textAlign: 'center',
},
});
seriesArr.push({
name: item.name,
type: 'pie',
clockWise: false,
radius: [60, 70],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: [index * 25 + 10 + '%', '50%'],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
return params.value + '%';
},
position: 'center',
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold',
color: '#333',
},
},
},
},
{
value: 100 - item.value,
name: 'invisible',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
}
}
]
});
});
option = {
backgroundColor: '#fff',
title: titleArr,
series: seriesArr,
};
参考一下
option={
tooltip: {//提示框,可以在全局也可以在
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color:'#000', //提示框的背景色
textStyle:{ //提示的字体样式
color:"black",
}
},
legend: { //图例
orient: 'vertical', //图例的布局,竖直 horizontal为水平
x: 'right',//图例显示在右边
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
textStyle:{ //图例文字的样式
color:'#333', //文字颜色
fontSize:12 //文字大小
}
},
series: [
{
name:'访问来源',
type:'pie', //环形图的type和饼图相同
radius: ['50%', '70%'],//饼图的半径,第一个为内半径,第二个为外半径
avoidLabelOverlap: false,
color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1'],
label: {
normal: { //正常的样式
show: true,
position: 'left'
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
},
data:[
{value:335, name:'直接访问'},
// {value:310, name:'邮件营销'},
// {value:234, name:'联盟广告'},
// {value:135, name:'视频广告'},
// {value:1548, name:'搜索引擎'}
]
}
]
}