echarts 柱狀圖

時間 2019-11-15

標籤 echarts 柱狀简体版

原文原文鏈接

效果：ajax

圖一：Y軸顯示百分比柱狀圖定點顯示數量個數json

圖二：x軸相同日期對應的每一個柱子顯示不一樣類型的數量echarts

代碼：dom

容器：ide

1 <div id="badQuaAnalyze"></div>
2 <div id="unqualified"></div>

配置項：url

  1         //圖1
  2         var badQuaAnalyze = echarts.init(document.getElementById('badQuaAnalyze'));
  3         //圖2
  4         var unqualified = echarts.init(document.getElementById('unqualified'));
  5         //配置項和數據
  6         //圖1
  7         var badQuaAnalyzeOption = {
  8             backgroundColor: 'rgba(255, 255, 255, 1)',
  9             legend: {
 10                 data:[{name:'數量',icon:'rect'}],
 11                 textStyle:{
 12                     color:'#222222',
 13                     fontSize:12
 14                 },
 15                 y: 'bottom',
 16                 x: 'center' ,
 17             },
 18             tooltip : {
 19                 trigger: 'axis',
 20                 axisPointer : {
 21                     type : 'shadow'
 22                 },
 23                 formatter: function (params) {
 24                     var str = params[0]['axisValue'] + '<br>' + '不合格百分比:'+params[0]['value'] + '%';
 25                     return str;
 26                 }
 27             },
 28             xAxis: [
 29                 {
 30                     type: 'category',
 31                     axisLine:{
 32                         lineStyle:{
 33                             color:'#999999',
 34                             width:1
 35                         }
 36                     },
 37                     data: [],
 38                     axisPointer: {
 39                         type: 'shadow'
 40                     },
 41                     axisLabel:{
 42                         interval:0,
 43                         rotate:0,
 44                         formatter:function(value){
 45 //                            return value.length > 5?value.substring(0,5)+'...':value;
 46                             return value;
 47                         }
 48                     }
 49                 }
 50             ],
 51             yAxis: [
 52                 {
 53                     type: 'value',
 54                     splitLine:{
 55                         show:true  ,
 56                         lineStyle:{
 57                             color:'#021439',
 58                             width: 1
 59                         }
 60                     },
 61                     axisLine:{
 62                         lineStyle:{
 63                             color:'#999999',
 64                             width:1
 65                         }
 66                     },
 67                     axisLabel: {
 68                         show: true,
 69                         interval: 'auto',
 70                         formatter: '{value} %'
 71                     },
 72                     name: '單位（%）',
 73                 }
 74             ],
 75         };
 76         //圖2
 77         var unqualifiedOption = {
 78             backgroundColor: 'rgba(255, 255, 255, 1)',
 79             tooltip : {
 80                 trigger: 'axis',
 81                 axisPointer : {
 82                     type : 'shadow'
 83                 },
 84                 formatter: function (params) {
 85                     var str = params[0]['axisValue'] + '<br>';
 86                     $.each(params,function (i,v) {
 87                         if (v.value) {
 88                             str += v.seriesName + ':' + v.value + '<br>';
 89                         }
 90                     })
 91                     return str;
 92                 }
 93             },
 94             xAxis: [
 95                 {
 96                     type: 'category',
 97                     axisLine:{
 98                         lineStyle:{
 99                             color:'#999999',
100                             width:1
101                         }
102                     },
103                     data: [],
104                     axisPointer: {
105                         type: 'shadow'
106                     },
107                     axisLabel:{
108                         interval:0,
109                         rotate:0,
110                         formatter:function(value){
111 //                            return value.length > 10?value.substring(0,10)+'...':value;
112                             return value;
113                         }
114                     }
115                 }
116             ],
117             yAxis: [
118                 {
119                     type: 'value',
120                     splitLine:{
121                         show:true  ,
122                         lineStyle:{
123                             color:'#021439',
124                             width: 1
125                         }
126                     },
127                     axisLine:{
128                         lineStyle:{
129                             color:'#999999',
130                             width:1
131                         }
132                     },
133                     name: '不合格數量',
134                 }
135             ],
136         };
137         //使用剛指定的配置項和數據顯示圖表。
138         badQuaAnalyze.setOption(badQuaAnalyzeOption);//圖1
139         unqualified.setOption(unqualifiedOption);//圖2
140         getbadQuaAnalyzeData();//圖1
141         getUnqualifiedData();//圖2
142 
143         //獲取圖表數據並插入
144         //圖1
145         function getbadQuaAnalyzeData() {
146 //              $.ajax({
147 //                  url: '',
148 //                  data: {},
149 //                  type: "POST",
150 //                  dataType: 'json',
151 //                  success: function(result){
152             var result = {
153                 meg:'處理成功',
154                 req:true,
155                 rows:[
156                     {
157                         name: "部件1",
158                         num: 55,//數量
159                         percent: 66,//百分比
160                     },
161                     {
162                         name: "部件2",
163                         num: 45,//數量
164                         percent: 56,//百分比
165                     },
166                     {
167                         name: "部件3",
168                         num: 35,//數量
169                         percent: 46,//百分比
170                     },
171                     {
172                         name: "部件4",
173                         num: 75,//數量
174                         percent: 96,//百分比
175                     },
176                     {
177                         name: "部件5",
178                         num: 5,//數量
179                         percent: 10,//百分比
180                     },
181                     {
182                         name: "部件6",
183                         num: 30,//數量
184                         percent: 36,//百分比
185                     },
186                     {
187                         name: "部件7",
188                         num: 40,//數量
189                         percent: 50,//百分比
190                     },
191 
192                 ]
193             }
194             var _name = [], _markPoint = [] , _percent = [];
195             console.log(result);
196             if (result.rows!=null&&result.rows.length > 0) {
197                 $.each(result.rows,function (i,v) {
198                     _name.push(v.name);
199                     _percent.push(v.percent);
200                     _markPoint.push({name : '數量', value : v.num, xAxis: i, yAxis: v.percent})
201                 });
202                 badQuaAnalyze.setOption({
203                     series : [
204                         {
205                             name:'數量',
206                             barWidth: '30%',
207                             type:'bar',
208                             itemStyle : {
209                                 normal : {
210                                     lineStyle:{
211                                         color:'#E09C19'
212                                     },
213                                     color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
214                                 }
215                             },
216                             data:_percent,
217                             markPoint : {
218                                 data : _markPoint
219                             },
220                         },
221                     ],
222                     xAxis : [
223                         {
224                             data:_name
225                         }
226                     ]
227                 });
228             }
229 //                  }
230 //              });
231         }
232         //圖2
233         function getUnqualifiedData() {
234 //              $.ajax({
235 //                  url: '',
236 //                  data: {},
237 //                  type: "POST",
238 //                  dataType: 'json',
239 //                  success: function(result){
240 
241 
242 
243 
244             //圖標的數據  是根據數據的順序來的   若是須要圖標X軸的時間順序  請返回按時間排序的數據
245             //同一個時間（"2017-05-24"）  相同名稱的（類型7）   後者的（num）數量會覆蓋前者   並不會累加
246             var result = {
247                 meg:'處理成功',
248                 req:true,
249                 rows:[
250                     {
251                         title:'標題',
252                         time: "2017-05-24",
253                         name:'類型2',
254                         num: 54,//數量
255                     },
256                     {
257                         title:'標題',
258                         time: "2017-05-24",
259                         name:'類型1',
260                         num: 54,//數量
261                     },
262                     {
263                         title:'標題',
264                         time: "2017-05-24",
265                         name:'類型4',
266                         num: 54,//數量
267                     },
268 
269 
270 
271                     {
272                         title:'標題',
273                         time: "2017-05-23",
274                         name:'類型5',
275                         num: 43,//數量
276                     },
277                     {
278                         title:'標題',
279                         time: "2017-05-23",
280                         name:'類型4',
281                         num: 43,//數量
282                     },
283                     {
284                         title:'標題',
285                         time: "2017-05-23",
286                         name:'類型2',
287                         num: 43,//數量
288                     },
289 
290 
291 
292 
293                     {
294                         title:'標題',
295                         time: "2017-05-22",
296                         name:'類型5',
297                         num: 32,//數量
298                     },
299 
300                     {
301                         title:'標題',
302                         time: "2017-05-22",
303                         name:'類型2',
304                         num: 32,//數量
305                     },
306                     {
307                         title:'標題',
308                         time: "2017-05-22",
309                         name:'類型7',
310                         num: 32,//數量
311                     },
312 
313 
314 
315 
316                     {
317                         title:'標題',
318                         time: "2017-05-25",
319                         name:'類型2',
320                         num: 33,//數量
321                     },
322 
323 
324 
325                     {
326                         title:'標題',
327                         time: "2017-05-21",
328                         name:'類型4',
329                         num: 21,//數量
330                     },
331                     {
332                         title:'標題',
333                         time: "2017-05-21",
334                         name:'類型2',
335                         num: 21,//數量
336                     },
337                     {
338                         title:'標題',
339                         time: "2017-05-21",
340                         name:'類型7',
341                         num: 21,//數量
342                     },
343 
344                 ]
345             }
346 
347             var _time = [],_name = [],_series = [];
348             if (result.rows!=null&&result.rows.length > 0) {
349                 $.each(result.rows,function (i,v) {//循環接口返回數據
350                     if ($.inArray(v.time, _time) < 0 ) {//得到X軸橫座標
351                         _time.push(v.time);
352                     }
353                     if ($.inArray(v.name, _name) < 0 ) {//沒有出現過的名字（如：類型7） 建立一條
354                         var current = {
355                             name: v.name,
356                             type: 'bar',
357                             stack: '總量',
358                             label: {
359                                 normal: {
360                                     show: true,
361                                     position: 'inside'
362                                 }
363                             },
364                             data: []
365                         }
366                         _name.push(v.name);//獲取一組圖例
367                         $.each(_time,function (l,m) {
368                             if (m === v.time) {
369                                 current.data[l] = v.num;//確保插入到對應的時間座標處
370                             }
371                         })
372                         _series.push(current)
373                     } else {//重複的名字
374                         $.each(_series,function (j,o) {
375                             if (o.name === v.name) {
376                                 $.each(_time,function (a,b) {
377                                     if (b === v.time) {
378                                         o.data[a] = v.num;//確保插入到對應的時間座標處
379                                     }
380                                 })
381 
382                             }
383                         })
384                     }
385                 });
386                 unqualified.setOption({
387                     legend: {
388                         data: _name
389                     },
390                     title : {
391                         text: result.rows[0].title,
392                         subtext: '',
393                         x:'left'
394                     },
395                     series : _series,
396                     xAxis : [
397                         {
398                             data:_time
399                         }
400                     ]
401                 });
402             }
403 //                  }
404 //              });
405         }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。