海域使用使用封装

src/views/cockpit/common/BarGraph3D.vue

@@ -18,6 +18,17 @@ export default {
             type: Array,
         }
     },
+    watch: { // 监听到数据然后赋值
+        legendData(oldval, newval) {
+            this.ChangeData()
+        },
+        xdata(oldval, newval) {
+            this.ChangeData()
+        }, result(oldval, newval) {
+            this.ChangeData()
+        },
+        deep: true
+    },
     data() {
         return {
             chart: null,
@@ -30,15 +41,17 @@ export default {
     watch: {},
     //方法集合
     methods: {
-        init_3DBarGraph_echart() {
+        init_3DBarGraph_echart(legendData, xdata, result) {
+            console.log("asdasd");
+            
             const _this = this;
             _this.chart = echarts.init(this.$refs.BarGraph3D);
             // Mock数据
             const mockData = {
                 // xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
-                xdata: _this.$props.xdata,
+                xdata: xdata,
 
-                result: _this.$props.result
+                result: result
             }
 
             const color = [
@@ -68,7 +81,7 @@ export default {
             }
 
             const legend = {
-                data: _this.$props.legendData,      //图例名称
+                data: legendData,      //图例名称
 
                 textStyle: { fontSize: 12, color: '#fff' },
                 itemWidth: 24,
@@ -176,16 +189,16 @@ export default {
             this.chart.setOption(this.option);
 
         },
-        setOptions(obj) {
-
-
+        setOptions(legendData, xdata, result) {
+            this.init_3DBarGraph_echart(legendData, xdata, result);
         }
     },
     beforeCreate() { }, //生命周期 - 创建之前
     created() { }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     mounted() {
-        this.init_3DBarGraph_echart();
+        const _this = this;
+        // this.init_3DBarGraph_echart(_this.$props.legendFlag, _this.$props.xdata, _this.$props.result);
     }, //生命周期 - 挂在完成
     beforeUpdate() { }, //生命周期 - 更新之前
     updated() { }, //生命周期 - 更新之后

src/views/cockpit/hysy.vue

@@ -36,9 +36,7 @@
                     </div>
                 </div>
             </div>
-            <div id="hysyEchart">
-
-            </div>
+            <BarGraph3D ref="hysy_bar_graph" />
         </div>
     </div>
 </template>
@@ -46,10 +44,22 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
+import BarGraph3D from './common/BarGraph3D.vue';
+
 export default {
-    components: {},
+    components: { BarGraph3D },
     data() {
         return {
+            legendData: ['计划收储', '完成收储'],
+            xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
+            result: [
+                { name: '计划收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
+                { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
+            ],
+
+            // legendData: [],
+            // xdata: [],
+            // result: []
         };
     },
     //监听属性 类似于data概念
@@ -126,34 +136,34 @@ export default {
             }
 
             // yAxis
-            const yAxis =  [
-          {
-            min: 0,
-            name: '公顷',
-            type: 'value',
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#BCD3E5'
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: "dashed",
-                color: "rgba(255,255,255,0.1)"
-              },
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: true,
-              fontSize: 12,
-
-            },
-            boundaryGap: ['20%', '20%']
-            },]
+            const yAxis = [
+                {
+                    min: 0,
+                    name: '公顷',
+                    type: 'value',
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: '#BCD3E5'
+                        }
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "dashed",
+                            color: "rgba(255,255,255,0.1)"
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        fontSize: 12,
+
+                    },
+                    boundaryGap: ['20%', '20%']
+                },]
             // const yAxis = [{
             //     axisTick: { show: false },
             //     axisLine: { show: false },
@@ -464,17 +474,18 @@ export default {
 
             })
 
-            store.state.cockpit_hysy.echart.xdata = xdata
-            store.state.cockpit_hysy.echart.result = result
-            that.init_hysyEchart();
+            that.xdata = xdata;
+            that.result = result;
+            that.legendData = ['计划出让', '完成出让'];
+            this.$refs.hysy_bar_graph.setOptions(this.legendData, this.xdata, this.result);
 
         }
+
     },
     mounted() {
         const that = this;
         this.$nextTick((res) => {
             that.init_dial_watch_hysy();
-
             this.init_info();
             this.init_echart_data();
 

src/views/cockpit/tdsc.vue

@@ -13,7 +13,7 @@
 
 
     <div v-show="tab == options[1].value">
-      <BarGraph3D :legendData="legendData" :xdata="xdata" :result="result" />
+      <BarGraph3D ref="tdsc_bar_graph" />
       <!-- <div id="scje_echart"></div> -->
     </div>
     <div v-show="tab == options[0].value">
@@ -85,147 +85,6 @@ export default {
   }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
-    init_scje_echart() {
-
-      var dom = document.getElementById("scje_echart");
-      var myChart = window.echarts.init(dom);
-      // Mock数据
-      const mockData = {
-        xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
-        result: [
-          { name: '计划收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
-          { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
-        ]
-      }
-
-      const color = [
-        [{ offset: 0, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(249, 180, 71, 0.8)' }, { offset: 1, color: 'rgba(249, 180, 71, 0.8)' }],
-
-        [{ offset: 0, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(97, 173, 237, 0.8)' }, { offset: 1, color: 'rgba(97, 173, 237, 0.8)' }],
-
-      ]
-      const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]
-
-      // tooltip
-      const tooltip = {
-        trigger: "axis",
-        textStyle: { fontSize: '100%' },
-        formatter: params => {
-          let rander = params.map(item => `<div>${item.seriesName}: ${item.value}</div>`).join('')
-          return rander
-        }
-      }
-
-      const legend = {
-        data: ['计划收储', '完成收储'],      //图例名称
-
-        textStyle: { fontSize: 12, color: '#fff' },
-        itemWidth: 24,
-        itemHeight: 15,
-        itemGap: 15,
-        top: '5%',
-        right: '2%',
-        selectedMode: false
-      }
-      const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
-      // xAxis
-      const xAxis = {
-        axisTick: { show: false },
-        axisLine: { lineStyle: { color: '#BCD3E5' } },
-        axisLabel: {
-          textStyle: { fontSize: 12, color: '#BCD3E5' },
-        },
-        axisLabel: {
-          interval: 0,
-          formatter: function (value) {
-            // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
-            if (value.length > 4) {
-              return `${value.slice(0, 4)}...`;
-            } else {
-              return value;
-            }
-          },
-        },
-        data: mockData.xdata,
-      }
-
-      // yAxis
-      const yAxis = [{
-        axisTick: { show: false },
-        axisLine: { show: false },
-        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-        axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
-      }, {
-        show: false,
-        splitLine: { show: false },
-        axisLine: { show: false },
-        axisTick: { show: false },
-      }]
-      const diamondData = mockData.result.reduce((pre, cur, index) => {
-        pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
-        return pre
-      }, [])
-
-      let series = mockData.result.reduce((p, c, i, array) => {
-        p.push({
-          z: i + 1,
-          stack: '总量',
-          type: 'bar',
-          name: c.name,
-          barGap: 18,
-          barWidth: 18,
-          data: c.data,
-          itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
-        }, {
-          z: i + 10,
-          type: 'pictorialBar',
-          symbolPosition: 'end',
-          symbol: 'diamond',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [18, 12],
-          data: diamondData[i],
-          itemStyle: { color: color2[i] },
-          tooltip: { show: false },
-        })
-
-        // 是否最后一个了？
-        if (p.length === (array.length) * 2) {
-          p.push({
-            z: array.length * 2,
-            type: "pictorialBar",
-            symbolPosition: "start",
-            data: mockData.result[0].data,
-            symbol: "diamond",
-            symbolOffset: ["0%", "50%"],
-            symbolSize: [18, 10],
-            itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
-            tooltip: { show: false },
-          })
-          return p
-        }
-
-        return p
-      }, [])
-
-      const dataZoom = [{
-        show: false,
-        type: 'slider',
-        startValue: 0,
-        endValue: 7,
-        moveOnMouseWheel: true,
-        moveOnMouseMove: true,
-        zoomOnMouseWheel: false,
-      }]
-
-      let option = {
-
-        tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
-      }
-
-
-      myChart.setOption(option);
-
-    },
     init_dial_watch_scjg() {
 
       var dom = document.getElementById("dial_watch_scjg");
@@ -439,9 +298,12 @@ export default {
   mounted() {
     const that = this;
     this.$nextTick((res) => {
-      // that.init_scje_echart();
       that.init_dial_watch_scjg();
       this.init_scjd();
+
+
+      this.$refs.tdsc_bar_graph.setOptions(this.legendData, this.xdata, this.result);
+
     })
   },
   beforeUpdate() { }, //生命周期 - 更新之前