echart图表展示数据-简单的柱状图

话不多说，先上几张效果图 给大家看看








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; }