echarts柱状图模型显示后台查出来的数据 

 1 //定义显示的数据
 2 
 3  var _datas = {
 4             chart1: {
 5                 xAxisData: [],
 6                 series: {
 7                     data1: [],
 8                     data2: []
 9                 }
10             }
11         };
12 
13  
14 
15  //模型柱状图
16         var chart1 = echarts.init(document.getElementById('bar1'));
17         function getChartOption1() {
18             return {
19                 legend: {
20                     right: 15,
21                     shape: 'circle',
22                     data: ['单量', '体积']
23                 },
24                 tooltip: {
25                     trigger: 'axis',
26                     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
27                         type: ''        // 默认为直线，可选为：'line' | 'shadow'
28                     }
29                 },
30                 grid: {
31                     left: '3%',
32                     right: '4%',
33                     bottom: '3%',
34                     containLabel: true
35                 },
36                 yAxis: {
37                     splitLine: {
38                         show: false
39                     },
40                     type: 'value',
41                     boundaryGap: [0, 0.01]
42                 },
43                 xAxis: {
44                     type: 'category',
45                     data: _datas.chart1.xAxisData
46                 },
47                 series: [
48                     {
49                         color: ['#3398DB'],
50                         name: '单量',
51                         type: 'bar',
52 
53                         data: _datas.chart1.series.data1
54                     },
55                     {
56                         color: ['#00CC66'],
57                         name: '体积',
58                         type: 'bar',
59                         data: _datas.chart1.series.data2
60                     }
61                 ]
62             };
63         }
64         chart1.setOption(getChartOption1());
65 
66 //接收后台的数据
67 
68   $.get(_reqUrl.getData, _sharedParams.queryModel, function (result) {
69                     console.log(result);
70                     $.msg.closeAll();
71                     var model = result.data;
72                     //数据
73                     var t2 = model.memberCargoTotalSortAmount;
74                     console.log("货量统计")
75                     console.log(t2);
76                     _datas.chart1.xAxisData = $.map(t2, function (m) {
77                         return m.MemberName;
78                     });
79                     _datas.chart1.series.data1 = $.map(t2, function (m) {
80                         return m.TotalOrder;
81                     });
82                     _datas.chart1.series.data2 = $.map(t2, function (m) {
83                         return m.TotalVolume;
84                     });
85                     chart1.setOption(getChartOption1());            
86                 });

 

 

//效果图

 

posted @ 2021-03-26 13:54  东方李  阅读(385)  评论(0)    收藏  举报