主要在于需要计算径向渐变的中心点坐标
代码:可复制在echarts中运行
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
label: {
show: true,
position: 'inside',
color: '#fff',
textBorderColor: '#000',
textBorderWidth: 2
},
data: [
{
value: 1048,
name: 'Search Engine',
itemStyle: {
color: {
type: 'radial',
x: myChart.getWidth() / 2, //计算径向渐变的中心点
y: myChart.getHeight() / 2, // 计算径向渐变的中心点
r: 150,
global: true, //设置绝对像素位置
colorStops: [
{
offset: 0,
color: '#eee' // 0% 处的颜色
},
{
offset: 1,
color: '#00a09b' // 100% 处的颜色
}
]
}
}
},
{
value: 484,
name: 'Union Ads',
itemStyle: {
barBorderRadius: [20, 20, 0, 0],
color: {
type: 'radial',
x: myChart.getWidth() / 2, //计算径向渐变的中心点
y: myChart.getHeight() / 2, // 计算径向渐变的中心点
r: 150,
global: true, //设置绝对像素位置
colorStops: [
{
offset: 0,
color: '#eee' // 0% 处的颜色
},
{
offset: 1,
color: '#91cc75' // 100% 处的颜色
}
]
}
}
},
{
value: 300,
name: 'Video Ads',
itemStyle: {
barBorderRadius: [20, 20, 0, 0],
color: {
type: 'radial',
x: myChart.getWidth() / 2, //计算径向渐变的中心点
y: myChart.getHeight() / 2, // 计算径向渐变的中心点
r: 150,
global: true, //设置绝对像素位置
colorStops: [
{
offset: 0,
color: '#eee' // 0% 处的颜色
},
{
offset: 1,
color: '#fac858' // 100% 处的颜色
}
]
}
}
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
效果图: