首页 数据展示 改折线图 加改19号前7天

liuyg

2021-07-16 0ade36cde72a0f14e8a649213ea4b4e0a011d731

首页  数据展示  改折线图  加改19号前7天

 src/views/wel/home.vue

@@ -6,126 +6,87 @@
                    <div>
                        <div>
                            <div>
                                <div>
                                    群防群控队伍
                                </div>
                <div>群防群控队伍</div>
                            </div>
                            <div id="on_three_yjy">

                                <div>
                                    <div>
                                        <div>
                                            <img src="/img/wyh.png"
                                                 alt=""><span>10</span>
                                        </div>
                    <div><img src="/img/wyh.png" alt="" /><span>10</span></div>
                                        <span> 治安保卫委员会 </span>
                                    </div>
                                    <div>
                                        <div>
                                            <img src="/img/zabw.png"
                                                 alt=""><span>44</span>
                                        </div>
                    <div><img src="/img/zabw.png" alt="" /><span>44</span></div>
                                        <span> 治安保卫队伍 </span>
                                    </div>
                                    <div>
                                        <div>
                                            <img src="/img/xf.png"
                                                 alt=""><span>42</span>
                                        </div>
                    <div><img src="/img/xf.png" alt="" /><span>42</span></div>
                                        <span> 治安巡防队伍 </span>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <div>
                                            <img src="/img/xxy.png"
                                                 alt=""><span>36</span>
                                        </div>
                    <div><img src="/img/xxy.png" alt="" /><span>36</span></div>
                                        <span> 信息员队伍 </span>
                                    </div>
                                    <div>
                                        <div>
                                            <img src="/img/badw.png"
                                                 alt=""><span>52</span>
                                        </div>
                    <div><img src="/img/badw.png" alt="" /><span>52</span></div>
                                        <span> 保安队伍 </span>
                                    </div>
                                    <div>
                                        <div>
                                            <img src="/img/ldz.png"
                                                 alt=""><span>25</span>
                                        </div>
                    <div><img src="/img/ldz.png" alt="" /><span>25</span></div>
                                        <span> 楼栋长 </span>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div>
                            <div>

                                <div>
                                    生长树
                                </div>
                <div>生长树</div>
                            </div>
                            <div id="on_four_yjy">

                                <div class="tree">

                                    <div>

                                        <div v-for="(o, i) in rainArr"
                    <div
                      v-for="(o, i) in rainArr"
                                             :key="i"
                                             :class="['rain rain-'+ (i += 1)]"
                                             @click="rainFun(i, o)">{{o}}<text>g</text></div>

                      @click="rainFun(i, o)"
                    >
                      {{ o }}<text>g</text>
                    </div>
                                    </div>

                                    <div>

                                        <img :src="'/img/tree-'+ stages +'.png'"
                                             :class="['tree-'+ stages, treemove ? 'move-'+ stages : '']"
                    <img
                      :src="'/img/tree-' + stages + '.png'"
                      :class="[
                        'tree-' + stages,
                        treemove ? 'move-' + stages : '',
                      ]"
                                             hover-class="none"
                                             @click="treeAdd">

                      @click="treeAdd"
                    />
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                    <div id="draw_yjy"
                         style="position: relative">

                    </div>
          <div id="draw_yjy" style="position: relative"></div>
                    <div>
                        <div>
                            <div>

                                <div>
                                    平台用户分析
                                </div>
                <div>平台用户分析</div>
                            </div>
                            <div id="on_six_yjy"></div>

                        </div>

                        <div>
                            <div>

                                <div>
                                    近7天下发任务
                                </div>
                <div>近7天下发任务</div>
                            </div>
                            <div id="on_two_yjy"></div>

                        </div>

                    </div>
                </el-row>
            </div>
@@ -134,11 +95,9 @@
</template>

<script>
import * as echarts from 'echarts';
import * as echarts from "echarts";

import geojson from "@/geojson/nanchang.json";



