Echarts動態載入折線圖X Y軸資料圖表資料
阿新 • • 發佈：2019-01-07
前幾天，收到商家的反饋，希望可以有一個直觀的圖表，展示一個時間段裡的銷售額，客數，排班人數，並把銷售高峰期以及時間段反應出來。經同事的介紹，選擇了百度的 echarts，縮寫來自Enterprise Charts，一個純JavaScript的圖表庫。上官網查，官方的示例都是死資料。。。廢話不多說，直接上程式碼。
先來一張最終效果圖
先看看官方的示例
option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: '大資料量面積圖', }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [{ type: 'inside', start: 0, end: 10 }, { start: 0, end: 10, handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [ { name:'模擬資料', type:'line', smooth:true, symbol: 'none', sampling: 'average', itemStyle: { normal: { color: 'rgb(255, 70, 131)' } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' }]) } }, data: data } ] };
從官方程式碼裡可以，我們可以提取出 動態載入資料 的項 以及echarts 的初始化
myChart = echarts.init(document.getElementById('main'), 'infographic');//載入了主題 myChart.clear(); option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { data: [] }, toolbox: { feature: { dataView: { show: false, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, grid: { left: '5%', right: '5%' }, xAxis: [{ type: 'category', boundaryGap: false, axisPointer: { type: 'shadow' }, data: [],// X軸的定義 axisLabel: { interval: 0,//橫軸資訊全部顯示 rotate: -30,//-30度角傾斜顯示 } }], dataZoom: [ ], yAxis: [{ type: 'value',// Y軸的定義 min: 0, max: '', interval: '', data: [], axisLabel: { formatter: '{value}' } } , { type: 'value',// Y軸的定義 name:'排班數', }], series: [] }; // 初次載入圖表(無資料) myChart.setOption(option);
完成了這一步之後，我們就可以根據自己的實際需要 動態載入資料 能採取的方法有很多 這裡我使用的是ajax 請求 的資料
//載入資料 $.ajax({ url: "WebServers/.../GoodsInfo", type: 'post', dataType: 'json', data: { CompanyName: CompanyName, dataOn: check_val },//引數 beforeSend: function () { fnAjaxLoad(true); }, complete: function () { fnAjaxLoad(); }, success: function (data) { jsons = data; loadData(); }, error: function () { alert("資料載入失敗！"); } });
function loadData() {
//折線圖
var Item = function () {
return {
name: '',
type: 'line',
data: [],
yAxisIndex: 0,
markArea: {
}
}
};
//柱狀圖
var Bar = function () {
return {
name: '',
type: 'bar',
data: [],
yAxisIndex: 1,
barWidth: 20,
markArea: {
}
}
};
var legends = [];
var Series = [];
var str;
var json = jsons.setData;
//console.info(json);
var setCol = json[0].setColoer;
if (setCol != null && setCol !='') {
if (setCol[0].OneStateTime != null && setCol[0].OneStateTime != '') {
str = { data: [[{ name: '第一階段', xAxis: setCol[0].OneStateTime }, { xAxis: setCol[0].OneEndTime }], [{ name: '第二階段', xAxis: setCol[0].TwoStateTime }, { xAxis: setCol[0].TwoEndTime }]], itemStyle: { normal: { color: setCol[0].setColor } } };
//console.info(str);
}
}
//判斷選中的資料型別
if (document.getElementsByName("bm")[0].checked) {
for (var i = 0; i < json.length; i++) { var it = new Item();
var bar = new Bar();
it.name = json[i].setName;
legends.push(json[i].setName);
it.data = json[i].setData;
if (i == json.length-1) {
bar.name = '排班人數';
legends.push('排班人數');
bar.data = json[0].setHistogram;
it.markArea = str;
Series.push(bar);
}
Series.push(it); }
}
//判斷選中的資料型別
if (document.getElementsByName("bm")[1].checked) {
for (var i = 0; i < json.length; i++) { var it = new Item();
var bar = new Bar();
it.name = json[i].setName;
legends.push(json[i].setName);
it.data = json[i].setBare;
if (i == json.length - 1) {
bar.name = '排班人數';
legends.push('排班人數');
bar.data = json[0].setHistogram;
it.markArea = str;
Series.push(bar);
}
Series.push(it); }
}
//console.info(Series);
option.xAxis[0].data = jsons.setXcontent; //控制 顯示的Y軸刻度是自適應還是 統一標準
if ($("#CompanyName").val() == '') {
option.yAxis[0].max = null;
option.yAxis[0].interval = null;
}
else if (document.getElementsByName("bo")[0].checked) {
if (document.getElementsByName("bm")[1].checked) {
option.yAxis[0].max = 80;
option.yAxis[0].interval = 10;
}
else {
option.yAxis[0].max = 8000;
option.yAxis[0].interval = 1000;
}
option.yAxis[1].max = 80;
option.yAxis[1].interval = 10;
}
else if (document.getElementsByName("bo")[1].checked) {
option.yAxis[0].max = null;
option.yAxis[0].interval = null;
option.yAxis[1].max = null;
option.yAxis[1].interval = null;
}
else if (document.getElementsByName("bm")[1].checked) {
option.yAxis[0].max = null;
option.yAxis[0].interval = null;
}
else {
option.yAxis[0].max = 8000;
option.yAxis[0].interval = 1000;
}
//console.info(Series);
option.legend.data = legends;
option.series = Series; // 設定圖表
myChart.setOption(option);// 重新載入圖表
};//後臺資料返回方法程式碼
[WebMethod] //webservice 方法
public void GoodsInfo()
{ #region 初始化
string setColoer = ConfigurationManager.AppSettings["setColoer"].ToString();//顏色配置項
Search sear = new Search();
List<JsonData> data = new List<JsonData>();
JavaScriptSerializer jss = new JavaScriptSerializer();
bool istrue = false;
//控制顏色引數一次
int isone = 1;
#endregion
#region 接收引數
string CompanyName = HttpContext.Current.Request["CompanyName"];
if(CompanyName != "" && CompanyName!=null)
{
string[] sArray = CompanyName.Split('(');
sear.CompanyName = sArray[1].Replace(")", "");
}
sear.dataOn = HttpContext.Current.Request["dataOn"];
#endregion #region 查詢 //這裡就 自由發揮了 #endregion //組裝資料 #region Y軸 String[] xcontent = new String[24];
//同理 #endregion #region 響應資料
ResponData tld = new ResponData();
tld.setXcontent = xcontent;
tld.setData = data;
string strjson = JsonConvert.SerializeObject(tld);
HttpContext.Current.Response.Write(strjson);
#endregion }使用的類
public class JsonData
{ //主資料類
public string setName { get; set; }//legend 名稱
public decimal[] setData { get; set; }//銷售額
public int[] setBare { get; set; }//客數
public List<SetBgc> setColoer { get; set; }//markArea 的顏色
public decimal[] setHistogram { get;set;}// 排班人數
} public class SetBgc
{ //markArea 需 的範圍
public string OneStateTime { get; set; }
public string OneEndTime { get; set; }
public string TwoStateTime { get; set; }
public string TwoEndTime { get; set; }
public string setColor { get; set; }
}