1. Gradient
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(30,167,248,0.3)'
}, {
offset: .5,
color: 'rgba(30,167,248,0.5)'
},{
offset: 1,
color: 'rgba(30,167,248,0.7)'
}]),
{
type: 'linear',
x: 0, x2: 0, y: 0, y2: 1,
colorStops: [{
offset: 0,
color: '#39a7e4'
}, {
offset: 1,
color: '#3077cf'
}]
},
2. Tips
tooltip : {
formatter(params){
let str = '';
for (let index = 0; index < 2; index++) {
const element = params[index];
//element.marker色标
str += element.marker+ element.seriesName+":" + element.value +"KWh</br>";
}
return str;
}
},
3. Add the coordinates of points on the map
geo:{
//地理坐标系组件
},
series:[
{...map},
{
type: 'effectScatter',//带有涟漪特效动画的散点(气泡)图
coordinateSystem: 'geo',//使用的坐标系
}
]
4. different maps for different blocks of color
geo:{
regions:[
{//在地图中对特定的区域配置样式
name: '广东',
itemStyle: {
areaColor: 'red',
color: 'red'
}
}
]
}
echarts-gallery
personalized map case
https://gallery.echartsjs.com/explore.html#sort=rank TIMEFRAME = All author = All