利用echarts实现top效果可视化,将echart自身的scatter和react合并起来实现
option = {
series: [{
name: 'scatter',
type: 'scatter',
smooth: true,
showAllSymbol: true,
symbol: 'circle',
symbolSize:12,
symbolOffset:[0,0],
data: lineData,
hoverAnimation:false,
label:{
normal:{
show:true,
position:'top',
offset :[-30,0],
formatter:function(p){
let b = p.data.name,c = p.data.value;
return '{p1|' + b + '}\n{p2|事件数:' + c + '}'
},
align: 'left',
rotate:10,
rich:{
p1:{
color:'#525455',
align: 'left',
fontSize:16,
height:20
},
p2:{
color:'#0e4dec',
align: 'left',
fontSize:16,
height:20
}
}
}
},
itemStyle:{
normal:{
color: '#ffffff',
borderColor:"#f93d3c",
borderWidth:3
}
},
zlevel:99
}, {
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#f93d3c'
}
},
symbolRepeat: true,
symbolSize: [2, 6],
symbolMargin: 2,
zlevel:9,
data: barData,
clipOverflow:false,
}]
};