---------------------------------------------------------代码区---------------------------------------------------------------

<!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柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能的更多相关文章

  1. echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  2. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  3. echarts 柱状图，每根柱子显示不同颜色（随机显示和定制显示）

    1,定制显示 option = { title: { text: '某地区降水量', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, grid: { ...

  4. echarts 默认柱状图每根柱子显示不同颜色（随机显示和定制显示）

    series: [{ name: '请求数', type: 'bar', //barGap: 60, barWidth: 140,//柱图宽度 //stack: 'sum',//堆叠效果 itemSt ...

  5. echarts柱状图图例不显示的问题

    如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的

  6. echarts以地图形式显示中国疫情情况实现点击省份下钻

    首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...

  7. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  8. echarts如何给柱形图的每个柱子设置不同颜色

    总结下这几日用echarts库作基本图形遇到的一些问题. echarts快速上手可参考官网: http://echarts.baidu.com/tutorial.html#5%20%E5%88%86% ...

  9. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

随机推荐

  1. SpringBoot WebSocket实现

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. 让您的Chrome浏览器允许本地环境支持Ajax

    对于网站前端人员来说,我们在本地开发程序的时候如果用到Ajax的话,通常会使用Firefox来测试,因为Firefox的安全策略支持本地Ajax,IE系列和Chrome都不支持. 不过,经过笔者亲身体 ...

  3. 分布式_理论_02_Base 理论

    一.前言 五.参考资料 1.分布式理论(二)——Base 理论 2.分布式理论(二) - BASE理论

  4. Django 框架概况

    Django 里更关注的是模型(Model).模板(Template)和视图(Views),称为 MTV模式: M 代表模型(Model),即数据存取层. 该层处理与数据相关的所有事务:如何存取.如何 ...

  5. http请求 详解

  6. The Sum of 0 for four numbers（拆解加二分思想）

    个人心得:单纯用二分法一直超时,后面发现我的那种方法并没有节省多少时间,后面看了大神的代码,真的是巧妙, 俩个数组分别装a+b,c+d.双指针一个指向最后,从第一个开始想加,加到刚好大于0停止,再看是 ...

  7. 【java规则引擎】简单规则的rete网络示意图

    一个Fact通过Session添加到规则网络中,如何进行规则匹配的大致过程如下 (1)通过根结点对象从EntryPointNode的Map集合中找到相应的EntryPointNode对象 (2)Ent ...

  8. 洛谷 P1062 数列

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  9. 微信小程序编写物流信息进度样式

    做电商类型的小程序一定会碰到编写物流信息的时候,一般页面如下图 难点在于只有一条信息时候的页面样式 以及多条信息最后一条信息的页面样式 之前没做过这一块的东西,所以刚碰到的时候想了老半天orz.后来上 ...

  10. 使用自定义端口连接SQL Server 2008的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 使用过SQL Server的人大多都知道,SQL Server服务器默认监听的端口号是1433,但是我今天遇到的问题是我的机器上有三个数据库实例, ...