当前位置:首页 > 前端技术 > echarts改变颜色

echarts改变颜色

2022年08月04日 21:36:33前端技术2

#一:柱状图改变颜色
图片.png

代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--   柱状统计图 -->
		<div class="row">
			<div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
		</div>
	</body>
	<script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom,初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		myChart.setOption({
			title: {
				text: '平均耗时(分钟)',

			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				/*  data: [ '2012年']*/
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']
			},
			series: [{
					name: '2012年',
					type: 'bar',
					itemStyle: {
						normal: {
							color: '#a8bcd4'
						}
					},
					data: [10, 20, 31, 14, 11, 67]
				}
			]
		});
	</script>

</html>

#二:横向柱状图渐变

图片.png

代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--   柱状统计图 -->
		<div class="row">
			<div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
		</div>
	</body>
	<script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom,初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		myChart.setOption({
			title: {
				text: '平均耗时(分钟)',

			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				/*  data: [ '2012年']*/
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']
			},
			series: [{
					name: '2012年',
					type: 'bar',
					 itemStyle: {
                normal: {
                   
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fff'
                    }, {
                        offset: 1,
                        color: '#3fa7dc'
                    }]),
                    
                }
            },
					data: [10, 20, 31, 14, 11, 67]
				}
			]
		});
	</script>

</html>

原文作者:祈澈姑娘
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

作者:编程微刊
来源链接:https://blog.csdn.net/qq_38822390/article/details/90677411

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17321.html

标签: 颜色设置
分享给朋友:

“echarts改变颜色” 的相关文章

qt textbrowser 设置字体颜色

qtextbrowser支持html语法来设置字体。因此使用html语法来设置字体颜色。 但是使用这个方式来设置字体颜色会有Bug。在设置某一部分字体颜色后,有概率导致后续字体颜色,都变成设置的颜色。下面是一种解决方案。 通过宏来控制字体颜色...

详解MathType中如何更改公式颜色

详解MathType中如何更改公式颜色

在MathType数学公式编辑器中可以通过更改公式颜色,起到美化、标注公式的效果。本教程将详解MathType中如何更改公式颜色。 在MathType数学公式编辑器中可以通过更改公式颜色,起到美化、标注公式的效果。本教程将详解MathType中如何更改公式颜色。...

Html设置超链接文字颜色

为了突出超链接,超链接文字通常采用与其他文字不同的颜色,超链接文字的下端还会加一条横线。网页的超链接文字有默认颜色,在默认情况下,浏览器以蓝色作为超链接文字的颜色,访问过的文字则颜色变成暗红色。在<body>标记中也可以自定义这些颜色。 基本...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

sublimeText 3 使用

颜色设置: Preferences - Color Scheme 里面有众多颜色模板,可以自行选择   输入中文: http://www.cnblogs.com/afei-qwerty/p/6710235.html...

UI设计规范

UI设计规范

一、界面布局 (版心大小,eg:1200px) 二、颜色 1、背景颜色 2、主颜色 3、辅助颜色   三、文字规范 1、字体颜色 2、字体大小 3、字体类型 四、按钮规范 五、图标规范 六、...

HTML中设置td的字体颜色

td中不行,但body中可以 <body text="green"> td中只可以设置背景颜色 <td bgcolor="gray"> 也可以: <td><font size="3" color="red">This is s...

10月15号

今天学习就简单的看了一下HTML颜色 HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。 每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。 作者: 哦心有...

ECharts热力图指定颜色

ECharts热力图指定颜色

ECharts是便捷使用的图标框架,绘制热力图和方便 关键数值 x轴 y轴 数据:(x, y, value) 渐变色 移动效果要将前一次的数据清空 热力图官方链接 https://echarts.apache.org/...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。