国有供应

src/views/cockpit/tdsy.vue

@@ -102,6 +102,8 @@
       </div>
       <div v-show="left_value == left_options[0].value && right_value == right_options[1].value">
         国有/结构
+        <div id="gy_jg_echart"></div>
+
       </div>
       <div v-show="left_value == left_options[1].value && right_value == right_options[1].value">
         集体/结构
@@ -157,6 +159,147 @@ export default {
   created() { }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
+    init_gy_jg_echart() {
+
+      var dom = document.getElementById("gy_jg_echart");
+      var myChart = window.echarts.init(dom);
+      // Mock数据
+      const mockData = {
+        xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
+        result: [
+          { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
+          { name: '完成收储', data: [...new Array(33)].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: '0%',
+        right: '2%',
+        selectedMode: false
+      }
+      const grid = { top: '15%', left: '12%', right: '2%', bottom: '10%' }
+      // 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);
+
+    },
     changeChartsLeft() {
 
     }, changeChartsRight() {
@@ -567,6 +710,8 @@ export default {
       that.getInfo();
       that.init_echart();
       that.init_dial_watch_scjg();
+      that.init_gy_jg_echart();
+
       this.$refs.tdgy_echart_gyjd.setOptions([
         { name: "未供应", value: 12 },
         { name: "以划拨", value: 21 },
@@ -948,4 +1093,12 @@ export default {
   top: 47rem;
   left: 2rem;
 }
+
+#gy_jg_echart {
+  z-index: -1;
+  left: -2rem;
+  top: 0.1rem;
+  width: 30rem;
+  height: 13rem;
+}
 </style>