原图:


原代码:

<!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实现属性修改的更多相关文章

  1. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图

    [源码下载] 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获 ...

  4. ECSHOP筛选属性修改title标题

    发现百度蜘蛛爬行网站时会爬行属性链接,而且会进行收录.可是ecshop系统制作的网站,在分类页点击属性筛选出产品时,网页title不会改变.这样就会造成大量title一样的页面,不利于优化.为此,在网 ...

  5. java并发编程(十四)----(JUC原子类)对象的属性修改类型介绍

    今天我们介绍原子类的最后一个类型--对象的属性修改类型: AtomicIntegerFieldUpdater,AtomicLongFieldUpdater,AtomicReferenceFieldUp ...

  6. Linux用户和组管理命令-用户属性修改usermod

    用户属性修改 usermod 命令可以修改用户属性 格式: usermod [OPTION] login 常见选项: -u UID: 新UID -g GID: 新主组 -G GROUP1[,GROUP ...

  7. 【前端统计图】echarts改变颜色属性的demo

    一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. 【前端统计图】echarts实现简单柱状图

    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. 【前端统计图】echarts多条折线图和横柱状图实现

    参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...

随机推荐

  1. AOP 动态添加函数

    Function.prototype.before = function(beforefn) { // 保存原函数的引用 var self = this; // 返回包含了原函数和新函数的代理函数 r ...

  2. Hexo 添加自定义的内置标签

    灵感 想设计一个记录自已骑行的页面,显示时间.地点.路线图等信息.方便以后做一些留念.定位想实现下面类似的效果.参考:<特效>      实现方案也比较简单,反键查看源码.直接Copy,在 ...

  3. 【MySQL主从复制原理及搭建全过程】

    目录 准备工作 主从复制原理 开始搭建主从复制 本文将使用mariaDB数据库实现主从复制,其步骤与MySQL数据库无差异. MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护, ...

  4. java.sql.SQLException:错误 The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.

    错误 方法 添加后面的内容即可

  5. IDEA 开发工具在POM.XML文件中增加依赖

    在POM.XML 中使用快捷键 ALT+INSERT 选择第一个,输入关键字即可 选择版本,确认,ok

  6. xwiki操作手册

    Xwiki官网:http://www.xwikichina.com/xwiki/bin/view/Main/中文官网. 1   用户管理 1.1    添加新用户 用户管理需要管理员权限,管理员登陆后 ...

  7. 利用"SQL"语句自动生成序号的两种方式

    1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[name] f ...

  8. HDU 2886 Lou 1 Zhuang

    思维好重要.. 对于n+m == k , 当n == m || abs(n-m) == 1 时n*m取得最大值. 设 s = x*(l-x),s = lx-x^2.其导函数为 s' = -1/2x + ...

  9. Virtual Reality: Immersive Yourself In Your 3D Mockup

    ESI's Virtual Reality software solution IC.IDO is an exceedingly powerful immersive engineering solu ...

  10. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...