Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/cockpit/gkzb.vue

@@ -86,6 +86,22 @@
         </div>
       </div> -->
       <div class="box_bottom"></div>
+      <div class="box_text">
+        <div class="text box_bottom_text">
+          <p>己入库控规范围
+
+          </p>
+          <span>123.124</span>k㎡
+
+        </div>
+        <div class="text">
+          <p>覆盖城镇开发边界
+
+          </p>
+          <span>123.23</span>k㎡
+
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -241,10 +257,16 @@ export default {
 
 .box_bottom {
   position: fixed;
-  border: 1px solid red;
-  width: 16rem;
-  height: 4rem;
+  width: 19rem;
+  height: 6rem;
   left: 4%;
+  top: 15rem;
+  background: no-repeat;
+  background-size: 100%;
+
+  background-image: url("/static/images/overview/jsyd_back.png");
+
+
 }
 
 .icon_zxkg {
@@ -257,6 +279,20 @@ export default {
 
 }
 
+.box_bottom_text {
+  width: 115px;
+}
+
+.box_text {
+  width: 15rem;
+  margin-left: 6rem;
+
+  .text {
+    width: 115px;
+
+  }
+}
+
 .icon_yrkkg {
   background: no-repeat 50%;
   background-image: url("/static/images/overview/icon_yrkkg.png");

src/views/cockpit/hysy.vue

@@ -1,40 +1,17 @@
 <template>
     <div class="hysy">
-        <div class="box">
-            <div class="title">
-                <div class="icon"></div>
-                <span>海域使用权出让</span>
-            </div>
-            <div class="content">
-                <div class="icon_info">
-
-                </div>
-                <div class="info_left">
-
-                </div>
-                <div class="info_main">
-
-                </div>
-                <div class="text">
-                    <span>海域使用权
-                        <br>
-                        出让项目</span>
-                    <div class="text_item">
-                        <span class="count1">{{ store.state.cockpit_hysy.text.xzqhdm_number }}</span>
-                        <span class="unit">个</span>
-                    </div>
-
-                    <div class="text_item1">
-                        <span>用海总面积</span>
-                        <span class="count2">{{ store.state.cockpit_hysy.text.zhmj }}</span>
-                        <span class="unit">公顷</span>
-                    </div>
-                </div>
+        <div class="title">
+            <div class="icon"></div>
+            <span>海域使用权出让</span>
+        </div>
+
+        <div class="content_hysy">
+            <div id="dial_watch_hysy">
+
             </div>
             <div id="hysyEchart">
 
             </div>
-
         </div>
     </div>
 </template>
@@ -70,322 +47,154 @@ export default {
     }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     methods: {
-        getRenKou() {
-            const that = this;
-            var dom = document.getElementById('hysyEchart');
+        init_hysyEchart() {
 
+            var dom = document.getElementById("hysyEchart");
             var myChart = window.echarts.init(dom);
+            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)) },
+                ]
+            }
 
-            // 柱状图的宽度，y是x的一半
-            const offsetX = 10
-            const offsetY = 5
-            let colorList = ["RGBA(30, 111, 181, 0.8)", "RGBA(149, 101, 24, 0.8)", "RGBA(29, 128, 64, 0.8)", "RGBA(133, 48, 52, 0.8)", "RGBA(121, 62, 147, 0.8)"]
+            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)' }],
 