export default {
    data () {
@@ -154,12 +113,8 @@
        };
    },

    computed: {

    },
    created () {

    },
  computed: {},
  created() {},
    mounted () {
        // eslint-disable-next-line no-undef
        this.onTwoEcharts();
@@ -167,57 +122,56 @@
        this.createMapJson();
    },
    methods: {

        onTwoEcharts () {
            var myChart = echarts.init(document.getElementById('on_two_yjy'));
      var myChart = echarts.init(document.getElementById("on_two_yjy"));
            var data1 = [18, 30, 22, 20, 15, 33, 28];
            var xData = function () {
      var xData = (function () {
                var data = [];
                for (var i = 1; i < 8; i++) {
                    data.push(i + "日");
        for (var i = 12; i < 19; i++) {
          data.push(i + "号");
                }
                return data;
            }();
      })();
            var option = {

                tooltip: {
                    trigger: 'axis',
          trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    }
            type: "shadow",
          },
                },
                grid: {
                    borderWidth: 0,
                    top: '10%',
                    left: '8%',
                    bottom: '10%',
                    right: '8%',
          top: "10%",
          left: "8%",
          bottom: "10%",
          right: "8%",
                    textStyle: {
                        color: '#fff',
            color: "#fff",
                    },
                },

                legend: {
                    data: ['近7天下发任务数', '注册率'],
                    align: 'right',
          data: ["近7天下发任务数", "注册率"],
          align: "right",
                    right: 10,
                    textStyle: {
                        color: "#fff"
            color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 35
          itemGap: 35,
                },
                xAxis: [{
                    type: 'category',
        xAxis: [
          {
            type: "category",
                    data: xData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#063374",
                            width: 1,
                            type: "solid"
                        }
                type: "solid",
              },
                    },
                    axisTick: {
                        show: false,
@@ -226,13 +180,15 @@
                        show: true,
                        textStyle: {
                            color: "#00c7ff",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
            },
          },
        ],
        yAxis: [
          {
            type: "value",
                    axisLabel: {
                        formatter: '{value}'
              formatter: "{value}",
                    },
                    axisTick: {
                        show: false,
@@ -242,26 +198,27 @@
                        lineStyle: {
                            color: "#00c7ff",
                            width: 1,
                            type: "solid"
                type: "solid",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#063374",
                        }
                    }
                }],
              },
            },
          },
        ],
                series: [
                    {
                        name: '近7天下发任务数',
                        type: 'bar',
            name: "近7天下发任务数",
            type: "bar",
                        // "stack": "总量",
                        barMaxWidth: 35,
                        barGap: '10%',
            barGap: "10%",
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                  type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
@@ -269,11 +226,11 @@
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#FF7E1A', // 0% 处的颜色
                      color: "#FF7E1A", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#D80000', // 100% 处的颜色
                      color: "#D80000", // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
@@ -281,62 +238,61 @@
                            },
                        },
                        data: data1,
                    }
          },
                ],
            };


            myChart.setOption(option, true)
      myChart.setOption(option, true);
        },

        onSixEcharts () {

            var myChart = echarts.init(document.getElementById('on_six_yjy'));

      var myChart = echarts.init(document.getElementById("on_six_yjy"));
      //改折线图
            var option = {
                tooltip: {
                    trigger: 'axis',
          trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    }
            type: "shadow",
          },
                },
                legend: {
                    data: ['在线率', '注册率'],
                    align: 'right',
          data: ["在线率", "注册量"],
          align: "right",
                    right: 10,
                    textStyle: {
                        color: "#fff"
            color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 35
          itemGap: 35,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
                },
                xAxis: [{
                    type: 'category',
        xAxis: [
          {
            type: "category",
                    data: [
                        "东湖区",
                        "西湖区",
                        '青云谱区',
              "青云谱区",
                        "青山湖区",
                        '新建区',
              "新建区",
                        "红谷滩区",
                        "南昌县",
                        "安义县",
                        "进贤县"
              "进贤县",
                    ],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#063374",
                            width: 1,
                            type: "solid"
                        }
                type: "solid",
              },
                    },
                    axisTick: {
                        show: false,
@@ -346,13 +302,19 @@
                        textStyle: {
                            color: "#00c7ff",
                        },
                        rotate: 45
              rotate: 45,
                    },
                }],
                yAxis: [{
                    type: 'value',
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "注册量",
            // min: 0,
            // max: 250,
            // interval: 50,
                    axisLabel: {
                        formatter: '{value} %'
              formatter: "{value}",
                    },
                    axisTick: {
                        show: false,
@@ -362,7 +324,32 @@
                        lineStyle: {
                            color: "#00c7ff",
                            width: 1,
                            type: "solid"
                type: "solid",
              },
            },
            // max: 100,
            // min: 0,
            splitLine: {
              lineStyle: {
                color: "#063374",
              },
            },
          },
          {
            type: "value",
            name: "在线率",
            axisLabel: {
              formatter: "{value} %",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "solid",
                        },
                    },
                    max: 100,
@@ -370,116 +357,154 @@
                    splitLine: {
                        lineStyle: {
                            color: "#063374",
                        }
                    }
                }],
                series: [{
                    name: '在线率',
                    type: 'bar',
              },
            },
          },
        ],
        series: [
          {
            name: "在线率",
            type: "bar",
                    data: [44, 46, 48, 52, 55, 45, 56, 38, 66],
                    barWidth: 6, //柱子宽度
                    barGap: 0.4, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                                offset: 0,
                                color: '#008cff'
                            }, {
                    color: "#008cff",
                  },
                  {
                                offset: 1,
                                color: '#005193'
                            }]),
                    color: "#005193",
                  },
                ]),
                            opacity: 1,
                        }
                    }
                }, {
                    name: '注册率',
                    type: 'bar',
              },
            },
          },
          {
            name: "注册量",
            type: "line",
                    data: [50, 54, 58, 55, 65, 72, 44, 55, 58],
                    barWidth: 6,
                    barGap: 0.4,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                                offset: 0,
                                color: '#c4e300'
                            }, {
                    color: "#c4e300",
                  },
                  {
                                offset: 1,
                                color: '#728400'
                            }]),
                    color: "#728400",
                  },
                ]),
                            opacity: 1,
                        }
                    }
                }]
              },
            },
          },
        ],
            };

            myChart.setOption(option);

        },

        createMapJson () {
            var myChart = echarts.init(document.getElementById('draw_yjy'));


      var myChart = echarts.init(document.getElementById("draw_yjy"));

            //geoCoordMap把所有可能出现的城市加到数组里面
            var geoCoordMap = {
                "东湖区": [115.889675, 28.682988],
                "西湖区": [115.91065, 28.662901],
                '青云谱区': [115.907292, 28.635724],
                "青山湖区": [115.949044, 28.689292],
                '新建区': [115.820806, 28.690788],
                "红谷滩区": [115.8580521, 28.69819928],
                "南昌县": [115.942465, 28.543781],
                "安义县": [115.553109, 28.841334],
                "进贤县": [116.267671, 28.365681]
        东湖区: [115.889675, 28.682988],
        西湖区: [115.91065, 28.662901],
        青云谱区: [115.907292, 28.635724],
        青山湖区: [115.949044, 28.689292],
        新建区: [115.820806, 28.690788],
        红谷滩区: [115.8580521, 28.69819928],
        南昌县: [115.942465, 28.543781],
        安义县: [115.553109, 28.841334],
        进贤县: [116.267671, 28.365681],
            };


            //2014年数据
            var d2 = {
                "东湖区": 22,
                "西湖区": 55,
                '青云谱区': 111,
                "青山湖区": 33,
                '新建区': 44,
                "红谷滩区": 66,
                "南昌县": 133,
                "安义县": 23,
                "进贤县": 31
        东湖区: 22,
        西湖区: 55,
        青云谱区: 111,
        青山湖区: 33,
        新建区: 44,
        红谷滩区: 66,
        南昌县: 133,
        安义县: 23,
        进贤县: 31,
            };

            var colors = [
                ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"],
                ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"],
                ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
        [
          "#1DE9B6",
          "#F46E36",
          "#04B9FF",
          "#5DBD32",
          "#FFC809",
          "#FB95D5",
          "#BDA29A",
          "#6E7074",
          "#546570",
          "#C4CCD3",
        ],
        [
          "#37A2DA",
          "#67E0E3",
          "#32C5E9",
          "#9FE6B8",
          "#FFDB5C",
          "#FF9F7F",
          "#FB7293",
          "#E062AE",
          "#E690D1",
          "#E7BCF3",
          "#9D96F5",
          "#8378EA",
          "#8378EA",
        ],
        [
          "#DD6B66",
          "#759AA0",
          "#E69D87",
          "#8DC1A9",
          "#EA7E53",
          "#EEDD78",
          "#73A373",
          "#73B9BC",
          "#7289AB",
          "#91CA8C",
          "#F49F42",
        ],
            ];
            var colorIndex = 0;

            // eslint-disable-next-line no-undef
            $(function () {
                var year = ["2013"];
                var mapData = [
                    [],
                ];
        var mapData = [[]];

                /*柱子Y名称*/
                var categoryData = [];
                var barData = [];

                for (var key in geoCoordMap) {

                    mapData[0].push({
                        "year": '2014',
                        "name": key,
                        "value": d2[key],
            year: "2014",
            name: key,
            value: d2[key],
                    });


                }

                for (var i = 0; i < mapData.length; i++) {
                    mapData[i].sort(function sortNumber (a, b) {
                        return a.value - b.value
            return a.value - b.value;
                    });
                    barData.push([]);
                    categoryData.push([]);
@@ -489,12 +514,7 @@
                    }
                }






                echarts.registerMap('china', geojson);
        echarts.registerMap("china", geojson);
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
@@ -502,7 +522,7 @@
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                value: geoCoord.concat(data[i].value),
                            });
                        }
                    }
