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

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