【前端统计图】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> < ...
随机推荐
- CentOS中实现与Ubuntu下apt-get install build-essential功能类似的命令
CentOS中实现与Ubuntu下apt-get install build-essential功能类似的命令 在Ubuntu中安装完系统后,可以直接使用apt-get install build-e ...
- 学习《人人都是产品经理2.0：写给泛产品经理》高清中文PDF+苏杰(作者)
<人人都是产品经理2.0--写给泛产品经理>将从人开始,以人结束,中间说事,以一个产品从无到有的过程为框架--想清楚.做出来.推出去,外加一章综合案例.其中,最重要的想清楚.做出来.推出去 ...
- nginx 实现跨域
nginx 添加头部跨域. location / { add_header 'Access-Control-Allow-Origin' '*'; //允许的域 add_header 'Access-C ...
- 阿里&163 yum源
站点:https://opsx.alibaba.com/mirror #阿里云base cat /etc/yum.repos.d/alibase.repo [rhel7] name=ali-base ...
- 实例讲解Nginx下的rewrite规则 来源：Linux社区
一．正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二．文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* ...
- leetcode笔记：Sort Colors
一. 题目描写叙述 Given an array with n objects colored red, white or blue, sort them so that objects of the ...
- 中科燕园GIS外包--移动GIS
移动GIS恰逢其时 得益于移动智能终端的普及和移动互联网的发展,伴随着GIS技术的发展和应用的深入.越来越多的企业和普通消费者開始体会到移动GIS的巨大潜力和价值. 移动GIS轻便灵活,受众面广.随时 ...
- es62
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 高阶函数sort
排序中我们经常会用sort这个高阶函数,我们今天就来讲讲这个sort的比较机制,对于数字来说我们只需要比较他们的大小就可以了 但是 var arr =[15,81,9,4,3]; alert(arr. ...
- 量化派基于Hadoop、Spark、Storm的大数据风控架构--转
原文地址:http://www.csdn.net/article/2015-10-06/2825849 量化派是一家金融大数据公司,为金融机构提供数据服务和技术支持,也通过旗下产品“信用钱包”帮助个人 ...