话不多说，先上几张效果图 给大家看看
1：echart所用到的文件包需要事先引入好具体可见 http://echarts.baidu.com/doc/start.html
2:本例中所有的数据都是通过ajax异步获得，后台用.net服务端 mvc 框架
3: 我后台返回的是json格式的数据
后台是得到一个DataSet集合,在写一个方法进行检查,要保证ds里面每一张dt都有相同行数并且时间字段数据相同,在这个案例中我的js里面只用到 时间 指标名称 数值三个字段,具体的表怎么设计可根据具体情况具体对待
具体方法 ：
public ArrayList CheckDatable(DataSet ds, ArrayList list)
{
//1. 获取年份集合.
IList<string> li_year = new List<string>();
string strYear = "";
foreach (DataTable dt in ds.Tables)
{
foreach (DataRow dr in dt.Rows)
{
if (dr["年份"] != null)
{
strYear = dr["年份"].ToString();
if (!li_year.Contains(strYear))
{
li_year.Add(strYear);
}
}
}
}
DataTable dtTmp = null;
DataView dvTmp = null;
DataRow srcRow = null;
DataRow tgtRow = null;
DataRow[] drs = null;
foreach (DataTable item in ds.Tables)//item不要用var dt很大的时候装箱很费时间 最好写明确的DataTable
{
if (item != null && item.Rows.Count > 0)
{
srcRow = item.Rows[0];
foreach (string curYear in li_year)
{
drs = item.Select("年份='" + curYear + "'");
if (drs == null || drs.Length == 0)
{
tgtRow = item.NewRow();
CopyDataRow(ref tgtRow, srcRow, item);
tgtRow["年份"] = curYear;
tgtRow["数值"] = DBNull.Value;
item.Rows.Add(tgtRow);
}
}
//产生临时顺排充满的局部数据表.
dtTmp = item.Copy();
dvTmp = item.DefaultView;
dvTmp.Sort = "年份";
dtTmp = dvTmp.ToTable();
if (dtTmp.Rows.Count > 0)
{
list.Add(dtTmp);
}
}
}
return list;
}
后台调用并返回json格式方法
ArrayList list = new ArrayList();
list = Gchart.CheckDatable(ds, list);
return Content(JsonConvert.SerializeObject(list));
4.下面是前端接收到后台数据并解析的过程
假设获取数据的js方法是getData 后台服务端的方法是 GetGChartHealthStatisticsNationalEverywhere（这里用的是mvc）
function getData(obj) {
var url = "/chart/GChart/GetGChartHealthStatisticsNationalEverywhere/";
if (!obj) {
obj = {};
}
$.ajax({
type: "post",
url: url,
data: obj,
timeout: 60000,
success: function (ret) {
var data = eval("(" + ret + ")");
if (data.length == 0) {
$('#SpecificGraphics').load("/chart/GChart/pvGChart404");//没有数据是转向一个提示页面 提示没有查询到相关数据 $("select").load(url);
这里是异步刷新页面的一个部分,load的也是一个子页面.net mvc里面的部分视图 }
else {
initChartHealthStatisticsNationalEverywhere(ret);//假设有数据的情况下会初始化图表区，重新画图。
}
},
error: function (request, error) {
if (error == "timeout") {
}
else {
}
}
});
}
//初始化函数
function initChartHealthStatisticsNationalEverywhere(data) {
var option = getOptionHealthStatisticsNationalEverywhere(data);//设置option 最主要的部分
if (chart && chart.dispose) {
chart.dispose();
}
var eleChart = document.getElementById('mainleft');//要展示图表的div的id
var chart = echarts.init(eleChart);
window.onresize = chart.resize;
ption(option, true);
}
function getOptionHealthStatisticsNationalEverywhere(data) {
/*将所有需要的变量给解析出来*/
var L_xAxis = [];
var L_series = [];
var L_legend = [];
var cur_list = [];
var yearlist = [];
var ret = eval("(" + data + ")");
var unit = " ";
var MaxData = 0;
var starnum;
var endnum;
var ss;
var ratelength = 0;
$.each(ret, function (i, item) { //每次都是通过循环去取得指标名称 放到一个数组 变量中
var zitem = item;
if (i == 0) {
starnum = zitem[0]["指标名称"].indexOf("(");
endnum = zitem[0]["指标名称"].indexOf(")");
ss = zitem[0]["指标名称"].substring(starnum + 1, endnum); //我这里是要取到指标的单位
}
cur_list.push(zitem[0]["指标名称"]);
});
L_legend = cur_list;
$.each(ret, function (i, item) { //这里是因为在我的项目中 如果含有百分比的指标名称 并且只有一个指标的时候是y轴向左看 如果含百分比并且不止一个指标名称 那么就让百分比的指标y轴向右看齐 变成折线图 其他指标y轴向左看齐 以柱状图的形式展示
var current_item = item;
if (item[0]["指标名称"].indexOf("%") > 0 || item[0]["指标名称"].indexOf("‰") > 0) {
ratelength++;
}
$.each(current_item, function (i, zitem) {
L_xAxis.push(zitem["年份"]);
});
});
$.each(L_xAxis, function (i, item) {
if ($.inArray(item, yearlist) == -1) {
yearlist.push(item);
}
});
L_xAxis = yearlist;
L_xAxis.sort();
$.each(ret, function (i, item) {
var current_item = item;
var current_data = [];
$.each(current_item, function (i, zitem) {
if (zitem["数值"] != null) {
//保留两位小数字
zitem["数值"] = Math.round(zitem["数值"] * 100) / 100;
if (MaxData < zitem["数值"])
{ MaxData = zitem["数值"] }
current_data.push(zitem["数值"]);
} else {
current_data.push('-');
}
});
if (L_legend.length <= ratelength) {
var l_data = {
name: item[0]["指标名称"], 'yAxisIndex': 0, type: 'line', itemStyle: {
normal: {
color: env.dic.get(parseInt(Math.random() * 4) + 1), label: { show: true }, barBorderRadius: 150
}, emphasis: {
barBorderRadius: 150
}
}, data: current_data
}
} else if (item[0]["指标名称"].indexOf("%") > 0 || item[0]["指标名称"].indexOf("‰") > 0) {
var l_data = {
name: item[0]["指标名称"], 'yAxisIndex': 1, type: 'line', itemStyle: { // 'yAxisIndex': 1 y轴向右看齐 type: 'line' 折线图
normal: {
color: env.dic.get(parseInt(Math.random() * 4) + 1), label: { show: true }
}
}, data: current_data
}
} else {
var l_data = {
name: item[0]["指标名称"], 'yAxisIndex': 0, type: 'bar', itemStyle: { //'yAxisIndex': 0 y 轴向左看齐 type: 'bar' 柱状图
normal: {
color: env.dic.get(parseInt(Math.random() * 4) + 1), label: { show: true }, barBorderRadius: 150 //env.dic.get(parseInt(Math.random() * 4) + 1) 这里是我自己写的一个方法 配置颜色 这里可以写具体的rgb颜色值
}
}, data: current_data
}
}
L_series.push(l_data);
});
//alert(L_series);
//alert(JSON2.stringify(L_xAxis));
//alert(JSON2.stringify(L_series)); //调试的时候 遇到错误可以讲对象原型打印出来 看到他的结构
var option = {
title: {
text: '全国卫生统计各省市',
subtext: '统计数据',
x: 0,
y: 0
},
tooltip: {
trigger: 'axis'
},
legend: {
data: L_legend
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: { show: true }
}
},
calculable: true,
grid: { y: 70, y2: 30, x2: 20 },
xAxis: [
{
type: 'category',
data: L_xAxis
}
],
yAxis: [
{
type: 'value',
axisLabel: { formatter: '{value} ' },
name: ss,
max: MaxData * 3 / 2 //这里是取得所有数据中最大的一个值,然后用黄金比例设置y轴的高度，是图表展示的好看一些
}, {
type: 'value',
axisLabel: { formatter: '{value} ' },
name: "百分比%"
}
],
series: L_series
};
return option;
}