数据中心数据绑定

templates/backstageNet/datacenter/contrast.html

@@ -296,10 +296,22 @@
                     farm = dat[i][j].farm;
                 }
                 if (i == 5 - 1) {
+                    var currYear = new Date().getFullYear();
+                    line_option.xAxis.data = [currYear-3+'年',currYear-2+'年',currYear-1+'年',currYear+'年']
                     line_option.series[0] = {
                         type: 'line',
                         name: farm,
                         data: arr,
+                        itemStyle: {
+                            normal: {
+                                label: {
+                                    show: true,
+                                    position: 'top',
+        //                             formatter: '{c}'
+                                    formatter: '￥{c}'
+                                },
+                            },
+                        },
                     }
                     var lineChart = echarts.init(document.getElementById('line-chart'));
                     lineChart.setOption(line_option, true);
@@ -356,7 +368,7 @@
             xAxis: {
                 type: 'category',
                 boundaryGap: false,
-                data: ['2016年', '2017年', '2018年', '2019年']
+                data: []
             },
             yAxis: {
                 type: 'value',

templates/backstageNet/datacenter/cropdata.html

@@ -168,17 +168,33 @@
         // 指定图表的配置项和数据
         var line_option = {
             title: {
-                text: '生长周期（天）',
+                text: '面积收益对比',
                 textStyle: {
                     color: '#029eef'
                 }
             },
 
-            tooltip: {
+            tooltip : {
                 trigger: 'axis',
+                formatter: function (params, ticket, callback) {
+                    console.log(params);
+                    var showHtm='<span>'+params[0][1]+'</span>农场<br>';
+                    for(var i=0;i<params.length;i++){
+                        //名称
+                        var text = params[i][0];
+                        //值
+                        var value = params[i].value;
+                        if(text == '面积'){
+                            showHtm += text+'：'+ value+'亩<br>'
+                        }else{
+                            showHtm += text+'：'+ value+'元<br>'
+                        }
+                    }
+                    return showHtm;
+                },
             },
             legend: {
-                data: ['羊', '牛', '梨', '苹果', '香蕉']
+                data: ['面积','收益']
             },
             grid: {
                 left: '0%',
@@ -193,15 +209,17 @@
                     saveAsImage: { show: true }
                 }
             },
-            xAxis: {
-                type: 'category',
-                boundaryGap: false,
-                data: ['2016年', '2017年', '2018年', '2019年']
-            },
-            yAxis: {
-                type: 'value',
-                data: []
-            },
+            xAxis: [
+                {
+                    type: 'category',
+                    data: []
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'value'
+                }
+            ],
             dataZoom: {
                 show: false,
                 // start: 70
@@ -211,10 +229,10 @@
             ]
         };
 
-        setTimeout(function () {
-            var lineChart = echarts.init(document.getElementById('line-chart'));
-            lineChart.setOption(line_option, true);
-        })
+        // setTimeout(function () {
+        //     var lineChart = echarts.init(document.getElementById('line-chart'));
+        //     lineChart.setOption(line_option, true);
+        // })
 
         // 1基于准备好的dom，初始化echarts实例
         var pieChart = echarts.init(document.getElementById('pie-chart'));
@@ -285,22 +303,6 @@
                 }
             ]
         };
-        // setTimeout(function () {
-        //     var pieChart = echarts.init(document.getElementById('pie-chart'));
-        //     pieChart.setOption(pie_option, true);
-        //     pieChart.on("click", function (param) {
-        //         console.log(param)
-        //         var lineChart = echarts.init(document.getElementById('line-chart'));
-        //         var price = [];
-        //         for (var i = 0; i < 4; i++) {
-        //             price.push(Math.floor(Math.random() * 100));
-        //             if (i == 3) {
-        //                 line_option.series[0].data = price
-        //                 lineChart.setOption(line_option, true);
-        //             }
-        //         }
-        //     });
-        // })
 
         // 1基于准备好的dom，初始化echarts实例
         var barChart = echarts.init(document.getElementById('bar-chart'));
