Ajax+Echarts動態新增成組柱狀圖
阿新 • • 發佈：2019-01-09
因公司專案原因，最近需要用到ECharts，按照官網的例項以及試驗，完成了需求的報表
效果圖：
首先先去官網下載要開發的元件，ECharts還是非常厲害的。話不多說，先上前端程式碼
<head> <script src="echarts/echarts.js" type="text/javascript"></script> <script src="echarts/echarts.min.js" type="text/javascript"></script> <script src="echarts/jquery-3.2.1.min.js" type="text/javascript"></script> </head>
<body>
<input id="Dt" name="Dt" value="2017-12-12" />
<button id="check" type="button">
<div id="main" style="height: 510px;">
</body>// 路徑配置 require.config({ paths: { echarts: 'echarts' } }); require( [ 'echarts', 'echarts/chart/bar' // bar/lin/tree ], function(ec) { var myChart1 = ec.init(document.getElementById('main')); var option = { title: { text: '', subtext: '' }, tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 預設為直線，可選為：'line' | 'shadow' }, formatter: function(params) { var avg = divWidth / 25; var relVal = params[0].name + "<br/>"; for (var i = 1; i < params.length; i++) {這裡是滑鼠懸浮顯示的內容 relVal += params[i].seriesName + ' : ' + (params[i].value / avg).toFixed(1) + "H<br/>"; } return relVal; } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value', show: false, min: 0, max: divWidth }, { type: 'category', data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "00:00"], show: true } ], yAxis: { type: 'category', splitLine: { show: false }, data: ['OP10', 'OP20', '線上檢測', '氣密檢測'] }, series: [ { name: '輔助',輔助項其實是透明的，看起來第一段柱子從空中開始，其實是因為輔助頂起了第一段 type: 'bar', stack: '總量', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [0, 0, 0, 0]如果都是0的話，那就從0處開始往右延長 }, { name: '執行', type: 'bar', stack: '總量', itemStyle: { //通常情況下： normal: { color: 'green' }, //滑鼠懸停時： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] }, { name: '故障', type: 'bar', stack: '總量', itemStyle: { //通常情況下： normal: { color: 'blue'//'rgb(164,205,238)' }, //滑鼠懸停時： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] }, { name: '待機', type: 'bar', stack: '總量', itemStyle: { //通常情況下： normal: { color: 'yellow'//'rgb(195,229,235)' }, //滑鼠懸停時： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] }, { name: '關機', type: 'bar', stack: '總量', itemStyle: { //通常情況下： normal: { color: 'red'//'rgb(195,229,135)' }, //滑鼠懸停時： emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: { normal: { show: true, position: 'inside' } }, data: [] } ] }; $.ajax({Ajax讀取後臺資料庫的資料 type: 'post', url: 'EQStateHisHandler.ashx?action=QCBarChart&SelectDate=' + ddate + '&divWidth=' + divWidth, data: {}, dataType: 'json', async: false, success: function(result) { if (result) { for (var i = 0; i < result.length; i++) {根據資料庫的資訊動態新增柱狀圖的柱子 var aa = result[i]; // 巢狀迴圈賦值 for (var j = 0; j < aa.ChectTimeList.length; j++) { var seriesCount = option.series.length; if (j < seriesCount) { option.series[j].data[i] = aa.ChectTimeList[j];預設是四組資料，所以直接為ECharts賦值就行 } else { var ckType = aa.ChectType[j]; var seriesName = ''; var itemStyle; switch (ckType) {根據狀態，選擇要增加的柱子是什麼顏色的，代表什麼意思。 case 1: seriesName = '執行'; itemStyle = { normal: { color: 'green' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; case 2: seriesName = '故障'; itemStyle = { normal: { color: 'blue' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; case 3: seriesName = '待機'; itemStyle = { normal: { color: 'yellow' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; case 4: seriesName = '關機'; itemStyle = { normal: { color: 'red' }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }; break; } var newSeries = { data: [aa.ChectTimeList[j]], name: seriesName, type: 'bar', stack: '總量', itemStyle: itemStyle, label: { normal: { show: true, position: 'inside' } } }; option.series.push(newSeries);將新的柱子項新增到報表中 } } } myChart1.setOption(option);繫結並展示 } }, error: function(errorMsg) { alert("request data failed!!!"); } }); } );