echarts修改样式的常见问题

目录

一、修改x轴或y轴线的颜色。

 二、x轴或y轴分割线是否显示以及设置颜色。

三、 修改折线的颜色、拐点的颜色

 四、给多条折线设置颜色

 五、修改提示的文字颜色

六、设置柱状图的柱子的宽度。

七、设置柱状图的柱子为渐变色

---

一、修改x轴或y轴线的颜色。

以x轴为例

                xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisLine:{
						lineStyle:{
							color:'#78aaed'
						}
					}
				},

图例：

 二、x轴或y轴分割线是否显示以及设置颜色。

				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					splitLine: {           //分割线
						show: true,     //控制分割线是否显示
						lineStyle:{       //分割线的样式
							color: ['yellow'],
						}
					}
				},

图例：

三、 修改折线的颜色、拐点的颜色

				series: [
					{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line',
						itemStyle : {
							normal : {
								color:'orange',//折线的颜色
								borderColor:'orange',  //拐点边框颜色
							}
						},
					}
				]

图例：

 四、给多条折线设置颜色

				series: [
					{
						name: 'Email',
						type: 'line',
						stack: 'Total',
						data: [120, 132, 101, 134, 90, 230, 210],
						itemStyle : {
							normal : {
								color:'#a51587',//提示的颜色
								lineStyle:{
									color:'#9cea94',//折线的颜色
								}
							}
						},
					},
					{
						name: 'Union Ads',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310],
						itemStyle : {
							normal : {
								color:'#ac2716',
								lineStyle:{
									color:'#b1eae4',
								}
							}
						},
					}

				]

 图例：

 五、修改提示的文字颜色

				legend: {
					data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
					textStyle:{
						color: '#07caec'//字体颜色
					},
				}

图例：

六、设置柱状图的柱子的宽度。

				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth : '50%',//柱图宽度
					}
				]

图例：

七、设置柱状图的柱子为渐变色

				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth : '50%',//柱图宽度
						itemStyle: {
							normal: {//写上normal属性，否则不起作用；
								color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,//从上往下渐变
										[
											{offset: 0, color: '#65dc7e'},
											{offset: 0.5, color: '#328eaa'},
											{offset: 1, color: '#1252a2'}
										]
								)
							}
						},
					}
				]

图例：