@@ -364,28 +366,93 @@
             success: function (data) {
                 if (data.dat.length) {
                     var pieData = [];
+                    var lineChartName = [];
+                    var lineMoneyData = [];
+                    var lineAreaData = [];
                     for (var i = 0; i < data.dat.length; i++) {
                         var currData = {
                             "value": data.dat[i].area,
                             "name": data.dat[i].name
                         }
                         pieData.unshift(currData);
+                        lineChartName.unshift(data.dat[i].name);
+                        lineMoneyData.unshift(data.dat[i].money);
+                        lineAreaData.unshift(data.dat[i].area);
                         if (i == data.dat.length - 1) {
                             pie_option.series[0].data = pieData;
                             var pieChart = echarts.init(document.getElementById('pie-chart'));
                             pieChart.setOption(pie_option, true);
-                            pieChart.on("click", function (param) {
-                                console.log(param)
-                                var lineChart = echarts.init(document.getElementById('line-chart'));
-                                var price = [];
-                                for (var i = 0; i < 4; i++) {
-                                    price.push(Math.floor(Math.random() * 100));
-                                    if (i == 3) {
-                                        line_option.series[0].data = price
-                                        lineChart.setOption(line_option, true);
+
+                            line_option.xAxis[0].data = lineChartName;
+                            line_option.series[0] = {
+                                data:lineMoneyData,
+                                type:'bar',
+                                name:'收益',
+                                itemStyle: {
+                                    normal: {
+                                        color: function(params) {
+                                            // build a color map as your need.
+                                            var colorList = [
+                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                            ];
+                                            return colorList[params.dataIndex]
+                                        },
+                                        label: {
+                                            show: true,
+                                            position: 'top',
+                //                             formatter: '{c}'
+                                            formatter: '￥{c}'
+                                        },
+                                    },
+                                },
+                            };
+                            line_option.series[1] = {
+                                data:lineAreaData,
+                                type:'bar',
+                                name:'面积',
+                                itemStyle: {
+                                    normal: { //静态的时候显示的默认样式n
+                　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
+                                        color: function(params) {
+                                            // build a color map as your need.
+                                            var colorList = [
+                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                            ];
+                                            return colorList[params.dataIndex]
+                                        },
+                　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了
+                                        label: {
+                                            show: true,
+                                            position: 'top',
+                                            formatter: '{c}亩'
+                                        },
+                                    },
+                                    emphasis:{  //鼠标移入动态的时候显示的默认样式
+                                    // 　　color:'green'
                                     }
-                                }
-                            });
+                                },
+                                barWidth:20,
+                            };
+                            // var linelegend = { data:lineChartName };
+                            // line_option.legend = linelegend;
+                            lineChart.setOption(line_option, true);
+
+                            // pieChart.on("click", function (param) {
+                            //     console.log(param)
+                            //     var lineChart = echarts.init(document.getElementById('line-chart'));
+                            //     var price = [];
+                            //     for (var i = 0; i < 4; i++) {
+                            //         price.push(Math.floor(Math.random() * 100));
+                            //         if (i == 3) {
+                            //             line_option.series[0].data = price
+                            //             lineChart.setOption(line_option, true);
+                            //         }
+                            //     }
+                            // });
 
                         }
                     }

templates/backstageNet/datacenter/industrydata.html

@@ -137,7 +137,7 @@
                             <tr>
                                 <td>农场名称</td>
                                 <td>农场面积</td>
-                                <td>负责人</td>
+                                <!-- <td>负责人</td> -->
                                 <td>农场收益</td>
                             </tr>
                         </thead>
@@ -414,7 +414,7 @@
             for (var i = 0; i < data.length; i++) {
                 var manage = data[i].manage ? data[i].manage : '暂无';
                 html += "<tr>";
-                html += "<td>" + data[i].farm + "</td><td>" + data[i].area + "</td><td><span class='redClolr'>" + manage + "</span></td><td>" + data[i].money + "</td>";
+                html += "<td>" + data[i].farm + "</td><td>" + data[i].area + "</td><td>" + data[i].money + "</td>";
                 html += "</tr>";
                 if (i == data.length - 1) {
                     $(table).html(html);