echarts常用配置

1.渐变色

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.提示

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.在地图上添加坐标点

geo:{
//地理坐标系组件
},
series:[
	{...map},
	{
		type: 'effectScatter',//带有涟漪特效动画的散点(气泡)图
        coordinateSystem: 'geo',//使用的坐标系
	}
]

4.地图不同区块颜色不同

geo:{
	regions:[
		{//在地图中对特定的区域配置样式
		   name: '广东',
		    itemStyle: {
		        areaColor: 'red',
		        color: 'red'
		    }
		}
	]
}

echarts-gallery
个性地图案例
https://gallery.echartsjs.com/explore.html#sort=ranktimeframe=allauthor=all

上一篇:纯html加css的键盘UI效果图


下一篇:CSS自定义滚动条样式 -webkit-scrollbar