其實包括餅圖、線圖在內，和柱圖都一樣的感覺，他們的配置項基本也是對應的那幾個，所以想實現某些相似的效果，只要找到對應的屬性就可以了。

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

echarts - 特殊需求實現代碼匯總之【柱圖】篇