echarts common configuration

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

Published 13 original articles · won praise 0 · Views 1003

Guess you like

Origin blog.csdn.net/weixin_45274678/article/details/104898067