报建项目

src/store/store.js

@@ -95,6 +95,11 @@ var store2 = {
 
             }
         },
+        cockpit_bjxm:{
+            csbj:{
+                csbj_echart:{}
+            }
+        },
         cockpit_gkzb: {
             // 生态保护红线面积
             mj: 0,

src/views/cockpit/bjxm.vue

@@ -31,6 +31,7 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import { QueryOne, QueryList } from "../../api/cockpitNew";
 
 export default {
   components: {},
@@ -43,6 +44,37 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    async init_bjxm_echart_info(params) {
+      const that = this;
+      let obj = {
+        jscType: 'jsc_bjxm_csbj_yffl',
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+        id: params ? params.id : '4602'
+      };
+      let data = await QueryList(obj);
+      console.log('data: ', data);
+      let xAxis = [];
+      let bat_data = [];
+      let line_data = [];
+
+      data.data.forEach(element => {
+
+        xAxis.push(element.yf);
+        bat_data.push(element.sj_mj);
+        line_data.push(element.sj_number);
+
+
+      });
+      store.state.cockpit_bjxm.csbj.csbj_echart = {
+        xAxis: xAxis,
+        bat_data: bat_data,
+        line_data: line_data,
+
+      }
+      this.init_bjxm_echart();
+
+    },
     init_bjxm_echart() {
       var myChart = echarts.init(document.getElementById("bjxm_echart"));
       // 柱状图的宽度，y是x的一半
@@ -98,11 +130,16 @@ export default {
       echarts.graphic.registerShape('CubeRight', CubeRight)
       echarts.graphic.registerShape('CubeTop', CubeTop)
       // 数据
-      const VALUE = [210.9, 260.8, 204.2, 504.9, 740.5]
+      const xAxis = store.state.cockpit_bjxm.csbj.csbj_echart.xAxis
+      const bat_data = store.state.cockpit_bjxm.csbj.csbj_echart.bat_data
+      const line_data = store.state.cockpit_bjxm.csbj.csbj_echart.line_data
+
       let option = {
         //你的代码
         backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
         tooltip: {
+          show: false,
+
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
@@ -121,7 +158,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['崖州区', '天崖区', '吉阳区', '海棠区', '育才区'],
+          data: xAxis,
           axisLine: {
             lineStyle: {
               color: '#BCD3E5'
@@ -144,8 +181,8 @@ export default {
         yAxis: [
           {
             min: 0,
-            max: 1200,
-            interval: 200,
+            max: 20,
+            interval: 5,
             type: 'value',
             name: '用地面积(km2)',
             axisLine: {
@@ -173,8 +210,8 @@ export default {
           },
           {
             min: 0,
-            max: 1200,
-            interval: 200,
+            max: 20,
+            interval: 5,
             name: '项目数(个)',
             type: 'value',
             axisLine: {
@@ -220,78 +257,78 @@ export default {
                 type: 'group',
                 children: [
                   {
-                  type: 'CubeLeft',
-                  shape: {
-                    api,
-                    xValue: api.value(0),
-                    yValue: api.value(1),
-                    x: location[0],
-                    y: location[1],
-                    xAxisPoint: api.coord([api.value(0), 0])
-                  },
-                  style: {
-                    fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                      offset: 0,
-                      color: 'rgba(34, 129, 209, 0.8)'
+                    type: 'CubeLeft',
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0])
                     },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(34, 129, 209, 0.8)'
+                    style: {
+                      fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: 'rgba(34, 129, 209, 0.8)'
+                      },
+                      {
+                        offset: 0.8,
+                        color: 'rgba(34, 129, 209, 0.8)'
 
 
+                      }
+                      ])
                     }
-                    ])
-                  }
-                },
-                {
-                  type: 'CubeRight',
-                  shape: {
-                    api,
-                    xValue: api.value(0),
-                    yValue: api.value(1),
-                    x: location[0],
-                    y: location[1],
-                    xAxisPoint: api.coord([api.value(0), 0])
                   },
-                  style: {
-                    fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                      offset: 0,
-                      color: 'rgba(97, 173, 237, 0.8)'
+                  {
+                    type: 'CubeRight',
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0])
                     },
-                    {
-                      offset: 0.8,
-                      color: 'rgba(97, 173, 237, 0.8)'
+                    style: {
+                      fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: 'rgba(97, 173, 237, 0.8)'
+                      },
+                      {
+                        offset: 0.8,
+                        color: 'rgba(97, 173, 237, 0.8)'
+                      }
+                      ])
                     }
-                    ])
-                  }
-                }, {
-                  type: 'CubeTop',
-                  shape: {
-                    api,
-                    xValue: api.value(0),
-                    yValue: api.value(1),
-                    x: location[0],
-                    y: location[1],
-                    xAxisPoint: api.coord([api.value(0), 0])
-                  },
-                  style: {
-                    fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                      offset: 0,
-                      color: 'rgba(60, 167, 255, 1)'
-
+                  }, {
+                    type: 'CubeTop',
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0])
                     },
-                    {
-                      offset: 1,
-                      color: 'rgba(135, 200, 255, 1)'
+                    style: {
+                      fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: 'rgba(60, 167, 255, 1)'
+
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(135, 200, 255, 1)'
 
+                      }
+                      ])
                     }
-                    ])
-                  }
-                }]
+                  }]
               }
             },
 
-            data: VALUE
+            data: bat_data
           },
           {
             type: 'line',
@@ -301,7 +338,7 @@ export default {
                 color: '#FFCC64'  // 折线的颜色
               }
             },
-            data: VALUE,
+            data: line_data,
           },
         ]
       };
@@ -312,7 +349,9 @@ export default {
   created() { }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   mounted() {
-    this.init_bjxm_echart();
+    this.$nextTick((res) => {
+      this.init_bjxm_echart_info();
+    })
   }, //生命周期 - 挂在完成
   beforeUpdate() { }, //生命周期 - 更新之前
   updated() { }, //生命周期 - 更新之后

src/views/viewer.vue

@@ -13,7 +13,7 @@
             <!-- <ser-center></ser-center> -->
             <JSYD ref="gkzb_ref" />
             <JCBD />
-            <BJXM />
+            <BJXM ref="bjxm_ref"/>
             <TDSC ref="tdsc_ref" />
             <HYSY ref="hysy_ref" />
             <TDSY ref="tdgy_ref" />
@@ -108,6 +108,9 @@ export default {
             this.$refs.hysy_ref.init_info(this.params);
             this.$refs.hysy_ref.init_echart_data(this.params);
 
+            // 报建项目
+            
+            this.$refs.bjxm_ref.init_bjxm_echart_info(this.params);
             
 
         },