【前端统计图】echarts实现属性修改
原图：
原代码：
<!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>
1：标题颜色属性修改
将图标主标题颜色修改成红色，只需要在 title:里面添加 textStyle: {color: 'red' }即可
title: {
text: '平均耗时（分钟）',
textStyle: {
color: 'red'
},
},
2：x和y轴坐标颜色修改
x轴坐标：
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:'#e33b38',
width:1,//这里是为了突出显示加上的
}
}
},
y轴坐标：
yAxis: {
type: 'category',
data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号'],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['#e33b38']
}
},
nameTextStyle: {
color: ['#e33b38']
},
axisLine:{
lineStyle:{
color:'#e33b38',
width:1,//这里是为了突出显示加上的
}
}
},
3：柱状图实现不同颜色
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#569afb','#ff6347','#561afb','#ff2347','#269afb','#fq6347'
];
return colorList[params.dataIndex]
},
label: {
show: false
}
}
},
4：柱状图粗细属性控制
barWidth : 20,
5：echarts处理图形与title之间的距离
参考链接
http://echarts.baidu.com/option.html#title
注：
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。
公众号回复“1”，拉你进程序员技术讨论群.
【前端统计图】echarts实现属性修改的更多相关文章
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图
[源码下载] 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获 ...
- ECSHOP筛选属性修改title标题
发现百度蜘蛛爬行网站时会爬行属性链接,而且会进行收录.可是ecshop系统制作的网站,在分类页点击属性筛选出产品时,网页title不会改变.这样就会造成大量title一样的页面,不利于优化.为此,在网 ...
- java并发编程（十四）----(JUC原子类)对象的属性修改类型介绍
今天我们介绍原子类的最后一个类型--对象的属性修改类型: AtomicIntegerFieldUpdater,AtomicLongFieldUpdater,AtomicReferenceFieldUp ...
- Linux用户和组管理命令-用户属性修改usermod
用户属性修改 usermod 命令可以修改用户属性 格式: usermod [OPTION] login 常见选项: -u UID: 新UID -g GID: 新主组 -G GROUP1[,GROUP ...
- 【前端统计图】echarts改变颜色属性的demo
一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 【前端统计图】echarts实现简单柱状图
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- 【前端统计图】echarts多条折线图和横柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
随机推荐
- AJAX 删除数据
var json = { "id":"12", "name":"admin"}$.ajax({ type: " ...
- 【Henu ACM Round#15 E】 A and B and Lecture Rooms
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最近公共祖先. (树上倍增 一开始统计出每个子树的节点个数_size[i] 如果x和y相同. 那么直接输出n. 否则求出x和y的最近 ...
- Lua刚開始学习的人（一）--Lua 简单教学
近期因为工作原因.临时木有<Oracle起步学习>续集.领导知道学习下Lua脚本语言.看了一周了.趁热打铁,留下点实用的东西吧. 本系列会主要针对宿主语言为 Delphi,原理都是一样的, ...
- iOS8 对开发人员来说意味着什么？
今天凌晨.Apple WWDC2014 iOS8 正式推出. 或许,对于广大iOS用户来说,iOS8的创新并非特别多. 但对于开发人员来说,影响却将会是无比巨大的! 正如Apple官网上的广告:Hug ...
- Anders Hejlsberg 和 Erich Gamma
Anders Hejlsberg 和 Erich Gamma 大概半年前,我写了一篇名叫<有点软文>的文章,深情并茂地告诉大家,我司其实隐藏着很多牛人巨擘.有些人是身怀屠龙技,但是大家不认 ...
- 33.IDEA + maven]在IDEA中打开一个maven项目，resolve完依赖后，缺少部分jar包问题
转自:https://www.cnblogs.com/zazalu/p/7649590.html [注意]作者只是对使用过程中遇到的问题提出了一个解决方案,但是本人在编写此解决方案文章的时候,对mav ...
- js数组sort方法详解
在处理数组的时候,我们有时候需要对数组进行排序,排序的方法有很多种,但是最好最快的就是利用sort方法进行快速的排序. 我们来看一个例子: var arr1 = [6, 3, 4, 1, 2, 5, ...
- mybatis的XML返回值类型报错
昨天项目里一直报错说是一个文件里的返回值java.util.hashmap不对,然后去定位这个文件发现并没有问题,后来在全局搜索的帮助下查找了返回值类型为resultMap的文件里看到写的代码里有: ...
- Python3.7&Django1.11.15 兼容性问题
环境: 1. Windows10 2. python3.7 3. Django1.11.15 启动Django时抛出以下异常: Unhandled exception in thread starte ...
- Eclipse怎样把文件系统形式的项目作为工程直接导入?
导入的时候,选择已经存在的工程,如果选择文件系统,可能会提示没有项目可以导入.这个时候,可以从其它Eclipse项目下,copy一份.project文件过来,修改源文件中的工程名字.如果需要,也可以c ...