-            // 绘制左侧面
-            const CubeLeft = echarts.graphic.extendShape({
-                shape: {
-                    x: 0,
-                    y: 0
-                },
-                buildPath: function (ctx, shape) {
-                    // 会canvas的应该都能看得懂，shape是从custom传入的
-                    const xAxisPoint = shape.xAxisPoint
-                    const c0 = [shape.x, shape.y]
-                    const c1 = [shape.x - offsetX, shape.y - offsetY]
-                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
-                    const c3 = [xAxisPoint[0], xAxisPoint[1]]
-                    ctx
-                        .moveTo(c0[0], c0[1])
-                        .lineTo(c1[0], c1[1])
-                        .lineTo(c2[0], c2[1])
-                        .lineTo(c3[0], c3[1])
-                        .closePath()
-                }
-            })
-            // 绘制右侧面
-            const CubeRight = echarts.graphic.extendShape({
-                shape: {
-                    x: 0,
-                    y: 0
-                },
-                buildPath: function (ctx, shape) {
-                    const xAxisPoint = shape.xAxisPoint
-                    const c1 = [shape.x, shape.y]
-                    const c2 = [xAxisPoint[0], xAxisPoint[1]]
-                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
-                    const c4 = [shape.x + offsetX, shape.y - offsetY]
-                    ctx
-                        .moveTo(c1[0], c1[1])
-                        .lineTo(c2[0], c2[1])
-                        .lineTo(c3[0], c3[1])
-                        .lineTo(c4[0], c4[1])
-                        .closePath()
-                }
-            })
-            // 绘制顶面
-            const CubeTop = echarts.graphic.extendShape({
-                shape: {
-                    x: 0,
-                    y: 0
-                },
-                buildPath: function (ctx, shape) {
-                    const c1 = [shape.x, shape.y]
-                    const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
-                    const c3 = [shape.x, shape.y - offsetX]
-                    const c4 = [shape.x - offsetX, shape.y - offsetY]
-                    ctx
-                        .moveTo(c1[0], c1[1])
-                        .lineTo(c2[0], c2[1])
-                        .lineTo(c3[0], c3[1])
-                        .lineTo(c4[0], c4[1])
-                        .closePath()
-                }
-            })
-            // // 绘制底面
-            const CubeBottom = echarts.graphic.extendShape({
-                shape: {
-                    x: 10,
-                    y: 10
-                },
-                buildPath: function (ctx, shape) {
-                    const xAxisPoint = shape.xAxisPoint
-                    const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
-                    const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右点
-                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
-                    const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX]
-                    ctx
-                        .moveTo(c1[0], c1[1])
-                        .lineTo(c2[0], c2[1])
-                        .lineTo(c3[0], c3[1])
-                        .lineTo(c4[0], c4[1])
-                        .closePath()
+                [{ 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
                 }
-            })
+            }
 
-            // 注册图形
-            echarts.graphic.registerShape('CubeLeft', CubeLeft)
-            echarts.graphic.registerShape('CubeRight', CubeRight)
-            echarts.graphic.registerShape('CubeTop', CubeTop)
-            echarts.graphic.registerShape('CubeBottom', CubeBottom)
-            const dataX = store.state.cockpit_hysy.echart.x;
-            const barData = store.state.cockpit_hysy.echart.bar;
+            const legend = {
+                data: ['计划收储', '完成收储'],      //图例名称
 
-            let option = {
-                //你的代码
-                backgroundColor: 'rgba(0,0,0,0)',
-                legend: {
-                    show: false,
-                    right: 30,
-                    top: 10,
-                    itemGap: 30,
-                    itemWidth: 20,
-                    itemHeight: 10,
-                    data: ['时长', '百分比'],
-                    textStyle: {
-                        fontSize: 18,
-                        color: '#ffffff'
-                    }
-                },
-                color: ['#097dc0', '#26D6D7'],
-                tooltip: {
-                    show: false,
-                    trigger: 'axis',
-                    textStyle: {
-                        fontSize: 18 // 字体大小
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    }
-                },
-                grid: {
-                    top: '30%',
-                    // left: '3%',
-                    right: '3%',
-                    bottom: '5%',
-                    containLabel: true
+                textStyle: { fontSize: 12, color: '#fff' },
+                itemWidth: 24,
+                itemHeight: 15,
+                itemGap: 15,
+                top: '2%',
+                right: '2%',
+                selectedMode: false
+            }
+            const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: false },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: {
+                    textStyle: { fontSize: 12, color: '#fff' },
                 },
-                xAxis: {
-                    type: 'category',
-                    data: dataX,
-                    axisTick: {
-                        show: false,
-                    },
-                    axisLine: {
-                        show: true,
-
-                        lineStyle: {
-                            width: 1,
-                            color: 'rgba(239, 247, 253, .7)'
+                axisLabel: {
+                    interval: 0,
+                    formatter: function (value) {
+                        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
+                        if (value.length > 4) {
+                            return `${value.slice(0, 4)}...`;
+                        } else {
+                            return value;
                         }
                     },
-                    axisLabel: {
-                        show: true,
-                        rotate: 0, //35度角倾斜显示
-                        interval: 0,
-                        textStyle: {
-                            color: "#fff",
-                            fontSize: 12,
-                        },
-                        formatter: function (value) {
-                            let fast = "";
-                            if (value.length >= 5) {
-                                fast = value.slice(0, 5);
-                                fast += "...";
-                            } else {
-                                fast = value;
-                            }
-                            return fast;
-                        },
-                    },
                 },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '面积/公顷',
-                        nameGap: 30,
-                        nameTextStyle: {
-                            color: '#ffffff',
-                            fontWeight: 100,
-                            fontSize: 12
-                        },
-                        axisLine: {
-                            show: false,
-                            lineStyle: {
-                                width: 1,
-                                color: 'rgba(239, 247, 253, .1)'
-                            }
-                        },
-                        splitLine: {
-                            show: true,
-                            lineStyle: {
-                                color: 'rgba(239, 247, 253, .1)'
-                            }
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        axisLabel: {
-                            fontSize: 12,
-                            color: '#E7FCFF'
-                        },
-                        min: 0,
-                        // max: Math.ceil(Math.max.apply(null, dataX) / 5) * 5,
-                        // interval: Math.ceil(Math.max.apply(null, dataX) / 5)
-                    },
-                ],
-                series: [
-                    {
-                        name: '时长',
-                        type: 'custom',
-                        renderItem: (params, api) => {
-                            const location = api.coord([api.value(0), api.value(1)])
-                            return {
-                                type: 'group',
-                                x: 0,
-                                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: colorList[params.dataIndex % colorList.length]
-
-                                        }
-                                    },
-                                    {
-                                        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: colorList[params.dataIndex % colorList.length],
-
-                                        }
-                                    },
-                                    {
-                                        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: colorList[params.dataIndex % colorList.length],
-
-                                        }
-                                    }
-                                ]
-                            }
-                        },
-                        data: barData
-                    },
-                ]
+                data: mockData.xdata,
             }
 
