【前端统计图】echarts改变颜色属性的demo
2024-08-30 07:32:10
一：柱状图改变颜色
图片.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>
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程
image
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
最新文章
- 【技巧】使用weeman来做一个钓鱼网页
- css异常
- 编写高质量JavaScript代码的基本要点
- 解决eclipse中安装AIX2插件问题
- ECSHOP报错误Deprecated: preg_replace(): The /e modifier is depr
- "_Default"同时存在于两个dll文件中的解决办法
- 三星S5360（GALAXY Y）首次刷机尝试～
- JDBC数据库连接
- jedis使用api
- 读书笔记——thinking in java
- ABP Zero 导航菜单之角色权限
- Gym 100952B&&2015 HIAST Collegiate Programming Contest B. New Job【模拟】
- UOJ#7. 【NOI2014】购票 点分治 斜率优化 凸包 二分
- java web session过期 跳转页面没有跳出frame的问题
- python 使用gevent模块实现手动挡切换多协程。
- [Swift]正则表达式工具类
- [转帖]git命令参考手册
- Error: spawn EACCES
- ceph 文件系统(cephfs) -- 初体验
- 【MOOC EXP】Linux内核分析实验五报告
热门文章
- Log4j 2使用教程 分类： B1_JAVA 2014-07-01 12:26 314人阅读 评论(0) 收藏
- CSS伪元素与伪类的区别
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
- trunc与round
- Spring view controller
- leetcode——Reverse Linked List II 选择链表中部分节点逆序（AC）
- js闭包（函数内部嵌套一个匿名函数：这个匿名函数可将所在函数的局部变量常驻内存）
- Nginx 设置，设置已经解析的域名，在nginx中没有定义相应server时的默认访问
- PHP 分布式集群中session共享问题以及session有效期的设置
- 126邮件POP3，SMTP服务器与端口设置