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

<!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. 转 postfix邮件服务下mailq、postmap、postqueue 、 postsuper等用法

    1.Mailq 功能说明:显示待寄邮件的清单. 语 法:mailq [-q] 补充说明:mailq可列出待寄邮件的清单,包括邮件ID,邮件大小,邮件保存时间,寄信人,收信人,以及邮件无法寄出的原因,提 ...

  2. 深入浅出Mybatis系列(九)---强大的动态SQL(转载)

    原文出处:http://www.cnblogs.com/dongying/p/4092662.html 上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.r ...

  3. 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 ...

  4. scnaf()读入字符串需要注意的地方

    #include<iostream> #include<cstdio> using namespace std; int main() { ],cch[]; int a; ci ...

  5. hibernate - 一级缓存和三种状态解析

    转载自:http://www.cnblogs.com/whgk/p/6103038.html 一.一级缓存和快照 什么是一级缓存呢? 很简单,每次hibernate跟数据库打交道时,都是通过sessi ...

  6. CCTextFieldTTF 与 5种常用CCMenuItem

    //继承(class HelloWorld : public cocos2d::CCLayer, public cocos2d::CCTextFieldDelegate) CCTextFieldTTF ...

  7. linux 下安装rar解压

    在liunx下原本是不支持rar文件的,需要安装liunx下的winrar版本,操作如下 wget http://www.rarsoft.com/rar/rarlinux-4.0.1.tar.gz t ...

  8. BZOJ- 3142:数列 (数学)

    题意:给出N,K,M,P.求有多少长度为K的序列A,满足:(1)首项为正整数:(2)递增数列:(3)相邻两项的差小于等于m:(4)最后一个数小于等于N. 思路:根据差分来算数量. #include&l ...

  9. MySQL实战 | 06/07 简单说说MySQL中的锁

    原文链接:MySQL实战 | 06/07 简单说说MySQL中的锁 本文思维导图:https://mubu.com/doc/AOa-5t-IsG 锁是计算机协调多个进程或纯线程并发访问某一资源的机制. ...

  10. Bender Problem

    Robot Bender decided to make Fray a birthday present. He drove n nails and numbered them from 1 to n ...