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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值