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>
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
echarts改变颜色属性的demo的更多相关文章
- 【前端统计图】echarts改变颜色属性的demo
一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 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 ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
- android中自定义view---实现竖直方向的文字功能，文字方向朝上，同时提供接口，判断当前touch的是哪个字符，并改变颜色
android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...
- TextView设置动态改变颜色
通过TextView的setTextColor方法进行文本颜色的设置, 这里可以有3种方式进行设置: 第1种:tv.setTextColor(android.graphics.Color.RED);/ ...
随机推荐
- [转]Linq使用心得——SelectMany替代二重foreach循环
本篇记录了Linq学习的心得,较为浅显,各位大牛请轻拍. 学习Linq其实已经很久了,但是一直没有使用的习惯,故水平也始终没有提高.近来刻意强迫自己用Linq来替代C# 2.0的一些写法.这里有一些心 ...
- setAttribute的浏览器兼容性
1.element要用getElementById 或者是ByTagName来得到 2.setAttribute("class", vName)中class是指改变"cl ...
- Spider_basic
网络爬虫 定义:网络蜘蛛.网络机器人,抓取网络数据的程序 总结:用Python程序去模仿人去访问网站,模仿的越逼真越好 目的:通过有效的大量数据分析市场走势.公司决策 企业获取数据的方式 公司自有数据 ...
- (最新)使用爬虫刷CSDN博客访问量——亲测有效
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 1.概述 前言:前两天刚写了第一篇博客https://blog.csdn.net/qq_41782425/article/deta ...
- C# 进程同步，通信
进程之间通讯的几种方法:常用的方法有:1.使用内存映射文件2.通过共享内存DLL共享内存3.使用SendMessage向另一进程发送WM_COPYDATA消息. 发送WM_COPYDATA消息 比 ...
- java学习笔记之基础语法（二）
1.数组: 概念:同一种类型数据的集合,其实,数组就是一个容器 优点:可以方便的对其进行操作,编号从0开始,方便操作这些元素. 2,数组的格式 元素类型[]数组名=new 元素类型[数组元素个数]: ...
- 【习题 5-7 UVA - 12100】Printer Queue
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用队列和multiset就能完成模拟 [代码] #include <bits/stdc++.h> using names ...
- 【z05】聪明的质检员
[题目链接]:http://noi.qz5z.com/viewtask.asp?id=z05 [题解] 显然w越大,最后的Y也就越大; 可以依靠这个搞二分: 如果二分枚举的tw得到的Y比S小,则减小t ...
- __block 双下划线定义block变量可在内部修改其值
//如果外部的变量用了__block关键字,就可以在block内部修改这个变量的值. //block可访问外面定义的变量 int (^Num)(int, int)= ^(int a, int b){ ...
- storm原理介绍
目录 storm原理介绍 一.原理介绍 二.配置 三.并行度 (一)storm拓扑的并行度可以从以下4个维度进行设置: (二)并行度的设置方法 (三)示例 四.分组 五.可靠性 (一)spout (二 ...