echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="admin/css/bootstrap.min.css">
</head>
<body>
<section class="hj-second-page-section">
<div class="container-fluid">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hj-jumbotron-div">
<div class="panel panel-primary ng-scope">
<!-- pannel start -->
<div class="panel-body vc-pannel-body-toggle">
<div class="rows ng-scope">
<div class="panel-body vc-msg-panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div id="rt_chart1" style=""></div>
</div>
</div>
</div>
</div>
</div>
<!-- pannel end -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="echarts.js"></script>
<script src="jquery-2.2.3.min.js"></script>
<script>
/**
* @description 绘制柱状图
* @author luohan
* @date 2017-7-28
* @param
*/
function initChart1() {
$("#rt_chart1").height(460);
$("#rt_chart1").width(1005);
$("#rt_chart1").css("border","1px solid #ddd");
var myChart1 = echarts.init(document.getElementById("rt_chart1"));
var option1 = {
title : {
text: '数据统计',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['北京','上海','深圳','广州']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
show:false,
data : ['横坐标自定义']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'北京',
type:'bar',
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
var colorList = [
'#C33531'
];
return colorList[params.dataIndex]
},
//以下为是否显示
label: {
show: false
}
}
},
data:[2.0],
},
{
name:'上海',
type:'bar',
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
var colorList = [
'#EFE42A'
];
return colorList[params.dataIndex]
},
//以下为是否显示
label: {
show: false
}
}
},
data:[4.9],
},
{
name:'深圳',
type:'bar',
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
var colorList = [
'#64BD3D'
];
return colorList[params.dataIndex]
},
//以下为是否显示
label: {
show: false
}
}
},
data:[7.9],
},
{
name:'广州',
type:'bar',
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
var colorList = [
'#EE9201'
];
return colorList[params.dataIndex]
},
//以下为是否显示
label: {
show: false
}
}
},
data:[23.0],
}
]
};
// 为echarts对象加载数据
myChart1.setOption(option1);
}
initChart1();
</script>
</body>
</html>
echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能的更多相关文章
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts 柱状图,每根柱子显示不同颜色(随机显示和定制显示)
1,定制显示 option = { title: { text: '某地区降水量', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, grid: { ...
- echarts 默认柱状图每根柱子显示不同颜色(随机显示和定制显示)
series: [{ name: '请求数', type: 'bar', //barGap: 60, barWidth: 140,//柱图宽度 //stack: 'sum',//堆叠效果 itemSt ...
- echarts柱状图图例不显示的问题
如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的
- echarts以地图形式显示中国疫情情况实现点击省份下钻
首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echarts如何给柱形图的每个柱子设置不同颜色
总结下这几日用echarts库作基本图形遇到的一些问题. echarts快速上手可参考官网: http://echarts.baidu.com/tutorial.html#5%20%E5%88%86% ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
随机推荐
- 转 postfix邮件服务下mailq、postmap、postqueue 、 postsuper等用法
1.Mailq 功能说明:显示待寄邮件的清单. 语 法:mailq [-q] 补充说明:mailq可列出待寄邮件的清单,包括邮件ID,邮件大小,邮件保存时间,寄信人,收信人,以及邮件无法寄出的原因,提 ...
- 深入浅出Mybatis系列(九)---强大的动态SQL(转载)
原文出处:http://www.cnblogs.com/dongying/p/4092662.html 上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.r ...
- LeetCode OJ:Unique Paths(唯一路径)
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- scnaf()读入字符串需要注意的地方
#include<iostream> #include<cstdio> using namespace std; int main() { ],cch[]; int a; ci ...
- hibernate - 一级缓存和三种状态解析
转载自:http://www.cnblogs.com/whgk/p/6103038.html 一.一级缓存和快照 什么是一级缓存呢? 很简单,每次hibernate跟数据库打交道时,都是通过sessi ...
- CCTextFieldTTF 与 5种常用CCMenuItem
//继承(class HelloWorld : public cocos2d::CCLayer, public cocos2d::CCTextFieldDelegate) CCTextFieldTTF ...
- linux 下安装rar解压
在liunx下原本是不支持rar文件的,需要安装liunx下的winrar版本,操作如下 wget http://www.rarsoft.com/rar/rarlinux-4.0.1.tar.gz t ...
- BZOJ- 3142:数列 (数学)
题意:给出N,K,M,P.求有多少长度为K的序列A,满足:(1)首项为正整数:(2)递增数列:(3)相邻两项的差小于等于m:(4)最后一个数小于等于N. 思路:根据差分来算数量. #include&l ...
- MySQL实战 | 06/07 简单说说MySQL中的锁
原文链接:MySQL实战 | 06/07 简单说说MySQL中的锁 本文思维导图:https://mubu.com/doc/AOa-5t-IsG 锁是计算机协调多个进程或纯线程并发访问某一资源的机制. ...
- Bender Problem
Robot Bender decided to make Fray a birthday present. He drove n nails and numbered them from 1 to n ...