245 lines
9.5 KiB
JavaScript
245 lines
9.5 KiB
JavaScript
var ECharts = {
|
||
ChartDataFormate: {
|
||
FormateNOGroupData: function (data) {
|
||
//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
|
||
var categories = [];
|
||
var datas = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
categories.push(data[i].name || "");
|
||
datas.push({ name: data[i].name, value: data[i].value || 0 });
|
||
}
|
||
return { category: categories, data: datas };
|
||
},
|
||
FormateGroupData: function (data, type, is_stack) {
|
||
//data[{name:"",value:"",group:""},...]
|
||
//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
|
||
var chart_type = 'line';
|
||
if (type)
|
||
chart_type = type || 'line';
|
||
var xAxis = [];
|
||
var group = [];
|
||
var series = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
|
||
if (j == xAxis.length)
|
||
xAxis.push(data[i].name);
|
||
for (var k = 0; k < group.length && group[k] != data[i].group; k++);
|
||
if (k == group.length)
|
||
group.push(data[i].group);
|
||
}
|
||
for (var i = 0; i < group.length; i++) {
|
||
var temp = [];
|
||
for (var j = 0; j < data.length; j++) {
|
||
if (group[i] == data[j].group) {
|
||
if (type == "map") {
|
||
temp.push({ name: data[j].name, value: data[i].value });
|
||
} else {
|
||
temp.push(data[j].value);
|
||
}
|
||
}
|
||
}
|
||
switch (type) {
|
||
case 'bar':
|
||
var series_temp = { name: group[i], data: temp, type: chart_type };
|
||
series_temp = $.extend({}, {
|
||
markPoint: {
|
||
data: [
|
||
{ type: 'max', name: '最大值' },
|
||
{ type: 'min', name: '最小值' }
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{ type: 'average', name: '平均值' }
|
||
]
|
||
}
|
||
}, series_temp);
|
||
break;
|
||
|
||
case 'map':
|
||
var series_temp = {
|
||
name: group[i], type: chart_type, mapType: 'china', selectedMode: 'multiple',
|
||
itemStyle: {
|
||
normal: { label: { show: true } },
|
||
emphasis: { label: { show: true } }
|
||
},
|
||
data: temp
|
||
};
|
||
break;
|
||
case 'line':
|
||
var series_temp = { name: group[i], data: temp, type: chart_type };
|
||
if (is_stack)
|
||
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
|
||
series_temp = $.extend({}, {
|
||
markPoint: {
|
||
data: [
|
||
{ type: 'max', name: '最大值' },
|
||
{ type: 'min', name: '最小值' }
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{ type: 'average', name: '平均值' }
|
||
]
|
||
}
|
||
}, series_temp);
|
||
break;
|
||
|
||
default:
|
||
var series_temp = { name: group[i], data: temp, type: chart_type };
|
||
}
|
||
series.push(series_temp);
|
||
}
|
||
return { category: group, xAxis: xAxis, series: series };
|
||
}
|
||
}
|
||
,
|
||
ChartOptionTemplates: {
|
||
CommonOption: {
|
||
title: {
|
||
text: '智能图表',
|
||
left: "40%"
|
||
},
|
||
//通用的图表基本配置
|
||
tooltip: {
|
||
trigger: 'item'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
top: 'top',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
}
|
||
},
|
||
CommonLineOption: {//通用的折线图表的基本配置
|
||
title: {
|
||
text: '智能图表',
|
||
left:"40%"
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
calculable: true,
|
||
toolbox: {
|
||
show: true,
|
||
//orient : 'vertical',
|
||
left: 'right',
|
||
top: 'top',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
magicType: ['line', 'bar'],//支持柱形图和折线图的切换
|
||
saveAsImage: { show: true }
|
||
}
|
||
}
|
||
},
|
||
Pie: function (data, name) {
|
||
//data:数据格式：{name：xxx,value:xxx}...
|
||
var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b} : {c} ({d}/%)',
|
||
show: true
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
data: pie_datas.category
|
||
},
|
||
calculable: true,
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: true },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: name || "",
|
||
type: 'pie',
|
||
radius: '65%',
|
||
center: ['50%', '50%'],
|
||
data: pie_datas.data
|
||
}
|
||
]
|
||
};
|
||
return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
|
||
},
|
||
Lines: function (data, name, is_stack) {
|
||
//data:数据格式：{name：xxx,group:xxx,value:xxx}...
|
||
var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);
|
||
var option = {
|
||
legend: {
|
||
data: stackline_datas.xAxis
|
||
},
|
||
xAxis: [{
|
||
type: 'category', //X轴均为category，Y轴均为value
|
||
data: stackline_datas.xAxis,
|
||
boundaryGap: false//数值轴两端的空白策略
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
splitArea: { show: true }
|
||
}],
|
||
series: stackline_datas.series
|
||
};
|
||
return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
|
||
},
|
||
Bars: function (data, name, is_stack) {
|
||
//data:数据格式：{name：xxx,group:xxx,value:xxx}...
|
||
var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);
|
||
var option = {
|
||
legend: { data: bars_dates.category },
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: bars_dates.xAxis
|
||
}],
|
||
|
||
yAxis: [{
|
||
type: 'value'
|
||
}],
|
||
toolbox: bars_dates.toolbox,
|
||
series: bars_dates.series
|
||
};
|
||
return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
|
||
},
|
||
Maps: function (data, name, is_stack) {
|
||
//data:数据格式：{name：xxx,group:xxx,value:xxx}...
|
||
var maps_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'map', is_stack);
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
data: ['iphone3', 'iphone4', 'iphone5']
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: 2500,
|
||
left: 'left',
|
||
top: 'bottom',
|
||
text: ['高', '低'], // 文本，默认为数值文本
|
||
calculable: true
|
||
},
|
||
series: maps_dates.series
|
||
};
|
||
return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
|
||
}
|
||
}
|
||
|
||
|
||
};
|