echart圖表展現數據-簡單的柱狀圖

時間 2019-11-19

標籤 echart 圖表展現數據簡單柱狀简体版

原文原文鏈接

話很少說，先上幾張效果圖給你們看看html

1：echart所用到的文件包須要事先引入好具體可見 http://echarts.baidu.com/doc/start.html前端

2:本例中全部的數據都是經過ajax異步得到，後臺用.net服務端 mvc 框架 ajax

3: 我後臺返回的是json格式的數據 json

後臺是獲得一個DataSet集合,在寫一個方法進行檢查,要保證ds裏面每一張dt都有相同行數而且時間字段數據相同,在這個案例中個人js裏面只用到時間指標名稱數值三個字段,具體的表怎麼設計可根據具體狀況具體對待數組

具體方法：mvc

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格式方法echarts

ArrayList list = new ArrayList(); 框架

list = Gchart.CheckDatable(ds, list);

return Content(JsonConvert.SerializeObject(list));

4.下面是前端接收到後臺數據並解析的過程dom

假設獲取數據的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 = {

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: '統計數據',