【www.bbyears.com--百度指南】
先看图：
堆积柱状图实现斜线、对比、拖拽等效果。可以多个维度再现大数据。
Demo百度网盘下载地址：http://pan.baidu.com/s/10A5Hk
流程：
1、数据由ashx提供，序列化好的数组字符串。
代码如下 vardatajs =
"{ tooltip : { show: true, axisPointer : {type : "shadow" },trigger: "item" }, title: { text: "测试分析", x: "right", y: "bottom" }, legend: { data: ["测试2", "测试1", "测试3", "测试44"] }, series: [{ name: "测试2", type: "bar", itemStyle: { barWidth: 40, normal: { label: { show: true, position: "inside" } } }, stack: "总数", data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 14, 4, 2, 2, 2, 2, 2, 2, 2, 2] }, { name: "测试1", type: "bar", itemStyle: { normal: { label: { show: true, position: "inside" } } }, stack: "总数", data: [1, 1, 1, 1, 1, 1, 1, 1, 7, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] }, { name: "测试3", type: "bar", itemStyle: { normal: { label: { show: true, position: "inside" } } }, stack: "总数", data: ["-", 2, 1, "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"] }, { name: "测试44", type: "bar", itemStyle: { normal: { label: { show: true, position: "inside" } } }, stack: "总数", data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", 2, 1] }], xAxis: [{ type: "category", data: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"] }], yAxis: [{ type: "value" }] }"
;
上面的字符串我放在js中，方便修改。
2、自定义逻辑插件：jquery-time_analysis.js
完成参数的读取和返回，完成ashx地址的配置，echarts src、zrender src 的路径配置；
query_url:
"test.ashx"
,
echarts_path:
"./echarts/src"
,
zrender_path:
"./zrender/src"
};
完成事件绑定，鼠标点击支持；
//定义图表对象
require.config({
packages: [{
name:
"echarts"
,
location: settings.echarts_path,
main:
"echarts"
}, {
name:
"zrender"
,
location: settings.zrender_path,
main:
"zrender"
}]
});
var
option_data = _getOption(settings);
$
this
.data(
"option"
, option_data);
require(
[
"echarts"
,
"echarts/chart/bar"
],
function
(ec) {
echarts = ec;
if
(chart && chart.dispose) {
chart.dispose();
}
chart = echarts.init($
this
[0]);
chart.setOption(option_data);
//鼠标点击事件
ecConfig = require(
"echarts/config"
);
chart.on(ecConfig.EVENT.CLICK, _clickHandler);
window.onresize = chart.resize;
});
关键代码：data对象是服务器端返回的字符串。
代码如下
function
_getOption(settings) {
var
option = {};
$.ajax({
type:
"post"
,
dataType:
"text"
,
data: settings.query_param,
async:
false
,
url: settings.query_url,
success:
function
(data) {
if
(data) { option = eval(
"("
+ data+
")"
); }
}
});
return
option;
};
3、调用：
<script src=
"js/jquery-1.9.1.js"
></script>
<script src=
"js/esl.js"
></script>
<script src=
"BusinessJs/jquery-time_analysis.js"
></script>
<script>
var
query = { query_param: { oper:
"bar"
, seId:1, mobile:
""
, queryTime:
""
, slot: 1 } };
var
legend_check = { message: 0, call: 0, power_on: 0, power_off: 0 };
$(document).ready(
function
() {
init();
});
function
init() {
$(
"#time_behavior_bar"
).time_analysis(query);
}
var
PhoneList = [];
var
Suspect = {};
var
MonthList = [];
function
_clickHandler(param) {
var
option = $(
"#time_behavior_bar"
).time_analysis(
"option"
);
var
relation_type;
alert(param.seriesIndex +
" 代表："
+ option.series[param.seriesIndex].name +
" 数据有:"
+ option.series[param.seriesIndex].data.length);
}
</script>
注意引用jquery.js、 esl.js；
对象说明：echarts会提供一个opertion的对象，这个对象在js中保存了和报表相关的所有东西。
var option = $("#time_behavior_bar").time_analysis("option");
param.seriesIndex 是鼠标点击事件的对象，代表了点击那个legend。我们可以通过 option.series[param.seriesIndex]获取到这个对象。
option.series[param.seriesIndex].name代表了测试1 测试2 这样的legend名称。其他大家可以再发挥。
原文来自:http://www.suchso.com/projecteactual/echarts-aspnet-ashx-demo-download-duiji-bar.html