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

<!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. 完全分布式安装hadoop集群

    0.安装jdk 1.配置hosts文件 2.建立hadoop运行账号 3.配置ssh免密码登录 4.在namenode上配置hadoop 4.1.修改hadoop-env.sh文件 4.2.修改yar ...

  2. SQLSERVER XML 类型列的模糊查询

    select <column_name> from MyTable where <column_name>.value('(/root/sub-tag)[1]', 'varch ...

  3. SDK中常用的工具

    Android SDK包含了各种各样的定制工具,简介如下: 一.Android模拟器(Android Emulator )它是在你的计算机上运行的一个虚拟移动设备.你可以使用模拟器来在一个实际的And ...

  4. 去掉Arraylist集合中的重复元素

    package cn.collection; import java.util.ArrayList; import java.util.Iterator; import java.util.Scann ...

  5. mysql数据库乱码问题

    设置如下:SET character_set_client=utf8; SET character_set_results=utf8; SET character_set_connection=utf ...

  6. uva1315 Crazy tea party（找规律）

    题意就是说把顺时针排的1到n换成逆时针排的需要的最少交换步数. 如果是线形的一串数,需要的交换次数就是个冒泡排序的交换次数:n*(n-1)/2,或者用a[i]=(i-1)+a[i-1]推出来. 对于环 ...

  7. [SP16580]QTREE7

    luogu vjudge 题意 一棵树,每个点初始有个点权和颜色(输入会给你) 0 u :询问所有u,v路径上的最大点权,要满足u,v路径上所有点的颜色都相同 1 u :反转u的颜色 2 u w :把 ...

  8. CommonJS 规范

    CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目,比如在服务器和桌面环境中. 这个项目最开始是由 Mozilla 的工程师 Kevin Dangoor 在2 ...

  9. python面向对象-我的理解

    参考:博客 Vamei .廖雪峰 面向对象概念 面向对象完全可以按照自然界生物分类法来理解. 当然,它不会有自然界那么复杂. 因为我专业的关系,因此个人觉得微生物来举例很容易理解. 所有的微生物都具有 ...

  10. 第四篇 PHP的成长路线

    学PHP开发这么久,进步不大,个人进行了分析.认为是我自己没有设定目标,就是对于自己要学成什么样没有清晰的认识. 今天特别了解了一下PHP的成长参考路线,以便自己以后迷失方向.PHP主要应该基于MYS ...