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

liuyg

2021-07-16 0ade36cde72a0f14e8a649213ea4b4e0a011d731

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

 src/views/wel/home.vue

@@ -1,1229 +1,1249 @@
<template>
    <el-row>
        <el-card class="yjy-home-card">
            <div class="content-box">
                <el-row>
                    <div>
                        <div>
                            <div>
                                <div>
                                    群防群控队伍
                                </div>
                            </div>
                            <div id="on_three_yjy">

                                <div>
                                    <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>
                                        <span> 治安保卫队伍 </span>
                                    </div>
                                    <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>
                                        <span> 信息员队伍 </span>
                                    </div>
                                    <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>
                                        <span> 楼栋长 </span>
                                    </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"
                                             :key="i"
                                             :class="['rain rain-'+ (i += 1)]"
                                             @click="rainFun(i, o)">{{o}}<text>g</text></div>

                                    </div>

                                    <div>

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

                                    </div>

                                </div>

                            </div>

                        </div>

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

                    </div>
                    <div>
                        <div>
                            <div>

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

                        </div>

                        <div>
                            <div>

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

                        </div>

                    </div>
                </el-row>
  <el-row>
    <el-card class="yjy-home-card">
      <div class="content-box">
        <el-row>
          <div>
            <div>
              <div>
                <div>群防群控队伍</div>
              </div>
              <div id="on_three_yjy">
                <div>
                  <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>
                    <span> 治安保卫队伍 </span>
                  </div>
                  <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>
                    <span> 信息员队伍 </span>
                  </div>
                  <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>
                    <span> 楼栋长 </span>
                  </div>
                </div>
              </div>
            </div>
        </el-card>
    </el-row>

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

                  <div>
                    <img
                      :src="'/img/tree-' + stages + '.png'"
                      :class="[
                        'tree-' + stages,
                        treemove ? 'move-' + stages : '',
                      ]"
                      hover-class="none"
                      @click="treeAdd"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="draw_yjy" style="position: relative"></div>
          <div>
            <div>
              <div>
                <div>平台用户分析</div>
              </div>
              <div id="on_six_yjy"></div>
            </div>

            <div>
              <div>
                <div>近7天下发任务</div>
              </div>
              <div id="on_two_yjy"></div>
            </div>
          </div>
        </el-row>
      </div>
    </el-card>
  </el-row>
</template>

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

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



