echarts - 特殊需求实现代码汇总之【柱图】篇

其实包括饼图、线图在内,和柱图都一样的感觉,他们的配置项基本也是对应的那几个,所以想实现某些相似的效果,只要找到对应的属性就可以了。

1.柱图渐变色设置

 

还记得上篇线图中的实现是在areaStyle的里边设置normal状态下的color吗?

柱图和他异曲同工,不过柱图不是areaStyle,而是itemStyle

item有单项的意思,我的字面理解是设置每一个单柱的样式。渐变也可以。

itemStyle: {
	normal: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#83bff6'
		},
		{
			offset: 0.5,
			color: '#188df0'
		},
		{
			offset: 1,
			color: '#188df0'
		}])
	},
	emphasis: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#2378f7'
		},
		{
			offset: 0.5,
			color: '#83bff6'
		},
		{
			offset: 1,
			color: '#2378f7'
		}])
	}
}

  

 

 

还有这种彩色渐变的效果,也是一个道理。

option = {
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		nameTextStyle: {
			color: 'red'
		}
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		itemStyle: {
			normal: {
				barBorderRadius: [50, 50, 0, 0],
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(248,65,126,0.90)'
					},
					{
						offset: 1,
						color: '#638FFF'
					}],
					globalCoord: false
				}
			},
			emphasis: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(248,65,126,0.90)'
					},
					{
						offset: 0.5,
						color: 'rgba(113,23,103,0.40)'
					},
					{
						offset: 1,
						color: '#638FFF'
					}],
					globalCoord: false
				}
			}
		},
		data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
		type: 'bar'
	}]
};

 

还有这种不渐变但是多块颜色,也是一个道理。举一反三吧。。

 

 

 

2.柱图根据x轴的数量决定是否展示label文案

 

 如上红圈,初始化定义个变量,默认展示label。如果判断x轴配置里,data的length大于(不满足)设定值的时候,变将此值设置为false,再次渲染即可。

let showLable = true;
label: { normal: { show: showLable, position: 'inside' } },

  

3.柱图鼠标hover时不用shadow和line模式

只是让柱图偏白色,类似官网示例,不过官网示例没有代码展示。

直接把tooltip去掉就行了。。

 就是这么草率。但是这个效果我当初一直调不出来。这还是无意中发现的。得记下来。

 

2018-08-11  19:08:37

posted @ 2018-08-11 19:03  xing.org1^  阅读(972)  评论(0编辑  收藏  举报