From 0ade36cde72a0f14e8a649213ea4b4e0a011d731 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 16 Jul 2021 16:35:16 +0800
Subject: [PATCH] 首页 数据展示 改折线图 加改19号前7天
---
src/views/wel/home.vue | 2168 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 1,094 insertions(+), 1,074 deletions(-)
diff --git a/src/views/wel/home.vue b/src/views/wel/home.vue
index d829efd..9b3bc8d 100644
--- a/src/views/wel/home.vue
+++ b/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>
--
Gitblit v1.9.3