export default {
    data () {
        return {
            rainArr: [28, 63, 5, 902, 650, 99, 102, 104, 106, 108, 222, 555],
            stages: 1,
            treemove: false,
            during: 100,         // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
            plussNum: 1,         // 加值数量（默认1）
  data() {
    return {
      rainArr: [28, 63, 5, 902, 650, 99, 102, 104, 106, 108, 222, 555],
      stages: 1,
      treemove: false,
      during: 100, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
      plussNum: 1, // 加值数量（默认1）

            pluss: false,         // 水滴值+1动画开关
            movetree: true,     // 树动画开关
        };
    },
      pluss: false, // 水滴值+1动画开关
      movetree: true, // 树动画开关
    };
  },

    computed: {
  computed: {},
  created() {},
  mounted() {
    // eslint-disable-next-line no-undef
    this.onTwoEcharts();
    this.onSixEcharts();
    this.createMapJson();
  },
  methods: {
    onTwoEcharts() {
      var myChart = echarts.init(document.getElementById("on_two_yjy"));
      var data1 = [18, 30, 22, 20, 15, 33, 28];
      var xData = (function () {
        var data = [];
        for (var i = 12; i < 19; i++) {
          data.push(i + "号");
        }
        return data;
      })();
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          borderWidth: 0,
          top: "10%",
          left: "8%",
          bottom: "10%",
          right: "8%",
          textStyle: {
            color: "#fff",
          },
        },

    },
    created () {

    },
    mounted () {
        // eslint-disable-next-line no-undef
        this.onTwoEcharts();
        this.onSixEcharts();
        this.createMapJson();
    },
    methods: {

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

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

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


            myChart.setOption(option, true)
        },

        onSixEcharts () {

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

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                      offset: 0,
                      color: "#FF7E1A", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#D80000", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                legend: {
                    data: ['在线率', '注册率'],
                    align: 'right',
                    right: 10,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 35
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [
                        "东湖区",
                        "西湖区",
                        '青云谱区',
                        "青山湖区",
                        '新建区',
                        "红谷滩区",
                        "南昌县",
                        "安义县",
                        "进贤县"
                    ],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#063374",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#00c7ff",
                        },
                        rotate: 45
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#00c7ff",
                            width: 1,
                            type: "solid"
                        },
                    },
                    max: 100,
                    min: 0,
                    splitLine: {
                        lineStyle: {
                            color: "#063374",
                        }
                    }
                }],
                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, [{
                                offset: 0,
                                color: '#008cff'
                            }, {
                                offset: 1,
                                color: '#005193'
                            }]),
                            opacity: 1,
                        }
                    }
                }, {
                    name: '注册率',
                    type: 'bar',
                    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, [{
                                offset: 0,
                                color: '#c4e300'
                            }, {
                                offset: 1,
                                color: '#728400'
                            }]),
                            opacity: 1,
                        }
                    }
                }]
            };
              },
            },
            data: data1,
          },
        ],
      };

            myChart.setOption(option);

        },

        createMapJson () {
            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]
            };


            //2014年数据
            var d2 = {
                "东湖区": 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"],
            ];
            var colorIndex = 0;

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

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

                for (var key in geoCoordMap) {

                    mapData[0].push({
                        "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
                    });
                    barData.push([]);
                    categoryData.push([]);
                    for (var j = 0; j < mapData[i].length; j++) {
                        barData[i].push(mapData[i][j].value);
                        categoryData[i].push(mapData[i][j].name);
                    }
                }






                echarts.registerMap('china', geojson);
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };

                var optionXyMap01 = {
                    timeline: {
                        data: year,
                        axisType: 'category',
                        autoPlay: true,
                        playInterval: 3000,
                        left: '10%',
                        right: '10%',
                        bottom: '3%',
                        width: '80%',
                        show: false,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#ddd'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        symbolSize: 10,
                        lineStyle: {
                            color: '#555'
                        },
                        checkpointStyle: {
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: '#666',
                                borderColor: '#666'
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },

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


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

                            },
                            label: {

                                emphasis: {

                                    color: '#fff'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(147, 235, 248, 1)',
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                        }, {
                                            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
                                },
                                emphasis: {
                                    areaColor: '#389BB7',
                                    borderWidth: 0
                                }
                            }
                        },
                    },
                    options: []

                };

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

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


                myChart.setOption(optionXyMap01);
            });


        },

        // 设置树的大小，恢复动画
        setTree (time = 4000) {
            setTimeout(() => {
                this.plussNum = 1;
                this.pluss = false;
                this.wateroff = true;
                this.watercss = false;
                this.treemove = false;


                // 小树阶段
                if (this.during > 200) {
                    this.stages = 1;
                }
                // 中树阶段
                if (this.during <= 1500 && this.during > 200) {
                    this.stages = 2;
                }
                // 大树阶段
                if (this.during > 1500) {
                    this.stages = 3;
                }

            }, time);
        },

        // 收取雨滴的动画
        rainFun (i, o) {
            this.plussNum = o;

            this.during += this.plussNum

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

        // 点击树的动画
        treeAdd () {
            if (this.movetree) {
                this.treemove = true;
                this.movetree = false;
                setTimeout(() => {
                    this.movetree = true;
                    this.treemove = false;
                }, 1000);
            }
        },
      myChart.setOption(option, true);
    },

    onSixEcharts() {
      var myChart = echarts.init(document.getElementById("on_six_yjy"));
      //改折线图
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["在线率", "注册量"],
          align: "right",
          right: 10,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "东湖区",
              "西湖区",
              "青云谱区",
              "青山湖区",
              "新建区",
              "红谷滩区",
              "南昌县",
              "安义县",
              "进贤县",
            ],
            axisLine: {
              show: true,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00c7ff",
              },
              rotate: 45,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "注册量",
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                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,
            min: 0,
            splitLine: {
              lineStyle: {
                color: "#063374",
              },
            },
          },
        ],
        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, [
                  {
                    offset: 0,
                    color: "#008cff",
                  },
                  {
                    offset: 1,
                    color: "#005193",
                  },
                ]),
                opacity: 1,
              },
            },
          },
          {
            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, [
                  {
                    offset: 0,
                    color: "#c4e300",
                  },
                  {
                    offset: 1,
                    color: "#728400",
                  },
                ]),
                opacity: 1,
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },

    createMapJson() {
      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],
      };

      //2014年数据
      var d2 = {
        东湖区: 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",
        ],
      ];
      var colorIndex = 0;

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

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

        for (var key in geoCoordMap) {
          mapData[0].push({
            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;
          });
          barData.push([]);
          categoryData.push([]);
          for (var j = 0; j < mapData[i].length; j++) {
            barData[i].push(mapData[i][j].value);
            categoryData[i].push(mapData[i][j].name);
          }
        }

        echarts.registerMap("china", geojson);
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };

        var optionXyMap01 = {
          timeline: {
            data: year,
            axisType: "category",
            autoPlay: true,
            playInterval: 3000,
            left: "10%",
            right: "10%",
            bottom: "3%",
            width: "80%",
            show: false,
            label: {
              normal: {
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            symbolSize: 10,
            lineStyle: {
              color: "#555",
            },
            checkpointStyle: {
              borderColor: "#777",
              borderWidth: 2,
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: "#666",
                borderColor: "#666",
              },
              emphasis: {
                color: "#aaa",
                borderColor: "#aaa",
              },
            },
          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationDurationUpdate: 1000,
            animationEasing: "cubicInOut",
            animationEasingUpdate: "cubicInOut",
            grid: {
              right: "4%",
              top: "38%",
              bottom: "38%",
              width: "18%",
            },
            tooltip: {
              trigger: "axis", // hover触发器
              // backgroundColor: 'rgba(0,0,0,.7)',
              // textStyle: {
              //     color: '#fff'
              // },
              borderWidth: 0,
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: "rgba(150,150,150,0.1)", //hover颜色
                },
              },
            },
            geo: {
              show: true,
              map: "china",
              roam: true,
              zoom: 12,
              center: [116.2, 28.705],
              tooltip: {
                trigger: "item",
                backgroundColor: "rgba(0,0,0,.7)",
                textStyle: {
                  color: "#fff",
                },
                borderWidth: 0,
                formatter: (p) => {
                  let txtCon =
                    "<div style='text-align:left;' >" +
                    p.name +
                    ":<br />用户数：" +
                    d2[p.name] +
                    "</div>";
                  return txtCon;
                },
              },
              label: {
                emphasis: {
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(147, 235, 248, 1)",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                      },
                      {
                        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,
                },
                emphasis: {
                  areaColor: "#389BB7",
                  borderWidth: 0,
                },
              },
            },
          },
          options: [],
        };

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

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

        myChart.setOption(optionXyMap01);
      });
    },

    // 设置树的大小，恢复动画
    setTree(time = 4000) {
      setTimeout(() => {
        this.plussNum = 1;
        this.pluss = false;
        this.wateroff = true;
        this.watercss = false;
        this.treemove = false;

        // 小树阶段
        if (this.during > 200) {
          this.stages = 1;
        }
        // 中树阶段
        if (this.during <= 1500 && this.during > 200) {
          this.stages = 2;
        }
        // 大树阶段
        if (this.during > 1500) {
          this.stages = 3;
        }
      }, time);
    },

    // 收取雨滴的动画
    rainFun(i, o) {
      this.plussNum = o;

      this.during += this.plussNum;

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

    // 点击树的动画
    treeAdd() {
      if (this.movetree) {
        this.treemove = true;
        this.movetree = false;
        setTimeout(() => {
          this.movetree = true;
          this.treemove = false;
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.yjy-home-card {
    position: relative;
  position: relative;
  height: 100%;
  color: rgb(184, 156, 158);
  background: url(/img/bg/bgh.png) no-repeat;
  background-size: 100% 100%;
  .content-box {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: rgb(184, 156, 158);
    background: url(/img/bg/bgh.png) no-repeat;
    background-size: 100% 100%;
    .content-box {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;

        .el-row {
            height: 100%;
            display: flex;
    .el-row {
      height: 100%;
      display: flex;
      & > div {
        margin: 0;
        padding: 4px 0;
        flex: 6;
      }

      & > div:first-child {
        flex: 3;
        display: flex;
        flex-direction: column;

        & > div {
          margin: 4px;
          padding: 4px;
          margin-right: 0;
          padding-right: 0;
          flex: 1;

          background: url(/img/bg/searchTrace.png) no-repeat;
          background-size: 100% 100%;

          & > div:first-child {
            height: 20%;

            & > div {
                margin: 0;
                padding: 4px 0;
                flex: 6;
              height: 100%;
              line-height: 3.6;
              color: #fff;
              font-size: 18px;
              text-align: left;
              text-indent: 2em;
            }
          }

            & > div:first-child {
                flex: 3;
                display: flex;
                flex-direction: column;

                & > div {
                    margin: 4px;
                    padding: 4px;
                    margin-right: 0;
                    padding-right: 0;
                    flex: 1;

                    background: url(/img/bg/searchTrace.png) no-repeat;
                    background-size: 100% 100%;

                    & > div:first-child {
                        height: 20%;

                        & > div {
                            height: 100%;
                            line-height: 3.6;
                            color: #fff;
                            font-size: 18px;
                            text-align: left;
                            text-indent: 2em;
                        }
                    }

                    & > div:last-child {
                        height: 78%;
                    }
                }

                & > div:last-child {
                    margin-top: 20px;
                }
            }

            & > div:last-child {
                flex: 3;
                display: flex;
                flex-direction: column;
                & > div {
                    margin: 4px;
                    padding: 4px;
                    margin-left: 0;
                    padding-left: 0;
                    flex: 1;

                    background: url(/img/bg/searchTrace.png) no-repeat;
                    background-size: 100% 100%;

                    & > div:first-child {
                        height: 20%;

                        & > div {
                            height: 100%;
                            line-height: 3.6;
                            color: #fff;
                            font-size: 18px;
                            text-align: left;
                            text-indent: 2em;
                        }
                    }

                    & > div:last-child {
                        height: 78%;
                    }
                }

                & > div:last-child {
                    margin-top: 20px;
                }
            }
          & > div:last-child {
            height: 78%;
          }
        }

        & > div:last-child {
          margin-top: 20px;
        }
      }

      & > div:last-child {
        flex: 3;
        display: flex;
        flex-direction: column;
        & > div {
          margin: 4px;
          padding: 4px;
          margin-left: 0;
          padding-left: 0;
          flex: 1;

          background: url(/img/bg/searchTrace.png) no-repeat;
          background-size: 100% 100%;

          & > div:first-child {
            height: 20%;

            & > div {
              height: 100%;
              line-height: 3.6;
              color: #fff;
              font-size: 18px;
              text-align: left;
              text-indent: 2em;
            }
          }

          & > div:last-child {
            height: 78%;
          }
        }

        & > div:last-child {
          margin-top: 20px;
        }
      }
    }
  }
}

#on_three_yjy {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  & > div {
    height: calc(40% - 4px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
    & > div {
        height: calc(40% - 4px);
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        & > div {
            width: 30%;
            & > div {
                height: calc(100% - 40px);
                border-top: 2px solid #97eaf3;
                border-bottom: 2px solid #97eaf3;
                border-radius: 8px;
                border-right: 1px solid #357da6;
                border-left: 1px solid #357da6;
      width: 30%;
      & > div {
        height: calc(100% - 40px);
        border-top: 2px solid #97eaf3;
        border-bottom: 2px solid #97eaf3;
        border-radius: 8px;
        border-right: 1px solid #357da6;
        border-left: 1px solid #357da6;

                padding: 4px 2px;
                position: relative;
        padding: 4px 2px;
        position: relative;

                & > img {
                    position: absolute;
                    top: auto;
                    left: 0;
                    right: 0;
                    bottom: 36px;
        & > img {
          position: absolute;
          top: auto;
          left: 0;
          right: 0;
          bottom: 36px;

                    margin: auto;
          margin: auto;

                    height: 40px;
                }

                & > span {
                    position: absolute;
                    width: 100%;
                    bottom: 0px;
                    display: block;
                    height: 36px;
                    line-height: 36px;
                    font-size: 24px;
                    color: #fbe78a;
                    text-align: center;
                    font-weight: 700;
                }
            }

            & > span {
                display: block;
                height: 36px;
                line-height: 36px;
                font-size: 14px;
                color: #97eaf3;
                text-align: center;
            }
          height: 40px;
        }

        & > span {
          position: absolute;
          width: 100%;
          bottom: 0px;
          display: block;
          height: 36px;
          line-height: 36px;
          font-size: 24px;
          color: #fbe78a;
          text-align: center;
          font-weight: 700;
        }
      }

      & > span {
        display: block;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #97eaf3;
        text-align: center;
      }
    }
  }
}

.tree {
    height: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & > div {
    width: 100%;
  }

  & > div:first-child {
    display: flex;
    flex: 3;
    flex-wrap: wrap;
    justify-content: center;
  }
  & > div:last-child {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & > div {
        width: 100%;
    }

    & > div:first-child {
        display: flex;
        flex: 3;
        flex-wrap: wrap;
        justify-content: center;
    }
    & > div:last-child {
        position: relative;
        display: flex;
        flex: 8;
    }
    flex: 8;
  }
}

.tree .rain {
    position: relative;
    top: 0px;
    margin: 6px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: rgb(5, 102, 21);
    background: repeating-radial-gradient(#0fff00, #53c72d);
    box-shadow: 0 0 10px 0px #b8ffc4;
    border-radius: 50%;
    animation: rain 4s infinite;
    z-index: 1;
  position: relative;
  top: 0px;
  margin: 6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: rgb(5, 102, 21);
  background: repeating-radial-gradient(#0fff00, #53c72d);
  box-shadow: 0 0 10px 0px #b8ffc4;
  border-radius: 50%;
  animation: rain 4s infinite;
  z-index: 1;
}

.tree .rain text {
    font-size: 12px;
  font-size: 12px;
}

.tree .rain-1 {
    top: 4px;
  top: 4px;
}

.tree .rain-2 {
    top: 12px;
  top: 12px;
}

.tree .rain-3 {
    top: -4px;
  top: -4px;
}

.tree .rain-4 {
    top: -4px;
  top: -4px;
}

.tree .rain-5 {
    top: -2px;
  top: -2px;
}

.tree .rain-6 {
    top: 0px;
  top: 0px;
}

.tree .rain-7 {
    top: 2px;
  top: 2px;
}

.tree .rain-8 {
    top: 4px;
  top: 4px;
}

.tree .rain-9 {
    top: 6px;
  top: 6px;
}

.tree .rain-10 {
    top: 0px;
  top: 0px;
}

.tree .rain-11 {
    top: 6px;
  top: 6px;
}

.tree .rain-12 {
    top: -4px;
  top: -4px;
}

.tree .rain-13 {
    top: 0px;
  top: 0px;
}

.tree .rain-14 {
    top: 6px;
  top: 6px;
}

.tree .rain-15 {
    top: 4px;
  top: 4px;
}

.tree .rain-16 {
    top: -2px;
  top: -2px;
}

.tree .rain-17 {
    top: -4px;
  top: -4px;
}

.tree .rain:nth-child(1) {
    animation-delay: 0.8s;
    margin-top: 10px;
  animation-delay: 0.8s;
  margin-top: 10px;
}

.tree .rain:nth-child(2) {
    animation-delay: 0.5s;
    margin-top: -10px;
  animation-delay: 0.5s;
  margin-top: -10px;
}

.tree .rain:nth-child(4) {
    animation-delay: 0.1s;
    margin-top: -5px;
  animation-delay: 0.1s;
  margin-top: -5px;
}

.tree img {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 4px;
    margin: auto;
    z-index: 0;
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 4px;
  margin: auto;
  z-index: 0;
}

.tree .tree-1 {
    height: 76%;
  height: 76%;
}

.tree .tree-2 {
    height: 88%;
  height: 88%;
}

.tree .tree-3 {
    height: 100%;
  height: 100%;
}

@keyframes move-1 {
    0% {
        height: 76%;
    }
  0% {
    height: 76%;
  }

    25% {
        height: 77%;
    }
  25% {
    height: 77%;
  }

    50% {
        height: 78%;
    }
  50% {
    height: 78%;
  }

    75% {
        height: 79%;
    }
  75% {
    height: 79%;
  }

    100% {
        height: 80%;
    }
  100% {
    height: 80%;
  }
}

.move-1 {
    animation: move-1 1s;
  animation: move-1 1s;
}

@keyframes move-2 {
    0% {
        height: 88%;
    }
  0% {
    height: 88%;
  }

    25% {
        height: 89%;
    }
  25% {
    height: 89%;
  }

    50% {
        height: 90%;
    }
  50% {
    height: 90%;
  }

    75% {
        height: 92%;
    }
  75% {
    height: 92%;
  }

    100% {
        height: 93%;
    }
  100% {
    height: 93%;
  }
}

.move-2 {
    animation: move-2 1s;
  animation: move-2 1s;
}

@keyframes move-3 {
    0% {
        height: 100%;
    }
  0% {
    height: 100%;
  }

    25% {
        height: 101%;
    }
  25% {
    height: 101%;
  }

    50% {
        height: 102%;
    }
  50% {
    height: 102%;
  }

    75% {
        height: 103%;
    }
  75% {
    height: 103%;
  }

    100% {
        height: 104%;
    }
  100% {
    height: 104%;
  }
}

.move-3 {
    animation: move-3 1s;
  animation: move-3 1s;
}
</style>