@@ -512,272 +532,274 @@
                var optionXyMap01 = {
                    timeline: {
                        data: year,
                        axisType: 'category',
            axisType: "category",
                        autoPlay: true,
                        playInterval: 3000,
                        left: '10%',
                        right: '10%',
                        bottom: '3%',
                        width: '80%',
            left: "10%",
            right: "10%",
            bottom: "3%",
            width: "80%",
                        show: false,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#ddd'
                                }
                  color: "#ddd",
                },
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                  color: "#fff",
                },
              },
                        },
                        symbolSize: 10,
                        lineStyle: {
                            color: '#555'
              color: "#555",
                        },
                        checkpointStyle: {
                            borderColor: '#777',
                            borderWidth: 2
              borderColor: "#777",
              borderWidth: 2,
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: '#666',
                                borderColor: '#666'
                color: "#666",
                borderColor: "#666",
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                color: "#aaa",
                borderColor: "#aaa",
                        },

            },
                    },
                    baseOption: {
                        animation: true,
                        animationDuration: 1000,
                        animationDurationUpdate: 1000,
                        animationEasing: 'cubicInOut',
                        animationEasingUpdate: 'cubicInOut',
            animationEasing: "cubicInOut",
            animationEasingUpdate: "cubicInOut",
                        grid: {
                            right: '4%',
                            top: '38%',
                            bottom: '38%',
                            width: '18%'
              right: "4%",
              top: "38%",
              bottom: "38%",
              width: "18%",
                        },
                        tooltip: {
                            trigger: 'axis', // hover触发器
              trigger: "axis", // hover触发器
                            // backgroundColor: 'rgba(0,0,0,.7)',
                            // textStyle: {
                            //     color: '#fff'
                            // },
                            borderWidth: 0,
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                                shadowStyle: {
                                    color: 'rgba(150,150,150,0.1)' //hover颜色
                                }
                            }
                  color: "rgba(150,150,150,0.1)", //hover颜色
                },
              },
                        },
                        geo: {
                            show: true,
                            map: 'china',
              map: "china",
                            roam: true,
                            zoom: 12,
                            center: [116.2, 28.705],
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(0,0,0,.7)',
                trigger: "item",
                backgroundColor: "rgba(0,0,0,.7)",
                                textStyle: {
                                    color: '#fff'
                  color: "#fff",
                                },
                                borderWidth: 0,
                                formatter: (p) => {


                                    let txtCon =
                                        "<div style='text-align:left;' >" + p.name + ":<br />用户数：" + d2[p.name] + '</div>';
                    "<div style='text-align:left;' >" +
                    p.name +
                    ":<br />用户数：" +
                    d2[p.name] +
                    "</div>";
                                    return txtCon;
                                }

                },
                            },
                            label: {

                                emphasis: {

                                    color: '#fff'
                                }
                  color: "#fff",
                },
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(147, 235, 248, 1)',
                  borderColor: "rgba(147, 235, 248, 1)",
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'radial',
                    type: "radial",
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [{
                    colorStops: [
                      {
                                            offset: 0,
                                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                    },
                                    shadowColor: 'rgba(128, 217, 248, 1)',
                      {
                        offset: 1,
                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "rgba(128, 217, 248, 1)",
                                    // shadowColor: 'rgba(255, 255, 255, 1)',
                                    shadowOffsetX: -2,
                                    shadowOffsetY: 2,
                                    shadowBlur: 10
                  shadowBlur: 10,
                                },
                                emphasis: {
                                    areaColor: '#389BB7',
                                    borderWidth: 0
                                }
                            }
                  areaColor: "#389BB7",
                  borderWidth: 0,
                        },
                    },
                    options: []

            },
          },
          options: [],
                };

                for (var n = 0; n < year.length; n++) {
                    optionXyMap01.options.push({
                        xAxis: {
                            type: 'value',
              type: "value",
                            scale: true,
                            position: 'top',
              position: "top",
                            min: 0,
                            boundaryGap: false,
                            splitLine: {
                                show: false
                show: false,
                            },
                            axisLine: {
                                show: false
                show: false,
                            },
                            axisTick: {
                                show: false
                show: false,
                            },
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: '#aaa'
                                }
                  color: "#aaa",
                },
                            },
                        },
                        yAxis: {
                            type: 'category',
              type: "category",
                            //  name: 'TOP 20',
                            nameGap: 16,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ddd'
                                }
                  color: "#ddd",
                },
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: '#ddd'
                                }
                  color: "#ddd",
                },
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: '#ddd'
                                }
                  color: "#ddd",
                            },
                            data: categoryData[n]
              },
              data: categoryData[n],
                        },

                        series: [
                            //地图
                            {
                                type: 'map',
                                map: 'china',
                type: "map",
                map: "china",
                                geoIndex: 0,
                                aspectScale: 0.75, //长宽比
                                showLegendSymbol: false, // 存在legend时显示
                                label: {
                                    normal: {
                                        show: false
                    show: false,
                                    },
                                    emphasis: {
                                        show: false,
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                      color: "#fff",
                    },
                  },
                                },
                                roam: true,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#031525',
                                        borderColor: '#FFFFFF',
                    areaColor: "#031525",
                    borderColor: "#FFFFFF",
                                    },
                                    emphasis: {
                                        areaColor: '#2B91B7'
                                    }
                    areaColor: "#2B91B7",
                  },
                                },
                                animation: false,
                                data: mapData
                data: mapData,
                            },
                            //地图中闪烁的点
                            {
                                //  name: 'Top 5',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                data: convertData(mapData[n].sort(function (a, b) {
                type: "effectScatter",
                coordinateSystem: "geo",
                data: convertData(
                  mapData[n]
                    .sort(function (a, b) {
                                    return b.value - a.value;
                                }).slice(0, 20)),
                    })
                    .slice(0, 20)
                ),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                showEffectOn: 'render',
                showEffectOn: "render",
                                rippleEffect: {
                                    brushType: 'stroke'
                  brushType: "stroke",
                                },
                                hoverAnimation: true,
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        show: false
                                    }
                    formatter: "{b}",
                    position: "right",
                    show: false,
                  },
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        shadowBlur: 10,
                                        shadowColor: colors[colorIndex][n]
                                    }
                    shadowColor: colors[colorIndex][n],
                                },
                                zlevel: 1
                },
                zlevel: 1,
                            },
                            //柱状图
                            {
                                zlevel: 1.5,
                                type: 'bar',
                                symbol: 'none',
                type: "bar",
                symbol: "none",
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n]
                                    }
                    color: colors[colorIndex][n],
                                },
                                data: barData[n]
                },
                data: barData[n],
              },
            ],
          });
                            }
                        ]
                    })
                }


                myChart.setOption(optionXyMap01);
            });


        },

        // 设置树的大小，恢复动画
@@ -788,7 +810,6 @@
                this.wateroff = true;
                this.watercss = false;
                this.treemove = false;


                // 小树阶段
                if (this.during > 200) {
@@ -802,7 +823,6 @@
                if (this.during > 1500) {
                    this.stages = 3;
                }

            }, time);
        },

@@ -810,12 +830,12 @@
        rainFun (i, o) {
            this.plussNum = o;

            this.during += this.plussNum
      this.during += this.plussNum;

            this.pluss = true;
            this.treemove = true;
            setTimeout(() => {
                this.rainArr.splice(i -= 1, 1);
        this.rainArr.splice((i -= 1), 1);
            }, 1000);
            this.setTree(2000);
        },