-            myChart.setOption(option);
-        },
-        async label_data() {
-            const that = this;
+            // 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
+                }
 
-            let obj = {
-                beginTime: store.state.cockpit_date[0],
-                endTime: store.state.cockpit_date[1],
-                jscType: 'jsc_hysyq_ztsh',
-                id: '4602'
-            };
-            let data = await cockpitInfo(obj);
+                return p
+            }, [])
 
+            const dataZoom = [{
+                show: false,
+                type: 'slider',
+                startValue: 0,
+                endValue: 7,
+                moveOnMouseWheel: true,
+                moveOnMouseMove: true,
+                zoomOnMouseWheel: false,
+            }]
 
-            that.label_text.xzqhdm_number = data.data[0].xzqhdm_number
-            that.label_text.zhmj = data.data[0].zhmj
-            store.setCockpitHysyText(that.label_text);
+            let option = {
 
-        },
-        async echart_data() {
-            const that = this;
-            let obj = {
-                beginTime: store.state.cockpit_date[0],
-                endTime: store.state.cockpit_date[1],
-                jscType: 'jsc_hysyq_yelx',
-                id: '4602'
+                tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
             }
 
-            let data = await cockpitInfo(obj);
-
-
-            const xArray = data.data.map(item => item.yhlx_name);
-            const barArray = data.data.map(item => item.zhmj);
-
-            that.label_echart = {
-                x: xArray,
-                bar: barArray
-            }
 
-            store.setCockpitHysyEchart(that.label_echart);
+            myChart.setOption(option);
 
-            // console.log(that.label_echart, "label_echartlabel_echart");
-            this.getRenKou();
-        }
+        },
     },
     mounted() {
         const that = this;
         this.$nextTick((res) => {
-            that.label_data();
-            that.echart_data();
+            that.init_hysyEchart();
         })
     },
     beforeUpdate() { }, //生命周期 - 更新之前
