nanxixi

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                 });

 

 

//效果图

 

发表于 2021-03-26 13:54  Lzbin  阅读(109)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章:

  • 2022-01-10
  • 2021-05-17
  • 2021-05-05
  • 2021-11-23
  • 2022-01-04
猜你喜欢
  • 2021-03-31
  • 2022-02-02
  • 2022-12-23
  • 2022-01-14
  • 2021-11-21
  • 2022-01-09
  • 2021-12-30
相关资源
相似解决方案