封装图表

src/views/cockpit/common/BarGraph3D.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="BarGraph3D"></div>
+    <div id="BarGraph3D" ref="BarGraph3D"></div>
 </template>
 
 <script>
@@ -19,7 +19,10 @@ export default {
         }
     },
     data() {
-        return {};
+        return {
+            chart: null,
+            option: null,
+        };
     },
     //监听属性 类似于data概念
     computed: {},
@@ -29,17 +32,13 @@ export default {
     methods: {
         init_3DBarGraph_echart() {
             const _this = this;
-            var dom = document.getElementById("BarGraph3D");
-            var myChart = window.echarts.init(dom);
+            _this.chart = echarts.init(this.$refs.BarGraph3D);
             // Mock数据
             const mockData = {
                 // xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
                 xdata: _this.$props.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)) },
-                ]
+                result: _this.$props.result
             }
 
             const color = [
@@ -50,25 +49,6 @@ export default {
             ]
             const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]
 
-            // tooltip
-            // const tooltip = {
-
-            //     trigger: "axis",
-            //     axisPointer: {
-            //         // 坐标轴指示器，坐标轴触发有效
-            //         type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-            //     },
-            //     padding: [8, 15],
-            //     backgroundColor: "rgba(12, 51, 115,0.8)",
-            //     borderColor: "rgba(3, 11, 44, 0.5)",
-            //     textStyle: {
-            //         color: "rgba(255, 255, 255, 1)"
-            //     },
-            //     formatter: params => {
-            //         let rander = params.map(item => `<div>${item.seriesName}: ${item.value}</div>`).join('')
-            //         return rander
-            //     }
-            // }
             const tooltip = {
                 backgroundColor: 'RGBA(20, 106, 178, 0.4)',
                 trigger: "axis",
@@ -87,32 +67,6 @@ export default {
                 }
             }
 
-            // const tooltip = {
-            //     trigger: 'item',
-            //     backgroundColor: 'none',
-            //     padding: 5,
-            //     formatter: params => {
-            //         let rander = params.map(item => `<div>${item.seriesName}: ${item.value}公顷</div>`).join('')
-            //         return rander
-            //     },
-
-
-            // formatter: function (param) {
-            //     var resultTooltip = "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
-            //         "<div style='text-align:center;'>" + param.name + "</div>" +
-            //         "<div style='padding-top:5px;'>";
-
-            //     resultTooltip +=
-            //         "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + param.color.colorStops[0].color + ";'></span>" +
-            //         "<span style=''> " + param.seriesName + ": </span>" +
-            //         "<span style='color:" + param.color.colorStops[0].color + "'>" + param.value + "</span></span><span>" + "</span></br>"
-
-
-            //     resultTooltip += "</div>";
-
-            //     return resultTooltip
-            // }
-            // }
             const legend = {
                 data: _this.$props.legendData,      //图例名称
 
@@ -214,15 +168,18 @@ export default {
                 zoomOnMouseWheel: false,
             }]
 
-            let option = {
+            _this.option = {
 
                 tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
             }
 
-
-            myChart.setOption(option);
+            this.chart.setOption(this.option);
 
         },
+        setOptions(obj) {
+
+
+        }
     },
     beforeCreate() { }, //生命周期 - 创建之前
     created() { }, //生命周期 - 创建完成（可以访问当前this实例）

src/views/cockpit/tdsc.vue

@@ -13,7 +13,7 @@
 
 
     <div v-show="tab == options[1].value">
-      <BarGraph3D :legendData="['计划收储', '完成收储']"  :xdata="xdata"/>
+      <BarGraph3D :legendData="legendData" :xdata="xdata" :result="result" />
       <!-- <div id="scje_echart"></div> -->
     </div>
     <div v-show="tab == options[0].value">
@@ -58,7 +58,7 @@
 import { QueryOne, QueryList } from '@/api/cockpitNew'
 import BarGraph3D from './common/BarGraph3D.vue';
 export default {
-  components: {BarGraph3D},
+  components: { BarGraph3D },
   data() {
     return {
       tab: 'scjd',
@@ -67,7 +67,12 @@ export default {
         { value: "scjd", label: "收储进度" },
         { value: "scjgg", label: "收储结构" },
       ],
-      xdata:['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"]
+      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)) },
+      ]
     };
   },
   //监听属性 类似于data概念