@@ -403,10 +212,12 @@ export default {
 .hysy {
     border-width: 0px;
     position: absolute;
-    left: 67rem;
-    top: 35.7rem;
-    width: 416px;
+    left: 55rem;
+    top: 33rem;
+    width: 559px;
     height: 310px;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     z-index: 100;
 }
@@ -414,15 +225,10 @@ export default {
 
 
 .title {
-    border-width: 0px;
-    width: 100%;
+    width: 1071rem;
     height: 40px;
-    // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
-    // font-weight: 700;
-    // font-style: normal;
-    // color: #fff;
-    // padding: 2%;
     background: no-repeat;
+    background-size: 116% 100%;
     background-image: url("/static/images/overview/标题框.png");
 
     .icon {
@@ -444,98 +250,20 @@ export default {
     }
 }
 
-.content {
-    background: no-repeat;
-    width: 100%;
-    height: 44px;
-    position: relative;
-    right: 1rem;
-    // background-image: url("/static/images/overview/info_all.png");
-    // background-size: 98% 87%;
-
-    .text {
-        position: relative;
-        left: 3.5rem;
-        top: 0.2rem;
-        font-size: 12px;
-        font-weight: 600;
-
-        .unit {
-            margin-right: 3rem;
-        }
-
-        .count1 {
-            color: RGBA(250, 160, 18, 1);
-        }
-
-        .count2 {
-            color: RGBA(100, 218, 255, 1);
-        }
-
-        .text_item {
-            position: relative;
-            left: 5rem;
-            bottom: 1.7rem;
-        }
-
-        .text_item1 {
-            position: relative;
-            left: 10rem;
-            bottom: 3rem;
-        }
-    }
-}
-
-.icon_info {
-    background: no-repeat;
-
-    // background-image: url("/static/images/overview/icon_info.png");
-    background-image: url("/static/images/overview/icon信息.png");
+.content_hysy {
+    position: fixed;
+    top: 40rem;
 
-    display: inline-block;
-    width: 2rem;
-    height: 3rem;
-    position: absolute;
-    left: 1.23rem;
-    top: 0.5rem;
-}
-
-.info_left {
-    background: no-repeat;
-
-    background-image: url("/static/images/overview/info_left.png");
-    // background-image: url("/static/images/overview/左侧主信息.png");
-
-    display: inline-block;
-    width: 10rem;
-    height: 2.5rem;
-    background-size: 100%;
-    position: absolute;
-    left: 2rem;
-}
-
-.info_main {
-    background: no-repeat;
-
-    background-image: url("/static/images/overview/info_main.png");
-    // background-image: url("/static/images/overview/右侧附属信息.png");
-
-    display: inline-block;
-    width: 13rem;
-    height: 2.5rem;
-    background-size: 100%;
-    position: absolute;
-    left: 12rem;
-}
-
-#hysyEchart {
-    left: -2rem;
-    top: 0.5rem;
-    width: 28rem;
-    height: 11.5rem;
-}
+    #dial_watch_hysy {
+        border: 1px red solid;
+        width: 29rem;
+        height: 7rem;
+    }
 
-.box {
-    width: 416px;
+    #hysyEchart {
+        border: 1px red solid;
+        width: 34rem;
+        height: 9rem;
+    }
 }
 </style>

src/views/cockpit/tdsc.vue

@@ -43,340 +43,141 @@ export default {
 
       var dom = document.getElementById("scje_echart");
       var myChart = window.echarts.init(dom);
-      const xData = ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"]
-      // 右侧的立体柱子
-      const topValue = [10, 3, 4, 6, 8, 10]
-      const bottomValue = [15, 18, 3, 4, 6, 10]
-
-      // 顶部的柱子立体面
-      const topImg = bottomValue
-        .reduce((acc, curr, index) => {
-          acc.push(curr + topValue[index])
-          return acc
-        }, [])
-        .flat()
-      // 注意：给series中的data赋值时需要注意参考注释中的内容顺序
-      //     series[0].data = bottomValue
-      //     series[1].data = topValue
-      //     series[3].data = bottomValue
-      //     series[4].data = topImg
-      let option = {
-        backgroundColor: 'rgba(0,0,0,0)',
-        grid: {
-          left: '5%',
-          right: '4%',
-          bottom: '30%',
-          top: '15%',
-          containLabel: true
-        },
-        legend: {
-          data: ['计划收储', '完成收储'],      //图例名称
-          right: '30%',                              //调整图例位置
-          top: '80%',                                  //调整图例位置
-          itemWidth: 12,
-          itemHeight: 12,                   //修改icon图形大小
-          icon: 'rectangle',                         //图例前面的图标形状
-          textStyle: {                            //图例文字的样式
-            color: '#ccc',               //图例文字颜色
-            fontSize: 12                      //图例文字大小
-          }
-
-        },
-        tooltip: {
-          show: false,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          backgroundColor: 'rgba(0, 0, 0, 0.8)',
-          borderColor: 'rgba(0, 0, 0, 0.8)',
-          textStyle: {
-            color: '#fff'
-          },
-          formatter: function (params, ticket, callback) {
-            let text = ''
-            params.map(item => {
-              if (item.seriesName !== "") {
-                text += `${item.seriesName}:${item.value}小时\n`
-              }
-            })
-            return text
-          }
+      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: '2%',
+        right: '2%',
+        selectedMode: false
+      }
+      const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
+      // xAxis
+      const xAxis = {
+        axisTick: { show: false },
+        axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+        axisLabel: {
+          textStyle: { fontSize: 12, color: '#fff' },
         },
-        xAxis: [
-          {
-            type: 'category',
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#ccc',
-                width: 1
-              }
-            },
-
-            offset: 5,
-            axisLabel: {
-              interval: 0,
-              formatter: function (value) {
-                // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
-                if (value.length > 4) {
-                  return `${value.slice(0, 4)}...`;
-                } else {
-                  return value;
-                }
-              },
-            },
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            data: xData
-          }
-        ],
-        yAxis: {
-          "show": false,
-          type: 'value',
-          splitLine: {
-            lineStyle: {
-              color: '#0f3451'
+        axisLabel: {
+          interval: 0,
+          formatter: function (value) {
+            // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
+            if (value.length > 4) {
+              return `${value.slice(0, 4)}...`;
+            } else {
+              return value;
             }
           },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#87baf8'
-            }
-          },
-
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#87baf8'
-            },
-            fontSize: 12
-          }
         },
-        series: [
-          //   立体效果通过柱状图的线性渐变色来达到 itemStyle
-          //  下面的立体面
-          {
-            name: '计划收储',
-            type: 'pictorialBar',
-            symbol: 'diamond',
-            symbolSize: [20, 20],
-            symbolOffset: [-0, 10],
-            z: 1,
-            itemStyle: {
-
-              color: {
-                x: 0,
-                y: 0,
-                x2: 1,
-                y2: 0,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  {
-                    offset: 0,
-
-                    color: 'rgba(24,152,226,1)'
-                  },
-                  {
-                    offset: 0.5,
-                    // color: '#1898e2'
-                    color: 'rgba(24,152,226,1)'
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(18,133,199,1)'
-
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(18,133,199,1)'
-
-                  }
-                ]
-              }
-            },
-            data: [1, 1, 1, 1, 1, 1, 1]
-          },
-          // 堆叠的下方柱子
-          {
-            type: 'bar',
-            name: '时长',
-            barWidth: 20, // 柱状图的宽度
-
-            // z: 11,
-            stack: 'zs',
-            label: {
-              show: false,
-              position: 'top',
-              color: '#10b3ff',
-              fontFamily: 'dsDigital2',
-              fontSize: 18,
-              distance: 15 //距离头部的距离
-            },
-            itemStyle: {
-
-              color: {
-                x: 0,
-                y: 0,
-                x2: 1,
-                y2: 0,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(24,152,226,0.7)'
-
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(24,152,2260.7)'
-
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(18,133,1990.7)'
-
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(18,133,1990.7)'
-
-                  }
-                ]
-              }
-            },
-            data: bottomValue
-          },
-          //  堆叠的上方柱子
-          {
-            type: 'bar',
-            stack: 'zs',
-            barGap: '80%',
-
-            name: '完成收储',
-            // z: 10,
-            label: {
-              show: false,
-              position: 'top',
-              color: '#ffa70f',
-              fontFamily: 'dsDigital2',
-              fontSize: 18,
-              distance: 15
-            },
-            itemStyle: {
-              barWidth: 1, // 设置柱子粗细
-              color: {
-                x: 0,
-                y: 0,
-                x2: 1,
-                y2: 0,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(246,201,92,1)'
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(246,201,92,1)'
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(190,157,72,1)'
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(190,157,72,1)'
-                  }
-                ]
-              }
-            },
-            data: topValue
-          },
+        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)'
+      }
+
 
