ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

echarts常用配置

2020-03-17 10:04:15  阅读:255  来源: 互联网

标签:index 常用 color 配置 element rgba offset 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

标签:index,常用,color,配置,element,rgba,offset,echarts
来源: https://blog.csdn.net/weixin_45274678/article/details/104898067

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有