组件封装

src/views/cockpit/common/BarGraph3D.vue

@@ -0,0 +1,196 @@
+<template>
+    <div id="BarGraph3D"></div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    props: {
+        legendData: {
+            type: Array,
+        },
+        xdata: {
+            type: Array,
+        },
+        result: {
+            type: Array,
+        }
+    },
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        init_3DBarGraph_echart() {
+            const _this = this;
+            var dom = document.getElementById("BarGraph3D");
+            var myChart = window.echarts.init(dom);
+            // 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)) },
+                ]
+            }
+
+            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: _this.$props.legendData,      //图例名称
+
+                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);
+
+        },
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() {
+        this.init_3DBarGraph_echart();
+    }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped>
+#BarGraph3D {
+    z-index: -1;
+    left: -2rem;
+    top: 0.1rem;
+    width: 26rem;
+    height: 10rem;
+}
+</style>

src/views/cockpit/tdsc.vue

@@ -13,7 +13,8 @@
 
 
     <div v-show="tab == options[1].value">
-      <div id="scje_echart"></div>
+      <BarGraph3D :legendData="['计划收储', '完成收储']"  :xdata="xdata"/>
+      <!-- <div id="scje_echart"></div> -->
     </div>
     <div v-show="tab == options[0].value">
       <div class="content_scjd">
@@ -55,9 +56,9 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from '@/api/cockpitNew'
-
+import BarGraph3D from './common/BarGraph3D.vue';
 export default {
-  components: {},
+  components: {BarGraph3D},
   data() {
     return {
       tab: 'scjd',
@@ -66,6 +67,7 @@ export default {
         { value: "scjd", label: "收储进度" },
         { value: "scjgg", label: "收储结构" },
       ],
+      xdata:['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"]
     };
   },
   //监听属性 类似于data概念
@@ -432,7 +434,7 @@ export default {
   mounted() {
     const that = this;
     this.$nextTick((res) => {
-      that.init_scje_echart();
+      // that.init_scje_echart();
       that.init_dial_watch_scjg();
       this.init_scjd();
     })