echarts条形图 显示数据_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 li_year = new List();

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;

}