本次的难点在于交叉传数据,又要把四组20个不同日期 显示上!

先看效果图:

数据传递方式:图

function func_echarts_2ba() {
var echarts_2bar = echarts.init(document.getElementById('id_echarts_2bar'));
echarts_2bar.option_2bar = {
title: { subtext: '单位:GJ', x: 'right', top: -12, subtextStyle: { "fontSize": 12, "fontFamily": "Microsoft YaHei", "color": "#444" } },
color: ['#FF0000', '#87cefa', '#61a0a8', '#d48265', '#91c7ae'],
//tooltip: {
// trigger: 'item',
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// }
//}, //legend: {
// data: ['最近第1天', '最近第2天', '最近第3天', '最近第4天', '最近第5天'],
// align: 'right',
// right: 10
//},
grid: {
height: 160,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLabel:{
interval:0//横轴信息全部显示
//rotate:-30,//-30度角倾斜显示
} ,
data: ['五官科医院', '虹桥能源站', '虹桥2号能源站', '浦东东方医院'],
}],
yAxis: [{
type: 'value',
name: '',
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '最近第1天',
type: 'bar', barWidth: 10, data:[]
// data: [3900, 12, 31, 34, 31]
}, {
name: '最近第2天',
type: 'bar', barWidth: 10,
data:[]
// data: [4230, 20, 5, 9, 3]
}, {
name: '最近第3天',
type: 'bar', barWidth: 10,
data:[]
// data: [5590, 1, 2, 3, 1]
},
{
name: '最近第4天',
type: 'bar', barWidth: 10,
data:[]
// data: [5590, 2, 3, 1, 0.5]
},
{
name: '最近第5天',
type: 'bar', barWidth: 10,
data:[]
// data: [3600, 2, 3, 1, 0.5]
}
]
};
echarts_2bar.setOption(echarts_2bar.option_2bar);
$.ajax({
type: "post",
url: ajaxurl,
data:
{
async: false,
operate: "echarts_2bar"
},
dataType: "json", //返回数据形式为json
success: function (result) {
echarts_2bar.setOption(
{
tooltip: {
trigger: 'axis',
formatter: function (params) {
var relVal = params[0].name;
//for (var i = 0, l = params.length; i < l; i++) {
if (params[0].name == "虹桥能源站") {
relVal += '<br/>' + formatMonth(result[5].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[6].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[7].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[8].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[9].stat_dayofmonth) + ' : ' + params[4].value;
} else if (params[0].name == "虹桥2号能源站") {
relVal += '<br/>' + formatMonth(result[10].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[11].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[12].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[13].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[14].stat_dayofmonth) + ' : ' + params[4].value;
} else if (params[0].name == "浦东东方医院") {
relVal += '<br/>' + formatMonth(result[15].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[16].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[17].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[18].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[19].stat_dayofmonth) + ' : ' + params[4].value;
} else {
relVal += '<br/>' + formatMonth(result[0].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[1].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[2].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[3].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[4].stat_dayofmonth) + ' : ' + params[4].value;
} return relVal;
}
},
series: [
{ data: [JSON.stringify(result[0].heat_supply), JSON.stringify(result[5].heat_supply),JSON.stringify(result[10].heat_supply),
JSON.stringify(result[15].heat_supply) ] }, { data: [JSON.stringify(result[1].heat_supply),
JSON.stringify(result[6].heat_supply),
JSON.stringify(result[11].heat_supply),
JSON.stringify(result[16].heat_supply)] },
{
data: [JSON.stringify(result[2].heat_supply),
JSON.stringify(result[7].heat_supply),
JSON.stringify(result[12].heat_supply),
JSON.stringify(result[17].heat_supply)] },
{ data: [JSON.stringify(result[3].heat_supply),
JSON.stringify(result[8].heat_supply),
JSON.stringify(result[13].heat_supply),
JSON.stringify(result[18].heat_supply)] },
{ data: [JSON.stringify(result[4].heat_supply),
JSON.stringify(result[9].heat_supply),
JSON.stringify(result[14].heat_supply),
JSON.stringify(result[19].heat_supply)] }
]
})
},
error: function (errorMsg) { }
});
}
function formatMonth(val) {
if (val.length == 8) {
return val.substr(4, 2) + "月" + val.substr(6,2) + "日";
} else {
return val;
}
}

Echarts 有点难度的柱状图的更多相关文章

  1. echarts 圆形图、柱状图

    首先引入echarts的js包 <script type="text/javascript" src="js/esl.js"></script ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.

    今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...

  4. Echarts动态加载柱状图和折线图混合展示的实例

    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...

  5. Echarts动态加载柱状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  6. Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.  本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...

  7. [echarts] 同指标对比柱状图

    需求:对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率 http://echarts.baidu.com/echarts2/doc/example/bar1.html option = ...

  8. echarts入门1【柱状图/饼图】

    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...

  9. 图表echarts折线图,柱状图,饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

随机推荐

  1. 50余本中外Python电子教程及源码下载地址

    链接:http://pan.baidu.com/s/1c0VTwsC 密码:hapu

  2. 服务器变量 $_SERVER 详解

    摘抄:http://ha.cker.in/942.seo 1.$_SESSION[‘PHP_SELF’] — 获取当前正在执行脚本的文件名 2.$_SERVER[‘SERVER_PROTOCOL’] ...

  3. Parallelism VS Concurrency

     一个电脑/手机 有很多核,每一个核上运行一个任务,叫做 Parallelism. 只有一个核,通过任务调度,也可以实现 Concurrency.

  4. 支付宝支付下载对账单bug反馈整理

    支付宝官方给广大开发朋友们,留了一个下载账单的API接口,供大家下载指定日期的账单数据.先来看下这个页面: 点我前往官方说明文档 $aop = new AopClient (); $aop->g ...

  5. ORACLE 动态执行SQL语句

    本文转自 http://zhaisx.iteye.com/blog/856472 Oracle 动态SQL Oracle 动态SQL有两种写法:用 DBMS_SQL 或 execute immedia ...

  6. SHELL脚本进阶

    一.读取参数 $0 程序名称$1 第一个参数$2 第二个参数,依次类推可以使用 basename 来读取程序名称:basename $0 可以使用 dirname 来读取第一个参数的目录:dirnam ...

  7. js继承(自备水,这非常干货)

    讲js继承之前,想一想什么是继承? 生活中有很多例子,比方说继承财产,继承女朋友的前男友的前女友 ヽ(ー_ー)ノ ,这些和js继承差不多,但是有一个不一样的地方,就是继承过后,原先的人就没有了,js继 ...

  8. 实验一 c++简单程序设计

    一.实验内容 1.ex 2_28 (1) 用if...else判断 #include<iostream> using namespace std; int main() { char i; ...

  9. Hibernate 工具类

    1.HibernateConfigUtil.java(HIbernate配置工具类) import org.hibernate.Session; import org.hibernate.Sessio ...

  10. python全栈开发学习_内容目录及链接

    python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...