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

<!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. 使用Innobackupex快速搭建(修复)MySQL主从架构

    MySQL的主从搭建大家有很多种方式,传统的mysqldump方式是很多人的选择之一.但对于较大的数据库则该方式并非理想的选择.使用Xtrabackup可以快速轻松的构建或修复mysql主从架构.本文 ...

  2. LeetCode OJ：Length of Last Word（最后一个词的长度）

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  3. SQL Server 索引中include

    SQL Server 索引中include的魅力(具有包含性列的索引) http://www.cnblogs.com/gaizai/archive/2010/01/11/1644358.html 开文 ...

  4. Audiophobia（Floyd算法）

    个人心得:这在一定途径上完成查询方面还是很吃力,得多锻炼空间能力,不能再每次都看到就后退,要全力应对, 那怕被虐的不要不要的. 这题主要是求俩个端点中所有路径中最大构成的集合中最小的数值,其实开始思想 ...

  5. [转] 如何用BSP树生成游戏地图

    作者:Timothy Hely 当用对象随机填充某个区域如地下城中的房间时,你可能会遇到的问题是太过随机,导致分布疏密不均或混乱.在本教程中,我将告诉大家如何使用二进制空间划分法(游戏邦注:即Bina ...

  6. ubuntu 迁移部分 / 目录下的存储空间到 /home目录

    状况:当时给系统分区的时候,home和根目录都是25GB左右,突然发现home 目录不够用了,于是决定进行将根目录的部分空间挪移到home下去 主要方法:使用Gparted的LIve USB的方法. ...

  7. python之 python 起源、语言特点

    一. 1.1  什么是 PythonPython 是一门优雅而健壮的编程语言,它继承了传统编译语言的强大性和通用性,同时也借鉴了简单脚本和解释语言的易用性.它可以帮你完成工作,而且一段时间以后,你还能 ...

  8. Road to OI

    我学OI已经三年有余了.回首向来萧瑟处,在镜花水月一般的OI生涯面前,我不敢,也没资格称“也无风雨也无晴”.这三年我过得浑浑噩噩,玩了很多游戏,看了很多番,追过一个女孩,OI却搞得一塌糊涂.留给我的时 ...

  9. 使用 acl 库针对 C++ 对象进行序列化及反序列编程

    在开发网络应用程序时,各个模块之间的数据通信可谓是家常便饭,为了应对这些数据通信时数据交换的要求,程序员发明了各种数据格式:采用二进制数据结构(早期 C 程序员).采用 XML.采用SOAP(坑人的设 ...

  10. 【转】轻舞飞扬 LTE基本架构

    这篇文章主要介绍LTE的最基础的架构,包括LTE网络的构成,每一个网络实体的作用以及LTE网络协议栈,最后还包括对一个LTE数据流的模型的说明. LTE网络参考模型 这是一张非常有名的LTE架构图,从 ...