一般情況下帶效果的散點(diǎn)會(huì)用在有排名的數(shù)據(jù)氓拼，所以需要從后臺(tái)拿到需要的排名數(shù)據(jù)或者將數(shù)據(jù)處理成排序后的數(shù)據(jù)
series: [
{
name:"銷售額",
type: "scatter",//散點(diǎn)圖
coordinateSystem: "bmap",//坐標(biāo)系必須為bmap
data: testPoint, //測(cè)試的城市數(shù)據(jù)
tooltip: {//鼠標(biāo)移上去的提示
formatter: function(params, ticket, callback) {
}
},
//定制點(diǎn)的大小 根據(jù)銷售額的數(shù)據(jù)定制點(diǎn)的大小
symbolSize: function(val) {
//val是 value: [118.78, 32.04, 300]
return val[2] / 10;
},
label: {
formatter:(data)=>{//展示名稱和銷售額
return data.name+"-"+data.data.value[2]
},
position: "right"
},
//點(diǎn)的顏色
itemStyle: {
color: "#ddb926"
},
//鼠標(biāo)移上去顯示文本
emphasis: {
label: {
show: true
}
}
},
{
//有效果的散點(diǎn)圖
name:"Top10",
type:"effectScatter",//有效果散點(diǎn)圖
coordinateSystem: "bmap",//坐標(biāo)系必須為bmap
data:topdata,
//定制點(diǎn)的大小 根據(jù)銷售額的數(shù)據(jù)定制點(diǎn)的大小
symbolSize: function(val) {
//val是 value: [118.78, 32.04, 300]
return val[2] / 10;
},
}
]
soogif.gif
繼續(xù)定制
{
//有效果的散點(diǎn)圖
name:"Top10",
type:"effectScatter",//有效果散點(diǎn)圖
coordinateSystem: "bmap",//坐標(biāo)系必須為bmap
data:topdata,
//定制點(diǎn)的大小 根據(jù)銷售額的數(shù)據(jù)定制點(diǎn)的大小
symbolSize: function(val) {
//val是 value: [118.78, 32.04, 300]
return val[2] / 10;
},
tooltip:{
},
label: {
formatter:(data)=>{//展示名稱和銷售額
return data.name+"-"+data.data.value[2]
},
position: "right",
show:true
},
hoverAnimation:true,//鼠標(biāo)移上去動(dòng)畫
rippleEffect:{
brushType:'stroke',//設(shè)置波紋樣式
// color:"red"
},
itemStyle:{//設(shè)置點(diǎn)的樣式
color:"purple",
shadowBlur:10,
shadowColor:"#333"
}
}
接著傳入真實(shí)數(shù)據(jù)即可
