asp.net+ashx实现堆积柱状图说明

作者：袖梨 2022-06-25

先看图：

堆积柱状图实现斜线、对比、拖拽等效果。可以多个维度再现大数据。

Demo百度网盘下载地址：

http://pan.baidu.com/s/10A5Hk

流程：

1、数据由ashx提供，序列化好的数组字符串。

代码如下

复制代码

var

datajs =
"{ 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 的路径配置；

代码如下	复制代码
$.fn.time_analysis.defaults = { 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; };