如图 在折线的末尾加一个小icon
配置项如下
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
show:false
},
legend: {
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['35%', '50%'],
center:['45%','30%'],
itemStyle:{
normal:{
borderColor: '#fff',
borderWidth: 5,
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
labelLine: { //折线长度
show: true,
length: 20,
length2: 20,
lineStyle: {
width: 1,
type: 'solid',
}
}
}
},
label: {
normal: {
formatter: '{b|{b}} {per|{d}%}',
padding: [0, 0],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 22,
borderRadius: [4, 4, 0, 0]
},
hr: {
borderColor: 'yellow',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 14,
lineHeight: 33,
color: '#999'
},
per: {
color: '#3c3c3c',
fontSize: 14,
}
}
}
},
data:[
{
value:40,
name:'利空',
itemStyle : {
normal : {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0, color: '#5f95fb' // 0% 处的颜色
}, {
offset: 1, color: '#7ca9fe' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
{
value:30,
name:'中性',
itemStyle : {
normal : {
color: {
type: 'radial',
x: 0.1,
y: 0.5,
r: 2,
colorStops: [{
offset: 0, color: '#e48900' // 0% 处的颜色
}, {
offset: 1, color: '#ffd19e' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
{
value:30,
name:'利好',
itemStyle : {
normal : {
color: {
type: 'radial',
x: 1,
y: 0.5,
r: 3,
colorStops: [{
offset: 0, color: '#ff4332' // 0% 处的颜色
}, {
offset: 1, color: '#ff9a8e' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
}
]
}
]
};