【前端统计图】echarts改变颜色属性的demo
一：柱状图改变颜色
代码：
<!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>
二：横向柱状图渐变
代码：
<!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>
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
【前端统计图】echarts改变颜色属性的demo的更多相关文章
- echarts改变颜色属性的demo
一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- 【前端统计图】echarts实现属性修改
原图: 原代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- echarts 改变个别省份的边界线颜色
想要实现地图,首先要引入china.js文件,如果有引入就直接调过本步骤去下方看代码,没有引入可以点击下方链接自行Ctrl c + Ctrl v china.js import "../.. ...
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
- 0029 定位：position（相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性）
目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...
- 【用户交互】APP没有退出前台但改变系统属性如何实时更新UI？监听系统广播，让用户交互更舒心~
前日,一小伙伴问我一个问题,说它解决了半天都没解决这个问题,截图如下: 大概楼主理解如下: 如果在应用中有一个判断wifi的开关和一个当前音量大小的seekbar以及一个获取当前电量多少的按钮,想知道 ...
- jqGrid使用setColProp方法动态改变列属性
在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...
随机推荐
- 看<Asp.net夜话>随笔(2013-10-13)
1.Asp.net内置对象 1.1Request对象 封装了客户端请求信息 1.2Response对象 代表了服务器响应对象,可以向客户端返回数据 1.3Server对象 是用于获取服务器的相关信息的 ...
- cocos2d-x中六种持续性动作
持续性动作: (一) 位置变化动作 Move by to Jump by to (二) 属性变化动作 Scale by to Rotate by to Fade in out to Tint to b ...
- Day1：If else流程判断
一.if...else语句 if 条件成立: 执行条件成立后的代码 else: 执行条件不成立的代码 注:注意有冒号,python会强制缩进!一般语句都必须顶格写,缩进是缩进一个tab键,等于4个空格 ...
- 短网址ShortUrl的算法
场景: 我们在新浪微博上公布网址的时候.微博会自己主动判别网址.并将其转换.比如:http://t.cn/hrYnr0. 为什么要这样做的,原因我想有这样几点: 1.微博限制字数为140字一条,那么假 ...
- Spring Boot 2.x 使用 jpa 连接 mysql
在spring boot网站上生成一个项目,如图: 我使用的是Maven项目,java使用是jdk8(spring boot 2.x必须要jdk8及以上),dependencies分别输入选择 web ...
- (转)ipv4的网段表示方法
简单一点举例说明:ip段:10.0.0.1-10.0.0.255 的表示方法:10.0.0.0/24ip段:10.0.0.1-10.0.255.255 的表示方法: ...
- Nginx 虚拟主机及正向代理设置
添加虚拟主机 # vim /usr/local/nginx-1.9.0/conf/vhost/proxy.conf server { resolver 8.8.8.8; listen ; locat ...
- [RxJS] Multicasting shortcuts: publish() and variants
Because using multicast with a new Subject is such a common pattern, there is a shortcut in RxJS for ...
- C#无符号右移
/// <summary> /// 无符号右移,与JS中的>>>等价 /// </summary> /// & ...
- php实现调整数组顺序使奇数位于偶数前面
php实现调整数组顺序使奇数位于偶数前面 一.总结 1.array_push()两个参数,$arr在前 2.array_merge()的返回值是数组 二.php实现调整数组顺序使奇数位于偶数前面 ...