echarts改变颜色属性的demo
2024-10-01 23:33:35
一：柱状图改变颜色
图片.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>
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
最新文章
- Android开发学习之路-下拉刷新怎么做？
- String 与StringBuilder有什么区别
- js 文本框只能输入数字
- Open CV缩放图像
- CF# Educational Codeforces Round 3 B. The Best Gift
- 敏捷软件开发：原则、模式与实践——第8章 SRP：单一职责原则
- 由ccf第一题引出的问题
- MySQLdb模块的安装
- 从零开始学JAVA(06)-WebService_Jersey_Restful
- highcharts 饼图显示数据比例如何保留二位小数
- 嘟！数字三角形 W WW WWW集合！
- java中加载xml文件方法
- COJ 0979 WZJ的数据结构（负二十一）
- 第一个Polymer应用 - (0)准备工作
- 为什么用Flow
- [转]AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式
- pygame 笔记-2 模仿超级玛丽的弹跳
- SharePoint Framework 配置你的SharePoint客户端web部件开发环境
- Magento邮件发送完美设置
- 多线程实现ping扫描
热门文章
- color-在framwork中添加属性变量
- git仓库搭建
- Android开发之搜芽项目的图片载入问题(使用Volley进行网络图片载入)
- Codeforces Round #100 E. New Year Garland (第二类斯特林数+dp)
- 应用Python来计算排列中的逆序数个数
- vim编辑器经常使用命令
- vc6.0 点编译时提示Cannot complile the file &#39;D:\souce-code\vc-workspace\对话框\MainFrm.h&#39;; no compile tool is
- Android javaMail使用imap协议接收邮件
- HDU 1874 畅通工程续 SPFA || dijkstra||floyd
- google校招在线測试题---2048