【前端统计图】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> < ...
随机推荐
- Linux 终端仿真程序Putty
PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件.较早的版本仅支持Windows平台,现在的版本中开始支持各类Unix平台. 用linux作为桌面系统,身为工程师很多时 ...
- js002---- 标准内置对象
1. js全局的对象(全局作用域里的对象,而不是全局对象), 或者叫标准内置对象 2, 全局对象 是一个Global类的对象. 标准内置对象的分类: 1. 值属性 infinity Na ...
- Windows IP 设置脚本
前言: 有时候,总要在不同地方工作,就会总要切换 IP,内网比较严重,内网大多数都是静态 IP 所以呢,老是手动去设置 IP.子网掩码.网关等甚是繁琐,同时还得记住 IP,所以呢,用脚本来记录 IP, ...
- IDEA下——Spring入门程序
创建一个Maven的项目,我的项目结构如下: 在pom文件里写下需要导入的依赖: <?xml version="1.0" encoding="UTF-8" ...
- [Python] Read and Parse Files in Python
This lesson will teach you how to read the contents of an external file from Python. You will also l ...
- 实现外网訪问局域网内的SVN——花生壳+visiualSVN实现外网訪问局域网内的SVN（三）
经过前两篇文章.到眼下为止,我们已经获取了外网域名而且搭建好了SVN server.接下来,我们就总结一下怎样实践实现一下訪问局域网. 1.安装VisiualSVN Server(可见:http:// ...
- 修正单纯形法·优化算法实现·Java
修正单纯性法 代码例如以下: 舍去了输入转化的内容,主要包括算法关键步骤. public class LPSimplexM { private static final double inf = 1e ...
- Android图像处理之熔铸特效
代码: package com.color; import android.content.Context; import android.graphics.Bitmap; import androi ...
- 56.如何清除已经设置的npm config配置
npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除
- 5.Maven之（五）Maven仓库
转自:https://blog.csdn.net/oonmyway1234/article/details/82315777 本地仓库 Maven一个很突出的功能就是jar包管理,一旦工程需要依赖哪些 ...