-          //  中间层的立体面,data是下方柱子的data
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbol: 'diamond',
-            symbolSize: [20, 20],
-            symbolOffset: [-0, -10],
-            symbolPosition: 'end',
-            z: 12,
-            itemStyle: {
-              barWidth: 1, // 设置柱子粗细
-              color: {
-                x: 0,
-                y: 0,
-                x2: 1,
-                y2: 0,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(246,201,92,1)'
-
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(246,201,92,1)'
-
-
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(190,157,72,1)'
-
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(190,157,72,1)'
-
-                  }
-                ]
-              }
-            },
-            data: bottomValue
-          },
-          //  上方的立体面 data的数据应该是b1和b2的data相加的总和
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbol: 'diamond',
-            symbolPosition: 'end',
-            symbolSize: [20, 20],
-            symbolOffset: [-0, -10],
-            z: 20,
-            // 是否展示总数
-            label: {
-              normal: {
-                show: false,
-                position: 'top',
-                fontSize: 24,
-                color: '#fff',
-                // offset: [0, 25],
-              },
-            },
-            itemStyle: {
-              opacity: 1,
-              color: '#f6c95c',
-              barWidth: 1, // 设置柱子粗细
-            },
-            data: topImg
-          }
-        ]
-      };
       myChart.setOption(option);
 
     },