大屏展示功能

src/assets/less/index.less

@@ -0,0 +1,65 @@
+@import '~iview/src/styles/index.less';
+
+@primary-color: #75deef;
+
+.title {
+    position: absolute;
+    display: inline-block;
+    color: #6EDDF1;
+    background: #14418E;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 15px;
+    .title-gradient {
+        display: inline-block;
+        padding: 5px 14px;
+        background: radial-gradient(55% 55% ellipse, rgba(7, 9, 34, .8) 60%, rgb(21, 67, 145));
+    }
+}
+.angle1 {
+    display: inline-block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 0;
+    left: 0;
+    border-top: 1px solid #1C5AB3;
+    border-left: 1px solid #1C5AB3;
+
+}
+
+.angle2 {
+    display: inline-block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 0;
+    right: 0;
+    border-top: 1px solid #1C5AB3;
+    border-right: 1px solid #1C5AB3;
+
+}
+
+.angle3 {
+    display: inline-block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    bottom: 0;
+    left: 0;
+    border-bottom: 1px solid #1C5AB3;
+    border-left: 1px solid #1C5AB3;
+
+}
+
+.angle4 {
+    display: inline-block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    bottom: 0;
+    right: 0;
+    border-bottom: 1px solid #1C5AB3;
+    border-right: 1px solid #1C5AB3;
+
+}

src/lib/img.js

@@ -0,0 +1,7 @@
+export default {
+    center:require('../assets/images/center.gif'),
+    normal_bg:require('../assets/images/normal_bg.png'),
+    normal_title:require('../assets/images/normal_title.png'),
+    sensitive_bg:require('../assets/images/sensitive_bg.png'),
+    sensitive_title:require('../assets/images/sensitive_title.png')
+}

src/lib/utils.js

@@ -0,0 +1,15 @@
+export default {
+    install: function (Vue) {
+        Vue.prototype.$debounce = function ( fn,delay){
+            let timer = null //借助闭包
+            return function() {
+                if(timer){
+                    clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
+                    timer = setTimeout(fn,delay)
+                }else{
+                    timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
+                }
+            }
+        }
+    }
+}

src/views/modules/monitoring/components/areaChart.vue

@@ -0,0 +1,234 @@
+<template>
+    <div class="area"></div>
+</template>
+
+<script>
+export default {
+    name: "areaChart",
+    props: [ 'config', 'selectRangeDate'],
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        setData(type) {
+            let arr = [];
+            switch (type) {
+                case 'x':
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push(this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2])
+                    }
+                    break;
+                case 's' :
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push((Math.random() * 250).toFixed(0))
+                    }
+                    break;
+
+                default:
+                    break;
+            }
+
+            return arr;
+        },
+        setSeriesData() {
+            let arr = [];
+            this.config.data.forEach(item=> {
+                let obj = {
+                    name: item.name,
+                    type: 'line',
+                    smooth: true,
+                    symbol: "none",
+                    areaStyle: {
+                        opacity: 1,
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: item.color[0] // 0% 处的颜色
+                            },
+                                {
+                                    offset: 0.4, color: item.color[0] // 40% 处的颜色
+                                }, {
+                                    offset: 1, color: item.color[1] // 100% 处的颜色
+                                }],
+                            global: false // 缺省为 false
+                        }
+                        // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        //     offset: 0, color: item.color[0] // 0% 处的颜色
+                        // },
+                        //     {
+                        //         offset: 0.4, color: item.color[0] // 0% 处的颜色
+                        //     }, {
+                        //         offset: 1, color: item.color[1] // 100% 处的颜色
+                        //     }]), //背景渐变色
+                        // origin: 'start'
+                    },
+                    lineStyle: {
+                        width: 0,
+                    },
+                    itemStyle: {
+                        color: item.color[0]
+                    },
+                    data: this.setData('s')
+                }
+                arr.push(obj)
+            })
+            return arr;
+        },
+        setChart() {
+            let option = {
+                title: {
+                    show: !!this.config.title,
+                    text: this.config.title,
+                    textStyle: {
+                        color: this.config.color,
+                        fontSize: 12,
+                        fontWeight: 'normal'
+                    },
+                    top: '12%',
+                    left: '38%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+
+                    formatter: function (params) {
+                        let str = params[0].name;
+                        params.forEach(item=> {
+                            str += `<br> ${item.seriesName}: ${item.value}`
+                        })
+                        return str
+                    }
+                },
+                legend:
+                    {
+                        top: this.config.title?'23%': '11%',
+                        left: 'center',
+                        itemWidth: 7,
+                        itemHeight:7,
+                        textStyle: {
+                            color: this.config.color,
+                            fontSize: 12
+                        },
+                    },
+                grid:
+                    {
+                        top: this.config.title?'40%': '14%',
+                        left: '5%',
+                        right: '5%',
+                        bottom: '5%',
+                        containLabel: true
+                    },
+                xAxis:
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        axisLabel: {
+                            interval: 0,
+                            color: this.config.color,
+                            fontSize: 9,
+                            align: 'center'
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58',
+                                width: 2,
+                            }
+                        },
+                        axisTick: {show: false},
+                        data: this.setData('x')
+                    },
+                yAxis: [
+                    {
+                        type: 'value',
+                        min: 0,
+                        max: 300,
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisLabel: {
+                            color: this.config.color,
+                            fontSize: 9,
+                            showMaxLabel: false,
+                        },
+                        axisTick: {
+                            length: 3
+                        },
+                        name: this.config.name[0],
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: this.config.color,
+                            fontSize: 9,
+                            align: 'right'
+                        },
+                        splitLine: {show: false}
+
+                    },
+                    {
+                        type: 'value',
+                        min: 0,
+                        max: 300,
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            length: 3
+                        },
+                        axisLabel: {
+                            color: this.config.color,
+                            fontSize: 9,
+                            showMaxLabel: false,
+                        },
+                        name: this.config.name[1],
+                        nameTextStyle: {
+                            color: this.config.color,
+                            fontSize: 9,
+                            align: 'left'
+                        },
+                        nameGap: -5,
+                        splitLine: {show: false}
+                    },
+                ],
+                series: this.setSeriesData()
+            };
+            if (this.selectRangeDate.length > 7) {
+                option.xAxis.axisLabel.interval = 3;
+                option.xAxis.axisLabel.showMaxLabel = false;
+                option.xAxis.axisLabel.align = 'left';
+            }
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart();
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.area {
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/center.vue

@@ -0,0 +1,448 @@
+<template>
+    <div class="main">
+        <svg class="guideLine" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 783 500">
+            <image x="5%" y="20" :xlink:href="$images.center" width="90%" height="100%"/>
+            <image v-if='!status' x="250" y="320" :style="{opacity: number}" :xlink:href="$images.normal_bg" width="250"
+                   height="170"/>
+            <image v-else id="textBox_1" x="220" y="110" :xlink:href="$images.sensitive_bg" width="300" height="170"/>
+            <template>
+                <g v-for="(item, index) in swiperData" :key="item.title">
+                    <image class="bg_img" :x="item.image.x" :y="item.image.y"
+                           :xlink:href="item.status?$images.sensitive_title:$images.normal_title" width="130"
+                           height="50"/>
+                    <foreignObject class="title_1" @mouseenter="onmouseenter" @mouseleave="onmouseleave" :x="item.pos.x" :y="item.pos.y" :id="'title_'+ (index + 1)" width="100" height="40">
+                        <div class="title-text-box" xmlns="http://www.w3.org/1999/xhtml">
+                            <p :style="{color:item.status?'#FFDBDB':''}">
+                                <span class="titleText">{{ item.title }}</span>
+                                <Rate :show-text="false" disabled v-model="item.rate"></Rate>
+                            </p>
+                        </div>
+                    </foreignObject>
+                    <foreignObject class="text" x="250" y="320" ref="textBox" width="250" height="170">
+                        <div class="text-box" xmlns="http://www.w3.org/1999/xhtml">
+                            <div class="promptBox">
+                                <div class="promptTitle">{{item.title}}</div>
+                                <div class="psychologyContent">
+                                    对当前模块的一些描述...
+                                </div>
+                            </div>
+                        </div>
+                    </foreignObject>
+                    <path :id="'line_'+ (index + 1)" :class='item.path.className' :d="item.path.d" stroke="#AFE5FB" stroke-width="2"
+                          fill="none"/>
+                </g>
+            </template>
+        </svg>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: '',
+    props: {
+        selectRangeDate: Array,
+        _width: Number
+    },
+    data() {
+        return {
+            timer1: null,
+            status: false,
+            timer: null,
+            rid: null,
+            index: 0,
+            number: 0,
+            length: 0,
+            frames: 0,
+            isIE: false,
+            swiperData: [
+                {
+                    image: {
+                        x: 85,
+                        y: 354
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题一',
+                    pos: {
+                      x: 102,
+                      y:364
+                    },
+                    path: {
+                        d: 'M150,402 L150,432 250,432',
+                        className: 'swap1'
+                    }
+                },
+                {
+                    image: {
+                        x: 58,
+                        y: 224
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题二',
+                    pos: {
+                      x: 76,
+                      y:232
+                    },
+                    path: {
+                        d: 'M125,272 L125,337 250,337',
+                        className: 'swap2'
+                    }
+                },
+                {
+                    image: {
+                        x: 87,
+                        y: 110
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题三',
+                    pos: {
+                        x: 105,
+                        y:118
+                    },
+                    path: {
+                        d: 'M207,135 L260,135 260,322',
+                        className: 'swap3'
+                    }
+                },
+                {
+                    image: {
+                        x: 310,
+                        y: 40
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题四',
+                    pos: {
+                      x: 328,
+                      y: 49
+                    },
+                    path: {
+                        d: 'M319,66 L279,66 279,321',
+                        className: 'swap4'
+                    }
+                },
+                {
+                    image: {
+                        x: 522,
+                        y: 110
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题五',
+                    pos: {
+                        x: 538,
+                        y: 118
+                    },
+                    path: {
+                        d: 'M538,135 L485,135 485,322',
+                        className: 'swap3'
+                    }
+                },
+                {
+                    image: {
+                        x: 560,
+                        y: 224
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题六',
+                    pos: {
+                        x: 578,
+                        y: 230
+                    },
+                    path: {
+                        d: 'M625,272 L625,337 500,337',
+                        className: 'swap2'
+                    }
+                },
+                {
+                    image: {
+                        x: 538,
+                        y: 354
+                    },
+                    status: false,
+                    rate:0,
+                    title: '标题七',
+                    pos: {
+                        x: 555,
+                        y: 364
+                    },
+                    path: {
+                        d: 'M600,402 L600,432 500,432',
+                        className: 'swap1'
+                    }
+                }
+            ],
+            psychologicalRate: 0,
+            speechRate: 0,
+            internetPreferenceRate: 0,
+            riskRate: 0,
+            makeFriendRate: 0,
+            entertainmentPreferenceRate: 0,
+            consumptionCharacteristicsRate: 0,
+            psychologicalStatus: false,
+            speechStatus: false,
+            internetPreferenceStatus: false,
+            riskStatus: false,
+            entertainmentPreferenceStatus: false,
+            makeFriendStatus: false,
+            consumptionCharacteristicsStatus: false,
+        }
+    },
+    methods: {
+        // mouseenter
+        onmouseenter(e) {
+            document.querySelectorAll('.text').forEach(item=>item.style.opacity = 0);
+            document.querySelectorAll('.swap1').forEach(item=>item.style.strokeDashoffset = 130);
+            document.querySelectorAll('.swap2').forEach(item=>item.style.strokeDashoffset = 190);
+            document.querySelectorAll('.swap3').forEach(item=>item.style.strokeDashoffset = 240);
+            document.querySelectorAll('.swap4').forEach(item=>item.style.strokeDashoffset = 295);
+            cancelAnimationFrame(this.rid);
+            this.rid = null;
+            clearTimeout(this.timer)
+            this.timer = null;
+            this.animation(Number(e.currentTarget.id.substr(e.currentTarget.id.length - 1, 1)), true);
+        },
+        //mouseleave
+        onmouseleave() {
+            this.animation(1, false);
+        },
+        frame() {
+            cancelAnimationFrame(this.rid);
+            this.rid = null;
+            this.rid = requestAnimationFrame(this.frame);
+            let line = document.querySelector("#line_" + this.index);
+            line.style.strokeDashoffset = this.frames;
+            line.getPointAtLength(this.length - this.frames);
+            line.getPointAtLength((this.length - this.frames + 2) % this.length);
+            if (this.index > 1) {
+                line = document.querySelector("#line_" + (this.index - 1));
+                this.$refs.textBox[this.index - 2].style.opacity = 0;
+                line.style.strokeDashoffset = line.style.strokeDasharray;
+            }
+            if (this.index === 1) {
+                for (let i = 2; i < 8; i++) {
+                    line = document.querySelector("#line_" + i);
+                    this.$refs.textBox[i - 1].style.opacity = 0;
+                    line.style.strokeDashoffset = line.style.strokeDasharray;
+                }
+            }
+            this.$refs.textBox[this.index - 1].style.opacity = this.number;
+            this.number += 5 / this.length;
+            this.frames -= 5;
+            if (this.frames <= -5) {
+                cancelAnimationFrame(this.rid);
+                this.rid = null;
+            }
+        },
+        animation(i, boolean) {
+            clearTimeout(this.timer);
+            cancelAnimationFrame(this.rid);
+            this.rid = null;
+            this.timer = null;
+            if (i > 7) {
+                i = 1;
+            }
+            this.swiperData.forEach(item=>item.status = false);
+            this.swiperData[i-1].status = true;
+            const line = document.querySelector("#line_" + i);
+            this.length = line.getTotalLength();
+            line.style.strokeDasharray = this.length;
+            line.style.strokeDashoffset = this.length;
+            this.frames = this.length;
+            this.index = i;
+            this.number = 0;
+            this.frame();
+            if (!boolean) {
+                clearTimeout(this.timer);
+                this.timer = null;
+                this.timer = setTimeout(() => {
+                    this.animation(i + 1, boolean);
+                }, 5000);
+            }
+        },
+        // 中心图
+        setChart() {
+            clearTimeout(this.timer1);
+            clearTimeout(this.timer);
+            cancelAnimationFrame(this.rid);
+            this.frames = 0;
+            this.rid = null;
+            this.timer = null;
+            this.timer1 = null
+            this.timer1 = setTimeout(() => {
+                this.animation(1, false);
+            }, 5000);
+
+        }
+    },
+    watch: {
+        selectRangeDate: function () {
+            this.setChart()
+        }
+    },
+    created() {
+        if (!window.SVGForeignObjectElement) {
+            this.isIE = true;
+        }
+    },
+    beforeDestroy() { // 离开页面动画初始化
+        document.querySelectorAll('.text').forEach(item=>item.style.opacity = 0);
+        document.querySelectorAll('.swap1').forEach(item=>item.style.strokeDashoffset = 130);
+        document.querySelectorAll('.swap2').forEach(item=>item.style.strokeDashoffset = 190);
+        document.querySelectorAll('.swap3').forEach(item=>item.style.strokeDashoffset = 240);
+        document.querySelectorAll('.swap4').forEach(item=>item.style.strokeDashoffset = 295);
+        cancelAnimationFrame(this.rid);
+        this.rid = null;
+        clearTimeout(this.timer)
+        clearTimeout(this.timer1)
+        this.timer = null;
+        this.timer1 = null;
+        this.swiperData.forEach(item=>item.status = false);
+    },
+    mounted() {
+        this.setChart();
+    }
+}
+</script>
+
+
+<style lang="less" scoped>
+.main {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .guideLine {
+        width: 100%;
+        height: 100%;
+
+        #textBox_1 {
+            opacity: 0;
+        }
+
+        .title_1 {
+            font-size: 15px;
+            cursor: pointer;
+
+            .title-text-box {
+                background: rgba(0, 0, 0, 0);
+                justify-content: center; //子元素水平居中
+                align-items: center; //子元素垂直居中
+                display: -webkit-flex;
+                height: 100%;
+
+                p {
+                    width: 100%;
+                    background: rgba(0, 0, 0, 0);
+                    color: #A0E8FF;
+                    font-size: 15px;
+                    text-align: center;
+
+                    .titleText {
+                        margin-left: -5px;
+                        font-size: 15px;
+                        display: block;
+                    }
+
+                    /deep/ .ivu-rate {
+                        font-size: 14px;
+
+                        .ivu-rate-star {
+                            margin-right: 6px;
+                        }
+                    }
+
+                }
+            }
+        }
+
+        .text {
+            opacity: 0;
+            color: #fff;
+            font-size: 15px;
+            text-align: center;
+
+            .text-box {
+                background: rgba(0, 0, 0, 0);
+                justify-content: center; //子元素水平居中
+                align-items: center; //子元素垂直居中
+                display: -webkit-flex;
+
+                .promptBox {
+                    width: 100%;
+                    height: 100%;
+                    padding: 10px 20px;
+
+                    .promptTitle {
+                        color: #fff;
+                        font-size: 16px;
+                        font-weight: bold;
+                        margin-bottom: 5px;
+                    }
+
+                    p {
+                        background: rgba(0, 0, 0, 0);
+                        color: #A0E8FF;
+                        font-size: 16px;
+                        text-align: left;
+                    }
+                }
+
+                .psychologyContent {
+                    color: #AFE5FB;
+                    font-size: 16px;
+                    text-align: left;
+
+                    div {
+                        line-height: 2em;
+
+                        span {
+                            &:first-child {
+                                color: #FED723;
+                                cursor: pointer;
+                            }
+                        }
+                    }
+                }
+
+            }
+        }
+
+        .swap1 {
+            stroke-dasharray: 130;
+            stroke-dashoffset: 130;
+        }
+
+        .swap2 {
+            stroke-dasharray: 190;
+            stroke-dashoffset: 190;
+        }
+
+        .swap3 {
+            stroke-dasharray: 240;
+            stroke-dashoffset: 240;
+        }
+
+        .swap4 {
+            stroke-dasharray: 295;
+            stroke-dashoffset: 295;
+        }
+
+        .circle-point {
+            &:hover {
+                fill: #000;
+            }
+        }
+
+        // .swap4{
+        // stroke-dasharray: 110;
+        // stroke-dashoffset: 110;
+        // }
+    }
+}
+</style>

src/views/modules/monitoring/components/page1/chart1.vue

@@ -0,0 +1,477 @@
+<template>
+    <div class="doubleArea"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        selectRangeDate: Array
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setData(type) { // 数据模拟
+            let arr = [];
+            switch (type) {
+                case 'x': // 设置横坐标 时间数据
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push(this.selectRangeDate[i][0] + '.' + this.selectRangeDate[i][1] + '.' + this.selectRangeDate[i][2])
+                    }
+                    break;
+                case 's':// 访问次数数据模拟
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push((Math.random() * 6).toFixed(0))
+                    }
+                    break;
+                case 'n': // 访问人数数据
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push((Math.random() * 600).toFixed(0))
+                    }
+                    break;
+
+                default:
+                    break;
+            }
+            return arr;
+
+        },
+        // 上网行为分析
+        setChart() {
+            let option = {
+
+                legend: { // 图例信息
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#75deef',
+                        fontSize: 12,
+                    },
+                    right: '5%',
+                    top: '5%',
+                },
+                grid: [
+                    { // 上区域图
+                        top: '20%',
+                        bottom: '45%',
+                        left: "8%",
+                        right: '5%',
+                        containLabel: false
+                    },
+                    { // 下区域图
+                        top: '55%',
+                        bottom: '10%',
+                        left: "8%",
+                        right: '5%',
+                        containLabel: false
+
+                    },
+                ],
+                yAxis: [{ // 上区域图 y轴
+                    type: 'value',
+                    inverse: false,
+                    splitNumber: 3,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#1a3c58'
+                        }
+                    },
+                    name: "(次)",
+                    nameTextStyle: {
+                        color: "#75deef",
+                        fontSize: 10,
+                        padding: [0, 15, -10, 0]
+                    },
+                    axisTick: {
+                        show: true
+
+                    },
+                    axisLabel: {
+                        showMaxLabel: true,
+                        color: '#75deef',
+                        fontSize: 9,
+                        fontWeight: 'normal'
+                    },
+                    splitLine: {
+                        show: false,
+                    }
+                },
+                    { // 下区域图 y轴
+                        gridIndex: 1,
+                        splitNumber: 3,
+                        inverse: true,
+                        type: 'value',
+                        name: "(人)",
+                        nameLocation: 'end',
+                        nameTextStyle: {
+                            color: "#75deef",
+                            fontSize: 10,
+                            padding: [-10, 25, 0, 0]
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        position: 'bottom',
+                        axisLabel: {
+                            show: true,
+                            color: '#75deef',
+                            fontSize: 9,
+                            fontWeight: 'normal',
+                            showMaxLabel: true,
+
+                        },
+                        splitLine: {
+                            show: false,
+                            lineStyle: {
+                                width: 0
+                            }
+                        }
+                    }
+                ],
+                xAxis: [
+                    { // 上图x轴
+                        type: 'category',
+                        boundaryGap: false,
+                        z: 2,
+                        nameGap: 0,
+                        axisLine: {
+                            show: false,
+
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        data: this.setData('x')
+
+                    },
+                    { // 下图x轴
+                        gridIndex: 1,
+                        type: 'category',
+                        boundaryGap: false,
+                        axisLine: {
+                            show: true,
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [4, 8],
+                            symbolOffset: [0, 8],
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        z: 2,
+                        axisTick: {
+                            show: false,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        data: this.setData('x')
+                    },
+                    { // 最下刻度轴
+                        gridIndex: 1,
+                        position: 'bottom',
+                        type: 'category',
+                        name: "日",
+                        nameLocation: 'end',
+                        nameTextStyle: {
+                            color: "#75deef",
+                            fontSize: 9,
+                            padding: [25, 0, 0, -25]
+                        },
+                        boundaryGap: false,
+                        axisLine: { // 轴线
+                            show: true,
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [4, 8],
+                            symbolOffset: [0, 8],
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        z: 2,
+                        axisTick: { // 刻度
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisLabel: { // 标签
+                            show: true,
+                            interval: 0,
+                            showMaxLabel: false,
+                            align: "left",
+                            color: '#75deef',
+                            fontSize: 9,
+                            fontWeight: 'normal',
+
+                        },
+                        data: this.setData('x')
+
+                    }
+                ],
+                tooltip: { // hover 提示框
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                    formatter: (data) => {
+                        if (data[0].componentIndex == 0) { // hover 到上图的时候
+                            return data[0].name + '<br>' + data[0].seriesName + ":" + data[0].value + "次" + '<br>' + data[1].seriesName + ":" + data[1].value + "次"
+                        } else {
+                            return data[0].name + '<br>' + data[0].seriesName + ":" + data[0].value + "人" + '<br>' + data[1].seriesName + ":" + data[1].value + "人"
+                        }
+                    }
+                },
+                series: [ // 面积图
+                    {
+                        name: '数据1',
+                        type: 'line',
+                        symbol: 'none',
+                        smooth: true,
+                        lineStyle: {
+                            width: 1,
+                            color: {
+                                type: 'linear',
+                                x: 1,
+                                y: 0,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        areaStyle: {
+                            opacity: .18,
+                            color: 'rgba(243, 121, 46, 1)'
+                        },
+
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: this.setData('s')
+                    },
+                    {
+                        name: '数据2',
+                        type: 'line',
+                        symbol: 'none',
+                        smooth: true,
+                        lineStyle: {
+                            width: 1,
+                            color: {
+                                type: 'linear',
+                                x: 1,
+                                y: 0,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        areaStyle: {
+                            opacity: .5,
+                            color: 'rgba(19, 34, 96, 1)'
+                        },
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: this.setData('s')
+                    },
+                    {
+                        name: '数据1',
+                        type: 'line',
+                        symbol: 'none',
+                        smooth: true,
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        lineStyle: {
+                            width: 1,
+                            color: {
+                                type: 'linear',
+                                x: 1,
+                                y: 0,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        areaStyle: {
+                            opacity: .18,
+                            color: 'rgba(243, 121, 46, 1)'
+                        },
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(250, 206, 21, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(253, 116, 48, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: this.setData('n')
+                    },
+
+                    {
+                        name: '数据2',
+                        type: 'line',
+                        symbol: 'none',
+                        smooth: true,
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        lineStyle: {
+                            width: 1,
+                            color: {
+                                type: 'linear',
+                                x: 1,
+                                y: 0,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        areaStyle: {
+                            opacity: .5,
+                            color: 'rgba(19, 34, 96, 1)'
+                        },
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(51, 231, 252, 1)' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'rgba(11, 120, 227, 1)' // 100% 处的颜色
+                                    }
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: this.setData('n')
+                    },
+
+                ]
+            };
+            if (this.selectRangeDate.length > 7) { // 当x轴数据超过7个的时候 x轴刻度显示
+                option.xAxis[2].axisLabel.interval = 3; // x轴刻度隔3个显示
+                option.xAxis[2].axisLabel.showMaxLabel = false;
+
+            }
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    watch: {
+        selectRangeDate: function () { // 检测selectRangeDate 数据变化
+            this.setChart()
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.doubleArea {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart2.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="webBar"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setData() {
+            var max = Math.max.apply(null, this.data.value);
+            var arr = []
+            for (let i = 0; i < 6; i++) {
+                arr.push(max / 10)
+            }
+            return arr;
+        },
+        // 网站
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                    formatter: (params) => {
+                        params[1].number = this.data.number
+                        return params[1].name + "<br>" + params[1].seriesName + ":" + params[1].number + "/" + params[1].value + "人"
+                    }
+                },
+                grid: {
+                    left: '4%',
+                    top: '5%',
+                    bottom: 10,
+
+                    containLabel: true,
+                },
+                yAxis:
+                    {
+                        type: 'category',
+                        inverse: true,
+                        position: 'left',
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: true,
+                            margin: 13,
+                            fontSize: 10,
+                            color: '#75deef'
+                        },
+                        data: this.data.data
+                    },
+                xAxis:
+                    {
+                        type: 'value',
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: false,
+                        }
+                    }
+                ,
+                series: [
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        stack: '总量',
+                        barCategoryGap: 20,
+                        barWidth: 8,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: this.setData()
+                    },
+                    {
+                        name: this.data.name,
+                        type: 'bar',
+                        stack: '总量',
+                        barCategoryGap: 20,
+                        barWidth: 8,
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgb(' + this.data.color + ',0.1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgb(' + this.data.color + ',1)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: this.data.value
+                    },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize();
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.webBar {
+    float: left;
+    width: 60%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart3.vue

@@ -0,0 +1,357 @@
+<template>
+    <div class="popularBar"></div>
+</template>
+
+<script>
+export default {
+    name: 'popularBar',
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        setOptionData() {
+            let nameData = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '其他'];
+            let data = [45, 33, 13, 25, 30, 35, 45];
+            let colorList = ['#2871ea', '#fbe831', '#2ea5fe', '#fc662f', '#9f56f0', '#bf232c', '#64cef2'];
+            let arr = [];
+            for (let i = 0; i < data.length; i++) {
+                let obj = {
+                    name: nameData[i],
+                    value: data[i],
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [{
+                                offset: 0, color: colorList[i] // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#922aea' // 100% 处的颜色
+                            }],
+                            globalCoord: false // 缺省为 false
+                        }
+                    }
+                }
+                arr.push(obj)
+            }
+            return arr;
+        },
+        setChart() {
+            let option = {
+                grid: [{
+                    top: '10%',
+                    bottom: '15%',
+                    right: '5%',
+                    left: '55.5%'
+                },
+                    {
+                        top: '10%',
+                        bottom: '15%',
+                        right: '52.5%',
+                        left: '8%'
+                    }
+                ],
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                    formatter: (params) => {
+                        if (params[5].seriesName == '人数') {
+                            return params[5].name + ':' + params[5].value + '人'
+                        } else {
+                            return params[5].name + ':' + params[5].value + '次'
+                        }
+
+                    }
+                },
+                yAxis: [
+                    {
+                        data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '其他'],
+                        axisTick: {
+                            show: true,
+                            inside: true,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        inverse: true,
+                        axisLabel: {
+                            show: false,
+                            fontSize: 10,
+                            margin: 4,
+                            inside: true,
+                            color: 'rgb(113,227,247)'
+                        }
+                    },
+                    {
+                        data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '其他'],
+                        gridIndex: 1,
+                        position: 'right',
+                        axisTick: {
+                            show: true,
+                            inside: true,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        inverse: true,
+                        axisLabel: {
+                            show: false,
+                            fontSize: 10,
+                            margin: 4,
+                            inside: true,
+                            color: 'rgb(113,227,247)'
+                        }
+                    },
+                ],
+                xAxis: [{
+                    type: 'value',
+
+                    splitLine: {show: false},
+                    axisTick: {show: true},
+                    axisLabel: {
+                        show: true,
+                        color: '#75deef',
+                        fontSize: 9,
+                        showMaxLabel: false,
+                    },
+                    name: '(人)',
+                    nameGap: -5,
+                    nameTextStyle: {
+                        color: '#75deef',
+                        fontSize: 9,
+                        align: 'left',
+                        padding: [0, 0, -24, 0]
+                    },
+                    max: 60,
+                    splitNumber: 6,
+                    min: 10,
+                    scale: true,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#1a3c58'
+                        }
+                    },
+                },
+                    {
+                        type: 'value',
+                        inverse: true,
+                        splitLine: {show: false},
+                        axisTick: {show: true},
+                        gridIndex: 1,
+                        axisLabel: {
+                            show: true,
+                            color: '#75deef',
+                            fontSize: 9,
+                            showMaxLabel: false,
+                        },
+                        name: '(次)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 0, -24, 0]
+                        },
+                        max: 60,
+                        splitNumber: 7,
+                        min: 10,
+                        scale: true,
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        stack: 'a',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: [15, 15, 15, 15, 15, 15, 15]
+                    },
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        stack: 'a',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: [13, 13, 13, 13, 13, 13, 13]
+                    },
+                    {
+                        type: 'bar',
+                        stack: 'a',
+                        silent: true,
+                        barWidth: 5,
+                        barGap: '-100%', // Make series be overlap
+                        data: [50, 50, 50, 50, 50, 50, 50],
+                        itemStyle: {
+                            color: '#242346'
+                        }
+
+                    },
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        stack: 'b',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: [15, 15, 15, 15, 15, 15, 15]
+                    },
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        stack: 'b',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: '#c0232a'
+                        },
+                        data: [13, 13, 13, 13, 13, 13, 13]
+                    },
+                    {
+                        name: '人数',
+                        type: 'bar',
+                        barWidth: 5,
+                        stack: 'b',
+                        barCategoryGap: 20,
+                        z: 10,
+                        label: {
+                            show: true,
+                            formatter: '{b}',
+                            position: 'insideBottomLeft',
+                            offset: [-10, 0],
+                            fontSize: 12,
+                            color: '#75deef'
+                        },
+                        data: this.setOptionData(),
+
+                    },
+                    {
+                        name: '辅助',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        type: 'bar',
+                        stack: 'c',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: [15, 15, 15, 15, 15, 15, 15]
+                    },
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        stack: 'c',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: [13, 13, 13, 13, 13, 13, 13]
+                    },
+                    {
+                        type: 'bar',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        stack: 'c',
+                        silent: true,
+                        barWidth: 5,
+                        barGap: '-100%', // Make series be overlap
+                        data: [50, 50, 50, 50, 50, 50, 50],
+                        itemStyle: {
+                            color: '#242346'
+                        }
+
+                    },
+                    {
+                        name: '辅助',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        type: 'bar',
+                        stack: 'd',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: 'rgba(0,0,0,0)'
+                        },
+                        data: [15, 15, 15, 15, 15, 15, 15]
+                    },
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        stack: 'd',
+                        barWidth: 5,
+                        itemStyle: {
+                            color: '#c0232a'
+                        },
+                        data: [13, 13, 13, 13, 13, 13, 13]
+                    },
+                    {
+                        name: '次数',
+                        type: 'bar',
+                        barWidth: 5,
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        stack: 'd',
+                        barCategoryGap:20,
+                        z: 10,
+                        label: {
+                            show: true,
+                            formatter: '{b}',
+                            position: 'insideBottomRight',
+                            offset: [10, 0],
+                            fontSize: 12,
+                            color: '#75deef'
+                        },
+                        data: this.setOptionData(),
+
+                    }
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.popularBar {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart4.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="ring"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                title: {
+                    text: '【' + this.data.title + '】',
+                    top: 20,
+                    x: 'center',
+                    textStyle: {
+                        color: '#75deef',
+                        fontSize: 14,
+                        fontWeight: 'normal'
+                    }
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{b}: {c} ({d}%)",
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                series: [
+                    {
+                        name: this.data.title,
+                        type: 'pie',
+                        radius: ['40%', '60%'],
+                        center: ['50%', '55%'],
+                        avoidLabelOverlap: true,
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            fontSize: 10,
+                            color: '#75deef'
+                        },
+                        labelLine: {
+                            show: true,
+                            length: 8,
+                            length2: 5,
+                            lineStyle: {
+                                color: '#303851'
+                            }
+                        },
+                        data: this.data.data
+                    }
+                ]
+            };
+            if (!this.myChart) this.myChart= this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.ring {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart5.vue

@@ -0,0 +1,438 @@
+<template>
+    <div class="lines">
+        <div class="switchButton">
+            <a :class="{'active':value==1}" @click="handleSelect(1)">月</a><a :class="{'active':value==2}"
+                                                                             @click="handleSelect(2)">日</a>
+        </div>
+        <div id="bottom_1">
+
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            value: 2,
+            xAxisData: [],
+            seriesData: [],
+            selected: {},
+            legendData: [],
+            myChart: null
+        }
+    },
+    methods: {
+        handleSelect(val) {
+            this.xAxisData = [];
+            this.seriesData = [];
+            this.legendData = [];
+            this.selected = {};
+            this.value = val;
+            let curYear = new Date().getFullYear();
+            let curMonth = new Date().getMonth();
+
+            let colorList = ['#bf232a', '#feed2c', '#2c7bfe', '#feac2c', '#ff7b7e', '#2cd9fe', '#a262f2', '#2ca8fe'];
+            if (val == 1) {
+                let year = [curYear - 1, curYear];
+                for (let i = 0; i < 12; i++) {
+                    this.xAxisData.push((i + 1) + '月');
+                }
+                for (let i = 0; i < year.length; i++) {
+                    this.legendData.push(year[i] + '年');
+                    let obj = {
+                        name: year[i] + '年',
+                        type: 'line',
+                        symbol: 'circle',
+                        smooth: false,
+                        itemStyle: {
+                            color: colorList[i % 8]
+                        },
+                        lineStyle: {
+                            width: 1,
+                            color: colorList[i % 8],
+                        },
+                        data: []
+                    }
+                    for (let j = 0; j < 12; j++) {
+                        obj.data.push((Math.random() * 300).toFixed(0));
+                    }
+                    let obj1 = {
+                        name: year[i] + '年',
+                        type: 'line',
+                        symbol: 'circle',
+                        smooth: false,
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        itemStyle: {
+                            color: colorList[i % 8]
+                        },
+                        lineStyle: {
+                            width: 1,
+                            color: colorList[i % 8],
+                        },
+                        data: []
+                    }
+                    for (let j = 0; j < 12; j++) {
+                        obj1.data.push((Math.random() * 300).toFixed(0));
+                    }
+                    this.seriesData.push(obj);
+                    this.seriesData.push(obj1);
+                }
+
+            } else {
+                let dateLength = new Date(curYear, curMonth, 0).getDate();
+                for (let i = 0; i < dateLength; i++) {
+                    this.xAxisData.push((i + 1) + '号');
+
+                }
+                for (let i = 0; i < 12; i++) {
+                    this.legendData.push((i + 1) + '月');
+                    this.selected[(i + 1) + '月'] = false;
+                    if (i < 4) {
+                        this.selected[(i + 1) + '月'] = true;
+                    }
+                    let obj = {
+                        name: (i + 1) + '月',
+                        type: 'line',
+                        symbol: 'circle',
+                        smooth: false,
+                        itemStyle: {
+                            color: colorList[i % 8]
+                        },
+                        lineStyle: {
+                            width: 1,
+                            color: colorList[i % 8],
+                        },
+                        data: []
+                    }
+                    for (let j = 0; j < dateLength; j++) {
+                        obj.data.push((Math.random() * 300).toFixed(0));
+                    }
+                    let obj1 = {
+                        name: (i + 1) + '月',
+                        type: 'line',
+                        symbol: 'circle',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        smooth: false,
+                        itemStyle: {
+                            color: colorList[i % 8]
+                        },
+                        lineStyle: {
+                            width: 1,
+                            color: colorList[i % 8],
+                        },
+                        data: []
+                    }
+                    for (let j = 0; j < dateLength; j++) {
+                        obj1.data.push((Math.random() * 300).toFixed(0));
+                    }
+
+                    this.seriesData.push(obj);
+                    this.seriesData.push(obj1);
+                }
+
+            }
+            this.setChart()
+        },
+        // 金钱交易分析
+        setChart() {
+            let option = {
+                title: [
+                    {
+                        text: '【交易笔数分析】',
+                        textStyle: {
+                            fontSize: 12,
+                            color: '#75deef',
+                            fontWeight: 'normal'
+                        },
+                        top: '24%',
+                        left: '20%'
+                    },
+                    {
+                        text: '【交易金额分析】',
+                        textStyle: {
+                            fontSize: 12,
+                            color: '#75deef',
+                            fontWeight: 'normal'
+                        },
+                        top: '24%',
+                        right: '12%'
+                    },
+                ],
+                grid: [
+                    {
+                        show: false,
+                        left: '2%',
+                        top: '38%',
+                        right: '51%',
+                        bottom: 0,
+                        containLabel: true,
+                    },
+                    {
+                        show: false,
+                        left: '51%',
+                        top: "38%",
+                        bottom: 0,
+                        right: '2%',
+                        containLabel: true,
+
+                    },
+                ],
+                tooltip: {
+                    trigger: 'item',
+                    axisPointer: {
+                        type: 'none',
+
+                    },
+                    backgroundColor: '#11367a',
+                    formatter: (params) => {
+                        let seriesId = params.seriesId.substr(params.seriesId.length - 1, 1)
+                        if (seriesId == 0) {
+                            return params.seriesName + "/" + params.name + "<br>" + "交易笔数:" + params.value + '笔'
+                        } else {
+                            return params.seriesName + "/" + params.name + "<br>" + "交易金额:" + params.value + '元'
+                        }
+
+                    },
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                legend: {
+                    type: 'scroll',
+                    top: '10%',
+                    textStyle: {
+                        color: '#75deef',
+                        padding: [3, 0, 0, 0],
+                        fontSize: 12
+                    },
+                    pageTextStyle: {
+                        color: '#75deef'
+                    },
+                    pageIconSize: 10,
+                    pageIconColor: '#75deef',
+                    itemWidth: 12,
+                    itemHeight: 7,
+                    right: "15%",
+                    left: '15%',
+                    selected: this.selected,
+                    data: this.legendData
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: this.xAxisData,
+                        boundaryGap: false,
+                        axisLabel: {
+                            fontSize: 9,
+                            color: '#75deef',
+                            interval: 0,
+                            showMaxLabel: true,
+                            showMinLabel: true,
+                            formatter: (value, index) => {
+                                if (this.value == 1) {
+                                    if (index % 2 == 1) {
+                                        return value
+                                    }
+                                } else {
+                                    if ((index + 1) % 5 == 0) {
+                                        return value
+                                    }
+                                }
+                                if (index == 0) {
+                                    return value
+                                }
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: true,
+                            inside: true
+                        }
+                    },
+                    {
+                        gridIndex: 1,
+                        type: 'category',
+                        data: this.xAxisData,
+                        axisLabel: {
+                            fontSize: 9,
+                            color: '#75deef',
+                            interval: 0,
+                            showMaxLabel: true,
+                            showMinLabel: true,
+                            formatter: (value, index) => {
+                                if (this.value == 1) {
+                                    if (index % 2 == 1) {
+                                        return value
+                                    }
+                                } else {
+                                    if ((index + 1) % 5 == 0) {
+                                        return value
+                                    }
+                                }
+                                if (index == 0) {
+                                    return value
+                                }
+                            }
+                        },
+                        axisLine: {
+
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: true,
+                            inside: true
+                        }
+                    },
+
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        splitLine: {
+                            show: false,
+                        },
+                        min: 0,
+                        max: 300,
+                        splitNumber: 5,
+                        axisLabel: {
+                            showMaxLabel: false,
+                            fontSize: 9,
+                            color: '#75deef'
+                        },
+                        name: '(笔)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            length: 3,
+                        }
+                    },
+
+                    {
+                        gridIndex: 1,
+                        type: 'value',
+                        min: 0,
+                        max: 300,
+                        interval: 50,
+                        splitLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            showMaxLabel: false,
+                            fontSize: 9,
+                            color: '#75deef'
+                        },
+                        name: '(元)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            length: 3,
+                        }
+                    },
+                ],
+                series: this.seriesData
+            };
+            if (!this.myChart) this.myChart = this.$echarts(document.getElementById('bottom_1'));
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+            this.myChart.on('legendselectchanged', (params) => {
+                let arr = [];
+                for (let i in params.selected) {
+                    if (params.selected[i] == true) {
+                        arr.push(params.selected[i])
+                    }
+                }
+                if (arr.length > 4) {
+                    this.$Modal.error({
+                        content: "<p>当前最多显示4个图例</p>"
+                    });
+                    this.myChart.dispatchAction({
+                        type: 'legendUnSelect',
+                        // 图例名称
+                        name: params.name
+                    })
+                }
+
+            });
+        },
+    },
+    mounted() {
+        this.handleSelect(this.value);
+        // this.setChart ();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.lines {
+    height: 100%;
+    width: 100%;
+
+    #bottom_1 {
+        height: 100%;
+        width: 100%;
+    }
+
+    position: relative;
+
+    .switchButton {
+        position: absolute;
+        z-index: 5;
+        right: 10px;
+        top: 15px;
+        border: 1px solid #028bff;
+        border-radius: 5px;
+        padding: 0;
+
+        .active {
+            background: #0454a1;
+        }
+
+        a {
+            display: inline-block;
+            color: #fff;
+            padding: 1px 8px;
+        }
+
+    }
+}
+
+</style>

src/views/modules/monitoring/components/page1/chart6.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="pieMain"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        // 交易支出 饼图
+        setChart() {
+            let option = {
+                title: {
+                    text: '【' + this.data.title + '】',
+                    x: 'center',
+                    top: 0,
+                    textStyle: {
+                        color: '#75deef',
+                        fontSize: 12,
+                        fontWeight: 'normal'
+                    }
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{b} : {c} ({d}%)",
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        startAngle: 160,
+                        radius: [0, '30%'],
+                        label: {
+                            show: true,
+                            position: 'inside',
+                            fontSize: 10,
+                        },
+                        center: ['50%', '60%'],
+                        data: this.data.data,
+                    },
+                    {
+                        type: 'pie',
+                        startAngle: 160,
+                        radius: ['52%', '72%'],
+                        labelLine: {
+                            lineStyle: {
+                                color: '#444b62',
+
+                            },
+                            length: 5,
+                            length2: 5,
+
+                        },
+                        emphasis: {
+                            label: {
+                                color: '#fff',
+                                show: true,
+                            },
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        label: {
+                            position: 'outside',
+                            borderRadius: 4,
+                            color: '#fff',
+                            fontSize: 10,
+                            padding: 0,
+                            backgroundColor: '#183566',
+                            formatter: "{b}{c}笔/{d}%"
+                        },
+                        center: ['50%', '60%'],
+                        data: this.data.data1
+                    }
+                ]
+            };
+            if(!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+
+            this.myChart.setOption(option);
+            let obj = {
+                type: 'highlight',
+                name: []
+            };
+            for (let i = 0; i < this.data.data.length - 1; i++) {
+                obj.name.push(this.data.data[i].name)
+            }
+            this.myChart.dispatchAction(obj);
+            this.myChart.on('mouseout', function () {
+                this.myChart.dispatchAction(obj);
+            });
+        },
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.pieMain {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart7.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="behaviorBar"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Array
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                title: {
+                    text: '【柱图数据标题】',
+                    textStyle: {
+                        color: '#75deef',
+                        fontSize: 12,
+                        fontWeight: 'normal'
+                    },
+                    top: '5%',
+                    left: '31%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    formatter: "{b}:{c1}",
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                grid:
+                    {
+                        top: '25%',
+                        left: '1%',
+                        right: '4%',
+                        bottom: '4%',
+                        containLabel: true,
+
+                    },
+                xAxis:
+                    {
+                        type: 'category',
+                        axisLabel: {
+                            interval: 0,
+                            color: '#75deef',
+                            fontSize: 9,
+                            showMinLabel: true
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#1a3c58',
+                                width: 2
+                            }
+                        },
+                        axisTick: {show: false},
+
+                        data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8']
+                    },
+                yAxis: [
+                    {
+                        type: 'value',
+                        min: 0,
+                        max: 300,
+                        axisLabel: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            showMaxLabel: false,
+                        },
+                        name: '(个)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        },
+                        axisTick: {
+                            length: 3
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+
+                        splitLine: {show: false}
+
+                    },
+                ],
+                series: [
+                    {
+                        name: '辅助',
+                        type: 'bar',
+                        barWidth: 12,
+                        itemStyle: {
+                            color: "#252448",
+                        },
+                        data: [300, 300, 300, 300, 300, 300, 300, 300]
+                    },
+                    {
+                        name: '数据',
+                        type: 'bar',
+                        barWidth: 12,
+                        barGap: '-100%',
+
+                        data: this.data
+                    },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    }
+
+}
+</script>
+
+<style lang="less" scoped>
+.behaviorBar {
+    height: 45%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart8.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="funnel"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        // 手机安全分析
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{b} : {c}",
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+
+                legend: {
+                    top: '25%',
+                    right: "7%",
+                    orient: "vertical",
+                    itemWidth: 0,
+                    itemGap: 27,
+                    textStyle: {
+                        color: '#75deef',
+                        fontSize: 14
+                    },
+                    data: ['数据1', '数据2', '数据3', '数据4', '数据5']
+                },
+                series: [
+                    {
+                        name: '预期',
+                        type: 'funnel',
+                        left: '6%',
+                        width: '60%',
+                        height: '75%',
+                        label: {
+                            show: false
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        itemStyle: {
+                            borderWidth: 0,
+                            opacity: .7,
+                            color: function (params) {
+
+                                var colorList = [
+                                    '#2c7afc', '#bd2229', '#a262f2', '#fe672c', '#27fcfe'
+                                ];
+                                return colorList[params.dataIndex];
+                            }
+                        },
+                        data: [
+                            {value: 100, name: '数据1'},
+                            {value: 80, name: '数据2'},
+                            {value: 60, name: '数据3'},
+                            {value: 40, name: '数据4'},
+                            {value: 20, name: '数据5'}
+                        ]
+                    },
+                    {
+                        name: '实际',
+                        type: 'funnel',
+                        left: '6%',
+                        height: '75%',
+                        width: '60%',
+                        maxSize: '60%',
+                        z: 3,
+                        label: {
+                            position: 'inside',
+                            formatter: '{c}个',
+                            color: '#fff'
+                        },
+                        emphasis: {
+                            label: {
+                                position: 'inside',
+                            }
+                        },
+                        itemStyle: {
+                            opacity: .5,
+                            borderWidth: 0,
+                            color: function (params) {
+                                var colorList = [
+                                    'rgb(44,123,254)', 'rgb(194,35,42)', 'rgb(162,98,242)', 'rgb(254,103,44)', 'rgb(44,252,254)'
+                                ];
+                                return colorList[params.dataIndex];
+                            }
+                        },
+                        data: [
+                          {value: 100, name: '数据1'},
+                          {value: 80, name: '数据2'},
+                          {value: 60, name: '数据3'},
+                          {value: 40, name: '数据4'},
+                          {value: 20, name: '数据5'}
+                        ]
+                    }
+                ]
+            };
+
+            if(!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.funnel {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page1/chart9.vue

@@ -0,0 +1,438 @@
+<template>
+    <div style="height:100%;"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null,
+            seriesData: [
+              {name: '分类1', value: 380, data: [3600, 7200, 4800, 9000, 5200, 1800, 2400, 600]},
+              {name: '分类2', value: 300, data: [2800, 5800, 3600, 7000, 6400, 3600, 5400, 4600]},
+              {name: '分类3', value: 240, data: [2600, 3200, 5800, 2000, 3200, 5800, 7400, 2600]},
+              {name: '分类4', value: 200, data: [1600, 4200, 2800, 1000, 7200, 5800, 3400, 5600]},
+              {name: '分类5', value: 150, data: [5600, 6200, 6800, 3000, 1200, 5800, 4400, 2500]},
+              {name: '分类6', value: 100, data: [6600, 8200, 5800, 4000, 2200, 3800, 7400, 3600]},
+              {name: '分类7', value: 100, data: [7600, 1200, 3800, 7000, 1200, 3800, 5400, 2600]},
+              {name: '分类8', value: 50, data: [6600, 1200, 2800, 3000, 6200, 5800, 4400, 1600]}
+            ]
+        }
+    },
+    methods: {
+        setOptionData() {
+            let colorList = ['#2c7bfe', '#c2232a', '#feed2c', '#a262f2', '#62d5f2', '#fe672c', '#2c7bfe', '#69f262'];
+            let arr = [];
+            for (let i = 0; i < this.seriesData.length; i++) {
+                let values = [0, 0, 0, 0, 0, 0, 0, 0];
+                values.splice(i, 1, this.seriesData[i].value);
+                let obj = {
+                    name: this.seriesData[i].name,
+                    type: 'bar',
+                    z: 3,
+                    barWidth: 10,
+                    barGap: '-100%',
+                    itemStyle: {
+                        color: colorList[i]
+                    },
+                    data: values
+                }
+
+                arr.push(obj);
+            }
+            for (let i = 0; i < this.seriesData.length; i++) {
+                let obj = {
+                    type: 'line',
+                    name: this.seriesData[i].name,
+                    symbol: 'circle',
+                    smooth: true,
+                    symbolSize: 4,
+                    xAxisIndex: 2,
+                    yAxisIndex: 3,
+                    data: this.seriesData[i].data,
+                    lineStyle: {
+                        width: 1
+                    },
+                    itemStyle: {
+                        color: colorList[i]
+                    }
+                };
+                let obj1 = {
+                    type: 'line',
+                    name: this.seriesData[i].name,
+                    symbol: 'circle',
+                    symbolSize: 4,
+                    smooth: true,
+                    xAxisIndex: 3,
+                    yAxisIndex: 5,
+                    data: this.seriesData[i].data,
+                    lineStyle: {
+                        width: 1
+                    },
+                    itemStyle: {
+                        color: colorList[i]
+                    }
+                };
+
+                arr.push(obj);
+                arr.push(obj1);
+            }
+            let arr1 = [
+                {
+                    name: '辅助',
+                    type: 'bar',
+                    barWidth: 10,
+                    barGap: '-100%',
+                    itemStyle: {
+                        color: '#252448'
+                    },
+                    data: [500, 500, 500, 500, 500, 500, 500, 500]
+                },
+                {
+                    name: '辅助',
+                    xAxisIndex: 1,
+                    yAxisIndex: 1,
+                    type: 'bar',
+                    barWidth: 10,
+                    barGap: '-100%',
+                    itemStyle: {
+                        color: '#252448'
+                    },
+                    data: [500, 500, 500, 500, 500, 500, 500]
+                },
+                {
+                    xAxisIndex: 1,
+                    yAxisIndex: 1,
+                    type: 'bar',
+                    z: 3,
+                    barWidth: 10,
+                    itemStyle: {
+                        color: '#2c7bfe'
+                    },
+                    data: [390, 330, 280, 220, 160, 100, 40]
+                },
+            ]
+            arr = arr.concat(arr1);
+
+            return arr;
+        },
+        /**
+         * 时间秒数格式化
+         * @param s 时间戳（单位：秒）
+         * @returns {*} 格式化后的时分秒
+         */
+        formateData(s) {
+            var t;
+            if (s > -1) {
+                var hour = Math.floor(s / 3600);
+                var min = Math.floor(s / 60) % 60;
+                var sec = s % 60;
+                if (hour != 0) {
+                    t = hour + "时";
+                } else {
+                    t = "";
+                }
+                t += min + "分";
+                t += sec + "秒";
+            }
+            return t;
+        },
+        // 应用使用行为
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                    formatter: (data) => {
+                        if (data.componentSubType == 'bar' && data.seriesName != '辅助') {
+                            return data.name + ":" + data.value
+                        } else if (data.componentSubType == 'line') {
+                            return data.name + "<br>" + data.seriesName + ":" + this.formateData(data.value)
+                        }
+                    }
+                },
+                title: [
+                    {
+                        text: '【类型统计】',
+                        textStyle: {
+                            color: '#75deef',
+                            fontSize: 12,
+                            fontWeight: 'normal'
+                        },
+                        top: '12%',
+                        left: '15%'
+                    },
+                    {
+                        text: '【时长TOP10】',
+                        textStyle: {
+                            color: '#75deef',
+                            fontSize: 12,
+                            fontWeight: 'normal'
+                        },
+                        top: '12%',
+                        right: '14%'
+                    },
+                    {
+                        text: '【使用时长日分布】',
+                        textStyle: {
+                            color: '#75deef',
+                            fontSize: 12,
+                            fontWeight: 'normal'
+                        },
+                        top: '53%',
+                        left: '14%'
+                    },
+                    {
+                        text: '【使用时长时段分布】',
+                        textStyle: {
+                            color: '#75deef',
+                            fontSize: 12,
+                            fontWeight: 'normal'
+                        },
+                        top: '53%',
+                        right: '12%'
+                    }
+                ],
+                legend: [
+                    {
+                        top: '6%',
+                        left: 'center',
+                        itemWidth: 7,
+                        itemHeight: 7,
+                        textStyle: {
+                            color: '#75deef',
+                            fontSize: 12,
+                        },
+                        z: 2,
+                        data: this.seriesData.map(item=>({name: item.name, icon: 'circle'}))
+                    }
+                ],
+                grid: [
+                    {
+                        left: '5%',
+                        top: '20%',
+                        right: '52%',
+                        bottom: '53%',
+                        containLabel: false
+                    },
+                    {
+                        left: '52%',
+                        top: "20%",
+                        right: '3%',
+                        bottom: "53%",
+                        containLabel: false
+                    },
+                    {
+                        left: '8%',
+                        top: '62%',
+                        right: '52%',
+                        bottom: '8%',
+                        containLabel: false
+                    },
+                    {
+                        left: '55%',
+                        top: "62%",
+                        right: '5%',
+                        bottom: "8%",
+                        containLabel: false
+                    },
+                ],
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: this.seriesData.map(item => item.name),
+                        axisLabel: {
+                            interval: 0,
+                            fontSize: 9,
+                            color: '#75deef'
+                        },
+                        axisLine: {show: false},
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    {
+                        type: 'category',
+                        gridIndex: 1,
+                        data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7'],
+                        axisLine: {show: false},
+                        axisLabel: {
+                            interval: 0,
+                            fontSize: 9,
+                            color: '#75deef'
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    {
+                        type: 'category',
+                        gridIndex: 2,
+                        boundaryGap: false,
+                        data: ['8.1', '8.2', '8.3', '8.4', '8.5', '8.6', '8.7'],
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisLabel: {
+                            interval: 0,
+                            fontSize: 9,
+                            color: '#75deef'
+                        },
+                        axisTick: {
+                            show: true
+                        }
+                    },
+                    {
+                        type: 'category',
+                        gridIndex: 3,
+                        boundaryGap: false,
+                        data: ['0.00', '4.00', '8.00', '12.00', '16.00', '20.00', '24.00'],
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisLabel: {
+                            interval: 0,
+                            fontSize: 9,
+                            color: '#75deef'
+                        },
+                        axisTick: {
+                            show: true
+                        }
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        splitLine: {show: false},
+                        axisLabel: {show: false},
+                        axisLine: {show: false},
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    {
+                        type: 'value',
+                        gridIndex: 1,
+                        axisLabel: {show: false},
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    {
+                        type: 'value',
+                        gridIndex: 2,
+                        axisLabel: {
+                            interval: 0,
+                            fontSize: 9,
+                            color: '#75deef',
+                            showMaxLabel: false
+                        },
+                        name: '(小时)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 4, 0, 0]
+                        },
+                        min: 0,
+                        max: 6,
+                        splitLine: {show: false},
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            show: true
+                        }
+                    },
+                    {
+                        type: 'value',
+                        gridIndex: 2,
+                        axisLabel: {show: false},
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    {
+                        type: 'value',
+                        gridIndex: 3,
+                        axisLabel: {
+                            interval: 0,
+                            fontSize: 9,
+                            color: '#75deef',
+                            showMaxLabel: false
+                        },
+                        name: '(小时)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#75deef',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 4, 0, 0]
+                        },
+                        min: 0,
+                        max: 6,
+                        splitLine: {
+                            show: false,
+
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#1a3c58'
+                            }
+                        },
+                        axisTick: {
+                            show: true
+                        }
+                    },
+                    {
+                        type: 'value',
+                        gridIndex: 3,
+                        axisLabel: {show: false},
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                ],
+                series: this.setOptionData()
+            };
+            if(!this.myChart) this.myChart =  this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/modules/monitoring/components/page1/worldMap.vue

@@ -0,0 +1,623 @@
+<template>
+    <div class="worldMap"></div>
+</template>
+
+<script>
+import "@/lib/world.js"
+
+export default {
+    name: 'worldMap',
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        // 通讯行为分析
+        setChart() {
+            var geoCoordMap = {
+                "海门": [121.15, 31.89],
+                "鄂尔多斯": [109.781327, 39.608266],
+                "招远": [120.38, 37.35],
+                "舟山": [122.207216, 29.985295],
+                "齐齐哈尔": [123.97, 47.33],
+                "盐城": [120.13, 33.38],
+                "赤峰": [118.87, 42.28],
+                "青岛": [120.33, 36.07],
+                "乳山": [121.52, 36.89],
+                "金昌": [102.188043, 38.520089],
+                "泉州": [118.58, 24.93],
+                "莱西": [120.53, 36.86],
+                "日照": [119.46, 35.42],
+                "胶南": [119.97, 35.88],
+                "南通": [121.05, 32.08],
+                "拉萨": [91.11, 29.97],
+                "云浮": [112.02, 22.93],
+                "梅州": [116.1, 24.55],
+                "文登": [122.05, 37.2],
+                "上海": [121.48, 31.22],
+                "攀枝花": [101.718637, 26.582347],
+                "威海": [122.1, 37.5],
+                "承德": [117.93, 40.97],
+                "厦门": [118.1, 24.46],
+                "汕尾": [115.375279, 22.786211],
+                "潮州": [116.63, 23.68],
+                "丹东": [124.37, 40.13],
+                "太仓": [121.1, 31.45],
+                "曲靖": [103.79, 25.51],
+                "烟台": [121.39, 37.52],
+                "福州": [119.3, 26.08],
+                "瓦房店": [121.979603, 39.627114],
+                "即墨": [120.45, 36.38],
+                "抚顺": [123.97, 41.97],
+                "玉溪": [102.52, 24.35],
+                "张家口": [114.87, 40.82],
+                "阳泉": [113.57, 37.85],
+                "莱州": [119.942327, 37.177017],
+                "湖州": [120.1, 30.86],
+                "汕头": [116.69, 23.39],
+                "昆山": [120.95, 31.39],
+                "宁波": [121.56, 29.86],
+                "湛江": [110.359377, 21.270708],
+                "揭阳": [116.35, 23.55],
+                "荣成": [122.41, 37.16],
+                "连云港": [119.16, 34.59],
+                "葫芦岛": [120.836932, 40.711052],
+                "常熟": [120.74, 31.64],
+                "东莞": [113.75, 23.04],
+                "河源": [114.68, 23.73],
+                "淮安": [119.15, 33.5],
+                "泰州": [119.9, 32.49],
+                "南宁": [108.33, 22.84],
+                "营口": [122.18, 40.65],
+                "惠州": [114.4, 23.09],
+                "江阴": [120.26, 31.91],
+                "蓬莱": [120.75, 37.8],
+                "韶关": [113.62, 24.84],
+                "嘉峪关": [98.289152, 39.77313],
+                "广州": [113.23, 23.16],
+                "延安": [109.47, 36.6],
+                "太原": [112.53, 37.87],
+                "清远": [113.01, 23.7],
+                "中山": [113.38, 22.52],
+                "昆明": [102.73, 25.04],
+                "寿光": [118.73, 36.86],
+                "盘锦": [122.070714, 41.119997],
+                "长治": [113.08, 36.18],
+                "深圳": [114.07, 22.62],
+                "珠海": [113.52, 22.3],
+                "宿迁": [118.3, 33.96],
+                "咸阳": [108.72, 34.36],
+                "铜川": [109.11, 35.09],
+                "平度": [119.97, 36.77],
+                "佛山": [113.11, 23.05],
+                "海口": [110.35, 20.02],
+                "江门": [113.06, 22.61],
+                "章丘": [117.53, 36.72],
+                "肇庆": [112.44, 23.05],
+                "大连": [121.62, 38.92],
+                "临汾": [111.5, 36.08],
+                "吴江": [120.63, 31.16],
+                "石嘴山": [106.39, 39.04],
+                "沈阳": [123.38, 41.8],
+                "苏州": [120.62, 31.32],
+                "茂名": [110.88, 21.68],
+                "嘉兴": [120.76, 30.77],
+                "长春": [125.35, 43.88],
+                "胶州": [120.03336, 36.264622],
+                "银川": [106.27, 38.47],
+                "张家港": [120.555821, 31.875428],
+                "三门峡": [111.19, 34.76],
+                "锦州": [121.15, 41.13],
+                "南昌": [115.89, 28.68],
+                "柳州": [109.4, 24.33],
+                "三亚": [109.511909, 18.252847],
+                "自贡": [104.778442, 29.33903],
+                "吉林": [126.57, 43.87],
+                "阳江": [111.95, 21.85],
+                "泸州": [105.39, 28.91],
+                "西宁": [101.74, 36.56],
+                "宜宾": [104.56, 29.77],
+                "呼和浩特": [111.65, 40.82],
+                "成都": [104.06, 30.67],
+                "大同": [113.3, 40.12],
+                "镇江": [119.44, 32.2],
+                "桂林": [110.28, 25.29],
+                "张家界": [110.479191, 29.117096],
+                "宜兴": [119.82, 31.36],
+                "北海": [109.12, 21.49],
+                "西安": [108.95, 34.27],
+                "金坛": [119.56, 31.74],
+                "东营": [118.49, 37.46],
+                "牡丹江": [129.58, 44.6],
+                "遵义": [106.9, 27.7],
+                "绍兴": [120.58, 30.01],
+                "扬州": [119.42, 32.39],
+                "常州": [119.95, 31.79],
+                "潍坊": [119.1, 36.62],
+                "重庆": [106.54, 29.59],
+                "台州": [121.420757, 28.656386],
+                "南京": [118.78, 32.04],
+                "滨州": [118.03, 37.36],
+                "贵阳": [106.71, 26.57],
+                "无锡": [120.29, 31.59],
+                "本溪": [123.73, 41.3],
+                "克拉玛依": [84.77, 45.59],
+                "渭南": [109.5, 34.52],
+                "马鞍山": [118.48, 31.56],
+                "宝鸡": [107.15, 34.38],
+                "焦作": [113.21, 35.24],
+                "句容": [119.16, 31.95],
+                "北京": [116.46, 39.92],
+                "徐州": [117.2, 34.26],
+                "衡水": [115.72, 37.72],
+                "包头": [110, 40.58],
+                "绵阳": [104.73, 31.48],
+                "乌鲁木齐": [87.68, 43.77],
+                "枣庄": [117.57, 34.86],
+                "杭州": [120.19, 30.26],
+                "淄博": [118.05, 36.78],
+                "鞍山": [122.85, 41.12],
+                "溧阳": [119.48, 31.43],
+                "库尔勒": [86.06, 41.68],
+                "安阳": [114.35, 36.1],
+                "开封": [114.35, 34.79],
+                "济南": [117, 36.65],
+                "德阳": [104.37, 31.13],
+                "温州": [120.65, 28.01],
+                "九江": [115.97, 29.71],
+                "邯郸": [114.47, 36.6],
+                "临安": [119.72, 30.23],
+                "兰州": [103.73, 36.03],
+                "沧州": [116.83, 38.33],
+                "临沂": [118.35, 35.05],
+                "南充": [106.110698, 30.837793],
+                "天津": [117.2, 39.13],
+                "富阳": [119.95, 30.07],
+                "泰安": [117.13, 36.18],
+                "诸暨": [120.23, 29.71],
+                "郑州": [113.65, 34.76],
+                "哈尔滨": [126.63, 45.75],
+                "聊城": [115.97, 36.45],
+                "芜湖": [118.38, 31.33],
+                "唐山": [118.02, 39.63],
+                "平顶山": [113.29, 33.75],
+                "邢台": [114.48, 37.05],
+                "德州": [116.29, 37.45],
+                "济宁": [116.59, 35.38],
+                "荆州": [112.239741, 30.335165],
+                "宜昌": [111.3, 30.7],
+                "义乌": [120.06, 29.32],
+                "丽水": [119.92, 28.45],
+                "洛阳": [112.44, 34.7],
+                "秦皇岛": [119.57, 39.95],
+                "株洲": [113.16, 27.83],
+                "石家庄": [114.48, 38.03],
+                "莱芜": [117.67, 36.19],
+                "常德": [111.69, 29.05],
+                "保定": [115.48, 38.85],
+                "湘潭": [112.91, 27.87],
+                "金华": [119.64, 29.12],
+                "岳阳": [113.09, 29.37],
+                "长沙": [113, 28.21],
+                "衢州": [118.88, 28.97],
+                "廊坊": [116.7, 39.53],
+                "菏泽": [115.480656, 35.23375],
+                "合肥": [117.27, 31.86],
+                "武汉": [114.31, 30.52],
+                "大庆": [125.03, 46.58],
+                '阿富汗': [67.709953, 33.93911],
+                '安哥拉': [17.873887, -11.202692],
+                '阿尔巴尼亚': [20.168331, 41.153332],
+                '阿联酋': [53.847818, 23.424076],
+                '阿根廷': [-63.61667199999999, -38.416097],
+                '亚美尼亚': [45.038189, 40.069099],
+                '法属南半球和南极领地': [69.348557, -49.280366],
+                '澳大利亚': [133.775136, -25.274398],
+                '奥地利': [14.550072, 47.516231],
+                '阿塞拜疆': [47.576927, 40.143105],
+                '布隆迪': [29.918886, -3.373056],
+                '比利时': [4.469936, 50.503887],
+                '贝宁': [2.315834, 9.30769],
+                '布基纳法索': [-1.561593, 12.238333],
+                '孟加拉国': [90.356331, 23.684994],
+                '保加利亚': [25.48583, 42.733883],
+                '巴哈马': [-77.39627999999999, 25.03428],
+                '波斯尼亚和黑塞哥维那': [17.679076, 43.915886],
+                '白俄罗斯': [27.953389, 53.709807],
+                '伯利兹': [-88.49765, 17.189877],
+                '百慕大': [-64.7505, 32.3078],
+                '玻利维亚': [-63.58865299999999, -16.290154],
+                '巴西': [-51.92528, -14.235004],
+                '文莱': [114.727669, 4.535277],
+                '不丹': [90.433601, 27.514162],
+                '博茨瓦纳': [24.684866, -22.328474],
+                '中非共和国': [20.939444, 6.611110999999999],
+                '加拿大': [-106.346771, 56.130366],
+                '瑞士': [8.227511999999999, 46.818188],
+                '智利': [-71.542969, -35.675147],
+                '中国': [104.195397, 35.86166],
+                '象牙海岸': [-5.547079999999999, 7.539988999999999],
+                '喀麦隆': [12.354722, 7.369721999999999],
+                '刚果民主共和国': [21.758664, -4.038333],
+                '刚果共和国': [15.827659, -0.228021],
+                '哥伦比亚': [-74.297333, 4.570868],
+                '哥斯达黎加': [-83.753428, 9.748916999999999],
+                '古巴': [-77.781167, 21.521757],
+                '北塞浦路斯': [33.429859, 35.126413],
+                '塞浦路斯': [33.429859, 35.126413],
+                '捷克共和国': [15.472962, 49.81749199999999],
+                '德国': [10.451526, 51.165691],
+                '吉布提': [42.590275, 11.825138],
+                '丹麦': [9.501785, 56.26392],
+                '多明尼加共和国': [-70.162651, 18.735693],
+                '阿尔及利亚': [1.659626, 28.033886],
+                '厄瓜多尔': [-78.18340599999999, -1.831239],
+                '埃及': [30.802498, 26.820553],
+                '厄立特里亚': [39.782334, 15.179384],
+                '西班牙': [-3.74922, 40.46366700000001],
+                '爱沙尼亚': [25.013607, 58.595272],
+                '埃塞俄比亚': [40.489673, 9.145000000000001],
+                '芬兰': [25.748151, 61.92410999999999],
+                '斐': [178.065032, -17.713371],
+                '福克兰群岛': [-59.523613, -51.796253],
+                '法国': [2.213749, 46.227638],
+                '加蓬': [11.609444, -0.803689],
+                '英国': [-3.435973, 55.378051],
+                '格鲁吉亚': [-82.9000751, 32.1656221],
+                '加纳': [-1.023194, 7.946527],
+                '几内亚': [-9.696645, 9.945587],
+                '冈比亚': [-15.310139, 13.443182],
+                '几内亚比绍': [-15.180413, 11.803749],
+                '赤道几内亚': [10.267895, 1.650801],
+                '希腊': [21.824312, 39.074208],
+                '格陵兰': [-42.604303, 71.706936],
+                '危地马拉': [-90.23075899999999, 15.783471],
+                '法属圭亚那': [-53.125782, 3.933889],
+                '圭亚那': [-58.93018, 4.860416],
+                '洪都拉斯': [-86.241905, 15.199999],
+                '克罗地亚': [15.2, 45.1],
+                '海地': [-72.285215, 18.971187],
+                '匈牙利': [19.503304, 47.162494],
+                '印尼': [113.921327, -0.789275],
+                '印度': [78.96288, 20.593684],
+                '爱尔兰': [-8.24389, 53.41291],
+                '伊朗': [53.688046, 32.427908],
+                '伊拉克': [43.679291, 33.223191],
+                '冰岛': [-19.020835, 64.963051],
+                '以色列': [34.851612, 31.046051],
+                '意大利': [12.56738, 41.87194],
+                '牙买加': [-77.297508, 18.109581],
+                '约旦': [36.238414, 30.585164],
+                '日本': [138.252924, 36.204824],
+                '哈萨克斯坦': [66.923684, 48.019573],
+                '肯尼亚': [37.906193, -0.023559],
+                '吉尔吉斯斯坦': [74.766098, 41.20438],
+                '柬埔寨': [104.990963, 12.565679],
+                '韩国': [127.766922, 35.907757],
+                '科索沃': [20.902977, 42.6026359],
+                '科威特': [47.481766, 29.31166],
+                '老挝': [102.495496, 19.85627],
+                '黎巴嫩': [35.862285, 33.854721],
+                '利比里亚': [-9.429499000000002, 6.428055],
+                '利比亚': [17.228331, 26.3351],
+                '斯里兰卡': [80.77179699999999, 7.873053999999999],
+                '莱索托': [28.233608, -29.609988],
+                '立陶宛': [23.881275, 55.169438],
+                '卢森堡': [6.129582999999999, 49.815273],
+                '拉脱维亚': [24.603189, 56.879635],
+                '摩洛哥': [-7.092619999999999, 31.791702],
+                '摩尔多瓦': [28.369885, 47.411631],
+                '马达加斯加': [46.869107, -18.766947],
+                '墨西哥': [-102.552784, 23.634501],
+                '马其顿': [21.745275, 41.608635],
+                '马里': [-3.996166, 17.570692],
+                '缅甸': [95.956223, 21.913965],
+                '黑山': [19.37439, 42.708678],
+                '蒙古': [103.846656, 46.862496],
+                '莫桑比克': [35.529562, -18.665695],
+                '毛里塔尼亚': [-10.940835, 21.00789],
+                '马拉维': [34.301525, -13.254308],
+                '马来西亚': [101.975766, 4.210484],
+                '纳米比亚': [18.49041, -22.95764],
+                '新喀里多尼亚': [165.618042, -20.904305],
+                '尼日尔': [8.081666, 17.607789],
+                '尼日利亚': [8.675277, 9.081999],
+                '尼加拉瓜': [-85.207229, 12.865416],
+                '荷兰': [5.291265999999999, 52.132633],
+                '挪威': [8.468945999999999, 60.47202399999999],
+                '尼泊尔': [84.12400799999999, 28.394857],
+                '新西兰': [174.885971, -40.900557],
+                '阿曼': [55.923255, 21.512583],
+                '巴基斯坦': [69.34511599999999, 30.375321],
+                '巴拿马': [-80.782127, 8.537981],
+                '秘鲁': [-75.015152, -9.189967],
+                '菲律宾': [121.774017, 12.879721],
+                '巴布亚新几内亚': [143.95555, -6.314992999999999],
+                '波兰': [19.145136, 51.919438],
+                '波多黎各': [-66.590149, 18.220833],
+                '北朝鲜': [127.510093, 40.339852],
+                '葡萄牙': [-8.224454, 39.39987199999999],
+                '巴拉圭': [-58.443832, -23.442503],
+                '卡塔尔': [51.183884, 25.354826],
+                '罗马尼亚': [24.96676, 45.943161],
+                '俄罗斯': [105.318756, 61.52401],
+                '卢旺达': [29.873888, -1.940278],
+                '西撒哈拉': [-12.885834, 24.215527],
+                '沙特阿拉伯': [45.079162, 23.885942],
+                '苏丹': [30.217636, 12.862807],
+                '南苏丹': [31.3069788, 6.876991899999999],
+                '塞内加尔': [-14.452362, 14.497401],
+                '所罗门群岛': [160.156194, -9.64571],
+                '塞拉利昂': [-11.779889, 8.460555],
+                '萨尔瓦多': [-88.89653, 13.794185],
+                '索马里兰': [46.8252838, 9.411743399999999],
+                '索马里': [46.199616, 5.152149],
+                '塞尔维亚共和国': [21.005859, 44.016521],
+                '苏里南': [-56.027783, 3.919305],
+                '斯洛伐克': [19.699024, 48.669026],
+                '斯洛文尼亚': [14.995463, 46.151241],
+                '瑞典': [18.643501, 60.12816100000001],
+                '斯威士兰': [31.465866, -26.522503],
+                '叙利亚': [38.996815, 34.80207499999999],
+                '乍得': [18.732207, 15.454166],
+                '多哥': [0.824782, 8.619543],
+                '泰国': [100.992541, 15.870032],
+                '塔吉克斯坦': [71.276093, 38.861034],
+                '土库曼斯坦': [59.556278, 38.969719],
+                '东帝汶': [125.727539, -8.874217],
+                '特里尼达和多巴哥': [-61.222503, 10.691803],
+                '突尼斯': [9.537499, 33.886917],
+                '土耳其': [35.243322, 38.963745],
+                '坦桑尼亚联合共和国': [34.888822, -6.369028],
+                '乌干达': [32.290275, 1.373333],
+                '乌克兰': [31.16558, 48.379433],
+                '乌拉圭': [-55.765835, -32.522779],
+                '美国': [-95.712891, 37.09024],
+                '乌兹别克斯坦': [64.585262, 41.377491],
+                '委内瑞拉': [-66.58973, 6.42375],
+                '越南': [108.277199, 14.058324],
+                '瓦努阿图': [166.959158, -15.376706],
+                '西岸': [35.3027226, 31.9465703],
+                '也门': [48.516388, 15.552727],
+                '南非': [22.937506, -30.559482],
+                '赞比亚': [27.849332, -13.133897],
+                '津巴布韦': [29.154857, -19.015438]
+            };
+            var BJData = [
+                [{name: '北京'}, {name: '阿根廷', value: 95}],
+                [{name: '北京'}, {name: '美国', value: 90}],
+                [{name: '北京'}, {name: '南昌', value: 80}],
+            ];
+            var convertData = function (data) {
+                var res = [];
+                for (var i = 0; i < data.length; i++) {
+                    var dataItem = data[i];
+                    var fromCoord = geoCoordMap[dataItem[0].name];
+                    var toCoord = geoCoordMap[dataItem[1].name];
+                    if (fromCoord && toCoord) {
+                        res.push({
+                            fromName: dataItem[0].name,
+                            toName: dataItem[1].name,
+                            coords: [fromCoord, toCoord]
+                        });
+                    }
+                }
+                return res;
+            };
+
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                    formatter: function (data) {
+                        if (data.componentSubType === 'effectScatter') {
+                            return data.data.name + ":" + data.data.value[2] + "次"
+
+                        } else {
+                            console.log(data);
+
+                        }
+
+
+                    }
+                },
+                title: [
+                    {
+                        text: '通话走势',
+                        bottom: '10%',
+                        left: '2%',
+                        textStyle: {
+                            color: '#75deef',
+                            fontSize: 12,
+                        }
+                    },
+                ],
+                legend: {
+                    orient: 'horizontal',
+                    top: '5%',
+                    right: '5%',
+                    data: ['通话'],
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#75deef',
+                        fontSize: 12
+                    }
+                },
+                grid:
+                    {
+                        top: '88%',
+                        left: '3%',
+                        right: '3%',
+                        bottom: '2%',
+
+                    },
+                xAxis:
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#3F4527'
+                            }
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                    },
+                yAxis:
+                    {
+                        type: 'value',
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                geo: {
+                    map: 'world',
+                    zoom: 1.1,
+                    aspectScale: 1,
+                    top: '14%',
+                    left: '8%',
+                    right: '8%',
+                    bottom: '15%',
+                    emphasis: {
+                        itemStyle: {
+                            areaColor: '#2a333d'
+                        },
+                        label: {
+                            show: false
+                        }
+                    },
+                    itemStyle: {
+                        areaColor: 'rgb(40,113,234)',
+                        borderColor: '#111'
+                    }
+                },
+                series: [
+                    {
+                        type: 'lines',
+                        coordinateSystem: 'geo',
+                        lineStyle: {
+                            color: '#f1e816'
+                        },
+                        data: convertData(BJData)
+                    },
+                    {
+                        name: '通话',
+                        type: 'effectScatter',
+                        coordinateSystem: 'geo',
+                        data: BJData.map(function (dataItem) {
+                            return {
+                                name: dataItem[0].name + '-' + dataItem[1].name,
+                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+                            };
+                        }),
+                        symbolSize: function (val) {
+                            return val[2] / 10;
+                        },
+                        label: {
+                            show: false
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                borderColor: '#fff',
+                                borderWidth: 1
+                            }
+                        },
+                        itemStyle: {
+                            color: 'rgb(230,215,5)'
+                        }
+                    },
+                    {
+                        data: [
+
+                            {value: 5, symbol: 'none'},
+                            {value: 23, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 12, symbol: 'none'},
+                            {value: 24, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 23, symbol: 'none'},
+                            {value: 24, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {
+                                value: 24, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(228,234,40,.8)',
+                                    borderWidth: 1,
+                                },
+                            },
+                        ],
+
+                        type: 'line',
+                        name: '通话',
+                        symbol: 'none',
+                        smooth: true,
+
+                        lineStyle: {
+                            color: 'rgba(228,234,40,.8)',
+                            width: 1,
+                        },
+                        areaStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {offset: 0, color: 'rgba(228,234,40,.8)'},
+                                    {offset: 0.5, color: 'rgba(228,234,40,.5)'},
+                                    {offset: 1, color: 'rgba(228,234,40,.1)'}
+                                ],
+                                globalCoord: false // 缺省为 false
+                            }
+                        }
+                    },
+
+                ]
+            }
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.worldMap {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart1.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="barChart"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                legend: {
+                    left: "11%",
+                    top: "15%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#5CB1C1',
+                    }
+                },
+                grid: {
+                    top: '12%',
+                    bottom: '12%',
+                    left: "10%",
+                    right: '10%',
+                    containLabel: false
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: true,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            symbolOffset: [0, 10],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisTick: {show: false},
+                        axisLabel: {
+                            color: '#61B9C8',
+                            fontSize: 10,
+                            interval: 0,
+                        },
+                        data: ["分类1", "分类2", "分类3", "分类4", "分类5", "分类6", "分类7", "分类8", "分类9", "分类10"],
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        scale: true,
+                        max: 400,
+                        min: 0,
+                        interval: 50,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 10
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        name: '(小时)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 4, 0, 0]
+                        },
+                    }
+                ],
+                series: [
+                    {
+                        name: '数据',
+                        type: 'bar',
+                        itemStyle: {
+                            color:{
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: '#50A2F6' // 0% 处的颜色
+                                },
+                                    {
+                                        offset: 0.4, color: '#9490F9' // 40% 处的颜色
+                                    }, {
+                                        offset: 1, color: '#DF7DFD' // 100% 处的颜色
+                                    }],
+                                global: false // 缺省为 false
+                            } //背景渐变色
+                        },
+                        barWidth: 10,
+                        barCategoryGap: 10,
+                        data: [213, 190, 137, 99, 63, 196, 248, 212, 248, 112]
+                    },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.barChart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart2.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="doubleBarChart"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                legend: [
+                    {
+                        top: '8%',
+                        right: '5%',
+                        itemWidth: 7,
+                        itemHeight: 7,
+                        textStyle: {
+                            color: '#5CB1C1',
+                        }
+                    },
+                ],
+                grid:
+                    {
+                        top: '15%',
+                        left: '3%',
+                        right: '5%',
+                        bottom: '8%',
+                        containLabel: true,
+                    },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLabel: {
+                            interval: 0,
+                            color: '#61B9C8',
+                            fontSize: 10
+                        },
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            symbolOffset: [0, 5],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisTick: {show: false},
+                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
+                    },
+                ],
+                yAxis:
+                    {
+                        type: 'value',
+                        min: 0,
+                        max: 300,
+                        axisLabel: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            showMaxLabel: false,
+                        },
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            symbolOffset: [0, 5],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisTick: {
+                            length: 3
+                        },
+                        name: '(人)',
+                        nameGap: -5,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        },
+                        splitLine: {show: false}
+
+                    },
+                series: [
+                    {
+                        name: '新增',
+                        type: 'bar',
+                        barWidth: 7,
+                        stack: '总数',
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: '#FC9386' // 0% 处的颜色
+                                },
+                                    {
+                                        offset: 0.4, color: '#F87B86' // 40% 处的颜色
+                                    }, {
+                                        offset: 1, color: '#F36087' // 100% 处的颜色
+                                    }],
+                                global: false // 缺省为 false
+                            }, //背景渐变色
+                            borderRadius: [3.5, 3.5, 0, 0],
+                        },
+                        data: [120, 102, 101, 134, 190, 130, 120, 190, 130, 120]
+                    },
+                    {
+                        name: '总数',
+                        type: 'bar',
+                        barWidth: 7,
+                        stack: '总数',
+                        itemStyle: {
+                            color: '#8C14EA',
+                            borderRadius: [3.5, 3.5, 0, 0,],
+                        },
+                        data: [120, 132, 101, 134, 90, 130, 110, 90, 130, 120]
+                    },
+
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.doubleBarChart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart3.vue

@@ -0,0 +1,187 @@
+<template>
+    <div class="singleAreaChart"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        selectRangeDate: Array
+    },
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        setData(type) {
+            let arr = [];
+            switch (type) {
+                case 'x':
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push(this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2])
+                    }
+                    break;
+                case 's' :
+                    for (let i = 0; i < this.selectRangeDate.length; i++) {
+                        arr.push((Math.random() * 250).toFixed(0))
+                    }
+                    break;
+
+                default:
+                    break;
+            }
+
+            return arr;
+        },
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    },
+                },
+                grid: {
+                    top: '12%',
+                    bottom: '12%',
+                    left: '5%',
+                    right: '5%',
+                },
+                legend: {
+                    right: '5%',
+                    top: '10%',
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#5CB1C1',
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLabel: {
+                        color: '#61B9C8',
+                        fontSize: 10,
+                    },
+                    axisLine: {
+                        symbol: ['none', 'arrow'],
+                        symbolSize: [6, 6],
+                        symbolOffset: [0, 5],
+                        lineStyle: {
+                            color: '#122C49'
+                        }
+                    },
+                    axisTick: {
+                        color: '#122C49',
+                        inside: true
+                    },
+                    z: 2,
+                    data: this.setData('x')
+                },
+                yAxis:
+                    {
+                        type: 'value',
+                        interval: 50,
+                        min: 0,
+                        max: 400,
+                        splitNumber: 7,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 10
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        name: '(个)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        },
+                    },
+
+                series: [{
+                    name: '图例',
+                    type: 'line',
+                    symbol: 'none',
+                    smooth: true,
+                    data: this.setData('s'),
+                    lineStyle: {
+                        width: 1,
+                        color:{
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#B21356' // 0% 处的颜色
+                            },
+                                {
+                                    offset: 0.5, color: '#B21356' // 40% 处的颜色
+                                }, {
+                                    offset: 1, color: '#F59111' // 100% 处的颜色
+                                }],
+                            global: false // 缺省为 false
+                        } //背景渐变色
+                    },
+                    itemStyle: {
+                        color: 'rgb(212,37,43)'
+                    },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#A41B68' // 0% 处的颜色
+                            },
+                                {
+                                    offset: 0.5, color: 'rgba(112,20,82,1)' // 40% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(112,20,82,0)' // 100% 处的颜色
+                                }],
+                            global: false // 缺省为 false
+                        }, //背景渐变色
+                        origin: 'start'
+                    }
+                },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.singleAreaChart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart4.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="doubleLine"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    left: "11%",
+                    top: "10%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#5CB1C1',
+                        fontSize: 10
+                    }
+                },
+                grid: {
+                    top: '12%',
+                    left: '10%',
+                    right: '10%',
+                    bottom: '10%',
+                    containLabel: false
+                },
+
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLine: {
+                        symbol: ['none', 'arrow'],
+                        symbolSize: [6, 6],
+                        symbolOffset: [0, 10],
+                        lineStyle: {
+                            color: '#122C49'
+                        }
+                    },
+                    axisTick: {show: false},
+                    axisLabel: {
+                        color: '#61B9C8',
+                        fontSize: 9
+                    },
+                    data: ["2017", "4", "7", "10", "2018", "4", "7"]
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        scale: true,
+                        max: 400,
+                        min: 0,
+                        interval: 50,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 9
+                        },
+                        name: '(次)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        type: 'value',
+                        scale: true,
+                        max: 400,
+                        min: 0,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 9
+                        },
+                        name: '(个)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'left',
+                            padding: [0, 0, 0, 6]
+                        },
+                        interval: 50,
+                        splitLine: {
+                            show: false,
+                        },
+                    }
+                ],
+                series: [
+                    {
+                        name: '次数',
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        lineStyle: {
+                            color: '#F39800',
+                        },
+                        itemStyle: {
+                            color: '#F39800'
+                        },
+                        data: [50, 132, 100, 300, 90, 230, 210]
+                    },
+                    {
+                        name: '人数',
+                        yAxisIndex: 1,
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        lineStyle: {
+                            color: '#BF232A',
+
+                        },
+                        itemStyle: {
+                            color: '#BF232A'
+                        },
+                        data: [330, 310, 132, 100, 300, 90, 230]
+                    },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.doubleLine {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart5.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="doubleBars"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                legend: {
+                    left: "8%",
+                    top: "10%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#5CB1C1',
+                        fontSize: 10
+                    }
+                },
+                grid: [{
+                    show: false,
+                    left: '6%',
+                    top: '17%',
+                    bottom: '3%',
+                    containLabel: true,
+                    width: '40%',
+                }, {
+                    show: false,
+                    left: '53%',
+                    top: '17%',
+                    bottom: '3%',
+                    width: '1%',
+                }, {
+                    show: false,
+                    right: '6%',
+                    top: '17%',
+                    bottom: '3%',
+                    containLabel: true,
+                    width: '40%',
+                },],
+                xAxis: [{
+                    splitNumber: 8,
+                    type: 'value',
+                    inverse: true,
+                    axisLine: {show: false},
+                    axisTick: {show: false},
+                    position: 'bottom',
+                    axisLabel: {show: false},
+                    splitLine: {show: false}
+                }, {
+                    gridIndex: 1,
+                    show: false
+                }, {
+                    gridIndex: 2,
+                    splitNumber: 8,
+                    type: 'value',
+                    axisLine: {show: false},
+                    axisTick: {show: false},
+                    position: 'bottom',
+                    axisLabel: {show: false},
+                    splitLine: {show: false}
+                }
+                ],
+                yAxis: [
+                    //左边的标尺
+                    {
+                        type: 'category',
+                        inverse: true,
+                        position: 'left',
+                        axisLine: {show: false},
+                        axisTick: {show: false},
+                        axisLabel: {show: false},
+                    },
+                    //中间的标尺
+                    {
+                        gridIndex: 1,
+                        type: 'category',
+                        inverse: true,
+                        position: 'left',
+                        axisLine: {show: false},
+                        axisTick: {show: false},
+                        axisLabel: {
+                            show: true,
+                            color: '#61B9C8',
+                            fontSize: 8,
+                            showMinLabel: true,
+                            showMaxLabel: true,
+                            interval: 0
+                        },
+                        data: ["1部", "2部", "3部", "4部", "5部", "6部", "7部", "8部", "9部", '10部', "11部"]
+                    },
+                    //右边的标尺
+                    {
+                        gridIndex: 2,
+                        type: 'category',
+                        inverse: true,
+                        offset: 50,
+                        position: 'left',
+                        axisLine: {show: false},
+                        axisTick: {show: false},
+                        axisLabel: {show: false}
+                    }
+                ],
+                series: [{
+                    name: '次数',
+                    type: 'bar',
+                    barGap: 10,
+                    barWidth: "40%",
+                    emphasis: {
+                        show: false
+                    },
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {offset: 0, color: 'rgba(1,176,223,1)'},
+                                {offset: 1, color: 'rgba(1,176,223,0)'}
+                            ],
+                            global: false // 缺省为 false
+                        },
+                        borderRadius: 5,
+                    },
+                    data: [320, 302, 341, 374, 390, 450, 420, 374, 390, 450, 420]
+                }, {
+                    name: '人数',
+                    type: 'bar',
+                    barGap: 10,
+                    barWidth: "40%",
+                    xAxisIndex: 2,
+                    yAxisIndex: 2,
+                    emphasis: {
+                        show: false
+                    },
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {offset: 0, color: 'rgba(126,19,212,0)'},
+                                {offset: 1, color: 'rgba(126,19,212,1)'}
+                            ],
+                            global: false // 缺省为 false
+                        },
+                        borderRadius: 5,
+                    },
+                    data: [320, 302, 341, 374, 390, 450, 420, 374, 390, 450, 420]
+                }]
+            };
+
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.doubleBars {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart6.vue

@@ -0,0 +1,245 @@
+<template>
+    <div class="threeBarChart"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                grid: {
+                    top: "20%",
+                    bottom: "15%",
+                    left: 40,
+                    right: 40,
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    left: "8%",
+                    top: "10%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#5CB1C1',
+                        fontSize: 10
+                    }
+                },
+                calculable: true,
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 10
+                        },
+                        data: ['2017', '4', '7', '10', '2018', '4', '7', '0']
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        interval: 50,
+                        min: 0,
+                        max: 400,
+                        splitNumber: 7,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 10
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        name: '(元)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'right',
+                            padding: [0, 6, 0, 0]
+                        }
+                    },
+                    {
+                        type: 'value',
+                        interval: 50,
+                        position: "right",
+                        offset: -35,
+                        min: 0,
+                        max: 400,
+                        splitNumber: 7,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 10
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        name: '(人)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'left',
+                            padding: [0, 0, 0, 6]
+                        }
+                    },
+                    {
+                        type: 'value',
+                        position: "right",
+                        interval: 50,
+                        min: 0,
+                        max: 400,
+                        splitNumber: 7,
+                        axisLine: {
+                            symbol: ['none', 'arrow'],
+                            symbolSize: [6, 6],
+                            lineStyle: {
+                                color: '#122C49'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#61B9C8',
+                            showMaxLabel: false,
+                            fontSize: 10
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        name: '(次)',
+                        nameGap: -10,
+                        nameTextStyle: {
+                            color: '#61B9C8',
+                            fontSize: 9,
+                            align: 'left',
+                            padding: [0, 0, 0, 6]
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '金额',
+                        type: 'bar',
+                        barGap: 0,
+                        barWidth: 6,
+                        data: [200, 49, 70, 232, 256, 76.7, 135.6],
+                        itemStyle: {
+                            borderRadius: [3, 3, 0, 0],
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(252,145,134,1)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(241,88,135,1)' // 100% 处的颜色
+                                    }
+                                ],
+                                global: false // 缺省为 false
+                            } //背景渐变色
+                        }
+                    },
+                    {
+                        name: '人数',
+                        type: 'bar',
+                        barGap: 0,
+                        barWidth: 6,
+                        data: [26, 59, 90, 264, 287, 70.7, 175.6],
+                        itemStyle: {
+                            borderRadius: [3, 3, 0, 0],
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(144,20,238,1)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(74,8,211,1)' // 100% 处的颜色
+                                    }
+                                ],
+                                global: false // 缺省为 false
+                            } //背景渐变色
+                        }
+                    },
+                    {
+                        name: '次数',
+                        type: 'bar',
+                        barGap: 0,
+                        barWidth: 6,
+                        data: [264, 287, 150, 175.6, 182.2, 48.7, 18.8],
+                        itemStyle: {
+                            borderRadius: [3, 3, 0, 0],
+                            color:  {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: 'rgba(0,204,255,1)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(8,59,126,1)' // 100% 处的颜色
+                                    }
+                                ],
+                                global: false // 缺省为 false
+                            } //背景渐变色
+                        }
+                    }
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.threeBarChart {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/views/modules/monitoring/components/page2/chart7.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="pieChart"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                title: [
+                    {
+                        text: "【金额】",
+                        left: '12%',
+                        bottom: '6%',
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        }
+                    },
+                    {
+                        text: "【人数】",
+                        left: '46%',
+                        bottom: '6%',
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        }
+                    },
+                    {
+                        text: "【次数】",
+                        right: '12%',
+                        bottom: '6%',
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        }
+                    }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                    formatter: "{a} <br/>{b} : {c} ({d}%)"
+                },
+                legend: {
+                    data: [
+                        {name: '分类1', icon: 'circle'},
+                        {name: '分类2', icon: 'circle'},
+                        {name: '分类3', icon: 'circle'},
+                        {name: '分类4', icon: 'circle'},
+                        {name: '分类5', icon: 'circle'},
+                    ],
+                    left: "8%",
+                    top: "10%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#00CCFF',
+                        fontSize: 10
+                    }
+                },
+                series: [
+                    {
+                        name: '【金额】',
+                        type: 'pie',
+                        radius: '40%',
+                        center: ['17%', '60%'],
+                        data: [
+                            {value: 335, name: '分类1'},
+                            {value: 310, name: '分类2'},
+                            {value: 234, name: '分类3'},
+                            {value: 135, name: '分类5'},
+                            {value: 1548, name: '分类5'}
+                        ],
+                        label: {
+                            fontSize: 8,
+                            color: '#00CCFF'
+                        },
+                        labelLine: {
+                            length: 15,
+                            length2: 10,
+                            lineStyle: {
+                                color: '#3F3F5C'
+                            }
+                        },
+                        itemStyle: {
+                            color: function (params) {
+                                var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE'];
+                                return colorList[params.dataIndex];
+                            },
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    },
+                    {
+                        name: '【人数】',
+                        type: 'pie',
+                        radius: '40%',
+                        center: ['50%', '60%'],
+                        data: [
+                            {value: 545, name: '分类1'},
+                            {value: 210, name: '分类2'},
+                            {value: 2534, name: '分类3'},
+                            {value: 1335, name: '分类4'},
+                            {value: 1548, name: '分类5'}
+                        ],
+                        label: {
+                            fontSize: 8,
+                            color: '#00CCFF'
+                        },
+                        labelLine: {
+                            length: 15,
+                            length2: 10,
+                            lineStyle: {
+                                color: '#3F3F5C'
+                            }
+                        },
+                        itemStyle: {
+                            color: function (params) {
+                                var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE'];
+                                return colorList[params.dataIndex];
+                            },
+
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    },
+                    {
+                        name: '【次数】',
+                        type: 'pie',
+                        radius: '40%',
+                        center: ['82%', '60%'],
+                        data: [
+                            {value: 435, name: '分类1'},
+                            {value: 310, name: '分类2'},
+                            {value: 334, name: '分类3'},
+                            {value: 1135, name: '分类4'},
+                            {value: 1548, name: '分类5'}
+                        ],
+                        label: {
+                            fontSize: 8,
+                            color: '#00CCFF'
+                        },
+                        labelLine: {
+                            length: 15,
+                            length2: 10,
+                            lineStyle: {
+                                color: '#3F3F5C'
+                            }
+                        },
+                        emphasis: {
+                           itemStyle: {
+                               shadowBlur: 10,
+                               shadowOffsetX: 0,
+                               shadowColor: 'rgba(0, 0, 0, 0.5)'
+                           }
+                        },
+                        itemStyle: {
+                            color: function (params) {
+                                var colorList = ['#F74F64', '#00CCFF', '#315371', '#142AFE', '#9814FE'];
+                                return colorList[params.dataIndex];
+                            }
+                        }
+                    },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.pieChart {
+    height: 100%;
+    width: 100%;
+    padding: 0 20px;
+}
+</style>

src/views/modules/monitoring/components/page3/chart1.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="leftBar"></div>
+</template>
+
+<style lang="less" scoped>
+.leftBar {
+    height: 100%;
+    width: 45%;
+    float: left;
+}
+</style>
+
+<script>
+export default {
+    props: {
+        title: String,
+        data: Array,
+    },
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setTrenchData(type) { // 数据
+            let arr = [];
+            let obj = {};
+            for (let i = 0; i < this.data.length; i++) {
+                switch (type) {
+                    case 't':
+                        obj = {
+                            subtext: this.data[i].subtitle,
+                            top: this.data[i].top,
+                            left: 10,
+                            subtextStyle: {
+                                color: '#8CBCCD',
+                                fontSize: 9
+                            }
+                        }
+                        break;
+                    case 'd':
+                        obj = this.data[i].data
+                        break;
+                    case 'b':
+                        obj = 100;
+                        break;
+                    default:
+                        break;
+                }
+
+                arr.push(obj);
+            }
+            if (type === 't') {
+                arr.unshift({
+                    text: this.title,
+                    top: '8%',
+                    left: '5%',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12
+                    }
+                });
+            }
+            return arr;
+        },
+
+        // 渠道分析
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                title: this.setTrenchData('t'),
+                grid: {
+                    top: '15%',
+                    bottom: '3%',
+                    left: '5%',
+                },
+                yAxis: {
+                    data: [],
+                    inverse: true,
+                    axisLabel: {show: false},
+                    axisLine: {show: false},
+                    axisTick: {show: false},
+                },
+                xAxis: {
+                    splitLine: {show: false},
+                    axisLabel: {show: false},
+                    axisLine: {show: false},
+                    axisTick: {show: false},
+                },
+                series: [{
+                    type: 'bar',
+                    silent: true,
+                    barWidth: 15,
+                    barGap: '-100%', // Make series be overlap
+                    itemStyle: {
+                        color: '#1F1E4E'
+                    },
+                    data: this.setTrenchData('b')
+                }, {
+                    type: 'bar',
+                    barWidth:15,
+                    z: 2,
+                    label: {
+                        show: true,
+                        position: "insideLeft",
+                        color: "#fff",
+                        offset: [0, 1],
+                        fontSize: 9,
+                        formatter: function (params) {
+                            return params.name
+                        },
+                    },
+                    itemStyle: {
+                        color: function (params) {
+                            return params.data.color;
+                        }
+                    },
+                    data: this.setTrenchData('d')
+                }]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize();
+            this.myChart.setOption(option);
+        },
+
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>

src/views/modules/monitoring/components/page3/chart2.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="rightBar"></div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Array
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setSoliderData(type) {
+            let arr = [];
+            let obj = {};
+            for (let i = 0; i < this.data.length; i++) {
+                switch (type) {
+                    case 'g':
+                        obj = {
+                            top: this.data[i].top,
+                            left: 8,
+                            right: 30,
+                            height: "13.5%"
+                        };
+                        break;
+                    case 'x':
+                        obj = {
+                            axisLine: {show: false},
+                            axisTick: {show: false, interval: 0},
+                            splitLine: {show: false},
+                            type: 'category',
+                            boundaryGap: false,
+                            gridIndex: i,
+                            axisLabel: {
+                                show: false
+                            },
+                            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                        };
+                        break;
+                    case 'y':
+                        obj = {
+                            type: "value",
+                            axisLine: {show: false},
+                            gridIndex: i,
+                            axisTick: {show: false},
+                            splitLine: {show: false},
+                            axisLabel: {show: false}
+                        };
+                        break;
+                    case 's':
+                        obj = {
+                            type: "bar",
+                            barWidth: 2,
+                            data: this.data[i].data,
+                            label: {
+                                show: true,
+                                position: "insideBottomLeft",
+                                offset: [3, 0],
+                                distance: 2,
+                                color: '#88B6C7',
+                                fontSize: 9,
+                                lineHeight: 9,
+                                rich: {
+                                    a: {
+                                        // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
+                                    }
+                                },
+                                formatter: function (data) {
+                                    if (data.data.name.length == 2) {
+                                        return data.data.name.split("").join("\n\n");
+                                    } else {
+                                        return data.data.name.split("").join("\n");
+                                    }
+
+                                },
+                            },
+                            itemStyle: {
+                                color: { // 颜色线性渐变
+                                    type: 'linear',
+                                    x: 0,
+                                    y: 0,
+                                    x2: 0,
+                                    y2: 1,
+                                    colorStops: [{
+                                        offset: 0, color: 'rgba(' + this.data[i].color + ',1)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(' + this.data[i].color + ',0)' // 100% 处的颜色
+                                    }],
+                                    globalCoord: false // 缺省为 false
+                                }
+                            },
+                            xAxisIndex: i,
+                            yAxisIndex: i,
+                        };
+                        break;
+                    default:
+                        break;
+                }
+                arr.push(obj)
+            }
+            return arr;
+        },
+        // 用户排名
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    formatter: "{b}:{c}"
+                },
+                title: {
+                    text: '重点关注用户排名',
+                    left: 0,
+                    top: 10,
+                    textStyle: {
+                        fontSize: 12,
+                        color: "#FFF"
+                    }
+                },
+                grid: this.setSoliderData('g'),
+                xAxis: this.setSoliderData('x'),
+                yAxis: this.setSoliderData('y'),
+                series: this.setSoliderData('s')
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.rightBar {
+    height: 100%;
+    width: 55%;
+    float: left;
+}
+</style>

src/views/modules/monitoring/components/page3/chart3.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="redPocket"></div>
+</template>
+
+<script>
+export default {
+    name: 'redPocket',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        // 红包装账
+        setPocket() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                title: {
+                    text: "散点图数据分析",
+                    top: "6%",
+                    left: '2%',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 14
+                    }
+                },
+                grid: {
+                    top: "23%",
+                    bottom: '10%'
+                },
+                xAxis: {
+                    scale: true,
+                    name: '次数',
+                    nameTextStyle: {
+                        color: "#0FB9CD",
+                        fontSize: 10
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        color: '#0FB9CD',
+                        fontSize: 8
+                    },
+                    axisTick: {
+                        color: '#14336D'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#14336D'
+                        }
+
+                    }
+
+                },
+                yAxis: {
+                    scale: true,
+                    name: '金额',
+                    nameTextStyle: {
+                        color: "#0FB9CD",
+                        fontSize: 10,
+                        padding: [0, 65, -10, 0]
+                    },
+                    axisTick: {show: false},
+                    axisLabel: {
+                        color: '#0FB9CD',
+                        fontSize: 8
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#134076'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#14336D'
+                        }
+                    }
+                },
+                series: [{
+                    type: 'effectScatter',
+                    symbolSize: 10,
+                    z: 10,
+                    itemStyle: {
+                        color: '#FF1200'
+                    },
+                    data: [
+                        [172.7, 105.2],
+                        [153.4, 42]
+                    ]
+                }, {
+                    type: 'scatter',
+                    itemStyle: {
+                        color: '#0E4CFF'
+                    },
+                    data: [
+                        [162.8, 58.0], [167.0, 59.8], [60.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+                        [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [67.1, 62.2], [158.0, 55.5],
+                        [122.6, 57.8], [26.0, 54.6], [162.1, 59.2], [133.4, 52.7], [59.8, 53.2],
+                        [70.5, 64.5], [159.2, 51.8], [57.5, 56.0], [61.3, 63.6], [132.6, 63.2],
+                        [60.0, 59.5], [168.9, 56.8], [65.1, 64.1], [132.6, 50.0], [165.1, 72.3],
+                        [66.4, 55.0], [60.0, 55.9], [52.4, 60.4], [140.2, 69.1], [12.6, 84.5],
+                        [70.2, 55.9], [158.8, 55.5], [112.7, 69.5], [67.6, 76.4], [162.6, 61.4],
+                        [87.6, 65.9], [56.2, 58.6], [175.2, 66.8], [72.1, 56.6], [162.6, 58.6],
+                        [90.0, 55.9], [165.1, 59.1], [102.9, 81.8], [66.4, 70.7], [125.1, 56.8],
+                        [102.7, 75.9] [101.3, 57.3], [167.6, 55.0], [65.1, 65.5],
+                        [157.5, 48.6], [63.8, 58.6], [67.6, 63.6], [65.1, 55.2],
+
+                    ],
+                },
+                    {
+                        type: 'scatter',
+                        itemStyle: {
+                            color: '#2E62F9'
+                        },
+                        data: [[161.2, 2.6], [127.5, 59.0], [159.5, 49.2], [17.0, 63.0], [155.8, 53.6],
+                            [170.0, 59.0], [19.1, 47.6], [166.0, 69.8], [116.2, 66.8], [160.2, 75.2],
+                            [172.5, 55.2], [110.9, 54.2], [12.9, 62.5], [153.4, 42.0], [110.0, 50.0],
+                            [10.2, 49.8], [88.2, 49.2], [175.0, 73.2], [157.0, 47.8], [67.6, 68.8],
+                            [159.5, 50.6], [175.0, 82.5], [86.8, 57.2], [96.5, 87.8], [90.2, 72.8],
+                            [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [110.5, 67.8], [60.0, 47.0],
+                            [154.4, 46.2], [82.0, 55.0], [86.5, 83.0], [10.0, 54.4], [52.0, 45.8],
+                            [162.1, 53.6], [170.0, 73.2], [60.2, 52.1], [121.3, 67.9], [116.4, 56.6],
+
+                        ],
+                    }]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize();
+            this.myChart.setOption(option);
+        },
+    }, mounted() {
+        this.setPocket();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.redPocket {
+    height: 100%
+}
+</style>

src/views/modules/monitoring/components/page3/chart4.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="chart"></div>
+</template>
+
+<style lang="less" scoped>
+.chart {
+    height: 100%;
+}
+</style>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                title:
+
+                    {
+                        text: this.data.title,
+                        top: "5%",
+                        left: '5%',
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                        }
+                    },
+                legend:
+                    {
+                        data: [
+                            {name: this.data.data[0].name, icon: 'circle'},
+                            {name: this.data.data[1].name, icon: 'circle'},
+                        ],
+                        left: "center",
+                        top: "17%",
+                        orient: 'horizontal',
+                        itemWidth: 7,
+                        itemHeight: 7,
+                        itemGap: 10,
+                        textStyle: {
+                            color: '#67C3D6',
+                            fontSize: 10
+                        }
+                    },
+                grid:
+                    {
+                        left: "5%",
+                        top: '35%',
+                        right: '5%',
+                        bottom: '15%'
+                    },
+                xAxis:
+                    {
+                        axisLine: {
+                            lineStyle: {
+                                color: '#2B427F'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#0DF5F8',
+                            fontSize: 8,
+                            interval: 0,
+                        },
+                        axisTick: {
+                            inside: true,
+                            alignWithLabel: true,
+                            interval: 0,
+                            color: '#2B427F'
+                        },
+                        data: ['TOP1', 'TOP2', 'TOP3', 'TOP4', 'TOP5', 'TOP6']
+                    },
+
+
+                yAxis:
+                    {
+                        type: 'value',
+                        axisLine: {
+                            show: false,
+                        },
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        splitLine: {
+                            lineStyle: {
+                                color: '#2B427F'
+                            }
+
+                        }
+
+                    },
+                series: [
+                    {
+                        type: 'bar',
+                        name: this.data.data[0].name,
+                        barWidth: 4,
+                        barGap: 0,
+                        itemStyle: {
+                            borderRadius: 2,
+                            color: this.data.data[0].color
+                        },
+                        data: this.data.data[0].value
+                    },
+                    {
+                        type: 'bar',
+                        name: this.data.data[1].name,
+                        barWidth: 4,
+                        barGap: 0,
+                        itemStyle: {
+                            borderRadius: 2,
+                            color: this.data.data[1].color
+                        },
+                        data: this.data.data[1].value
+                    },
+                ]
+
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>
+

src/views/modules/monitoring/components/page3/chart5.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="webcastsRisk"></div>
+</template>
+
+<script>
+export default {
+    name: 'webcastsRisk',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        // 网播风险分析
+        setWebcasts() {
+            let option = {
+
+                title: {
+                    text: '重点用户关注排行',
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12
+                    },
+                    top: '4%',
+                    left: '4%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                legend: {
+                    data: [
+                        {name: '分类1', icon: 'circle'},
+                        {name: '分类2', icon: 'circle'},
+                        {name: '分类3', icon: 'circle'},
+                        {name: '其他', icon: 'circle'},
+                    ],
+                    gridIndex: 3,
+                    right: "5%",
+                    top: "6%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#00CCFF',
+                        fontSize: 10
+                    }
+                },
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '50%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    axisLabel: {show: false},
+                    axisTick: {show: false},
+                    splitLine: {show: false},
+                    axisLine: {show: false}
+                },
+                yAxis: {
+                    type: 'category',
+                    axisTick: {show: false},
+                    splitLine: {show: false},
+                    axisLine: {show: false},
+                    axisLabel: {
+                        color: '#fff',
+                        backgroundColor: '#4A7AFF',
+                        borderRadius: 3,
+                        margin: 0,
+                        padding: [1, 3, 1, 3]
+                    },
+                    inverse: true,
+                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+                },
+                series: [
+                    {
+                        name: '分类1',
+                        type: 'bar',
+                        stack: '总量',
+                        barWidth: 8,
+                        itemStyle: {
+                            color: '#142AFE',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '分类2',
+                        type: 'bar',
+                        stack: '总量',
+                        barWidth: 8,
+                        itemStyle: {
+                            color: '#1456FE',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '分类3',
+                        type: 'bar',
+                        stack: '总量',
+                        barWidth: 8,
+                        itemStyle: {
+                            color: '#1493FE',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '其他',
+                        type: 'bar',
+                        barWidth: 8,
+                        stack: '总量',
+                        itemStyle: {
+                            color: '#00CCFF',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        type: 'pie',
+                        radius: ['20%', '21%'],
+                        center: ['72%', '60%'],
+                        data: [{value: '1'}],
+                        label: {show: false},
+                        itemStyle: {
+                            color: '#7D7DA2'
+                        }
+                    },
+                    {
+                        type: 'pie',
+                        radius: ['40%', '65%'],
+                        roseType: 'area',
+                        center: ['72%', '60%'],
+                        avoidLabelOverlap: true,
+                        startAngle: 180,
+                        label: {
+                            show: true,
+                            padding: [0, -30],
+                            formatter: '{c} \n\n',
+                            position: 'outside',
+                            color: '#fff',
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: '30',
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: true,
+                            length2: 30,
+                            lineStyle: {
+                                //color:["#408BE8",'#FE405C',"#3E3E7F","#FFC740"]
+                            },
+
+                        },
+                        itemStyle: {
+                            color: function (params) {
+                                let corList = ["#142AFE", '#3FA0FF', "#00CCFF", "#1456FE"];
+                                return corList[params.dataIndex]
+                            }
+                        },
+                        data: [
+                            {value: 535, name: '分类1'},
+                            {value: 310, name: '分类2'},
+                            {value: 135, name: '分类3'},
+                            {value: 254, name: '其他'},
+                        ]
+                    }
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize();
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setWebcasts()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.webcastsRisk {
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page3/chart6.vue

@@ -0,0 +1,249 @@
+<template>
+    <div class='deviceSafeRisk'></div>
+</template>
+
+<script>
+export default {
+    name: 'deviceSafeRisk',
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        // 设备安全性风险
+        setDeviceSafe() {
+            let option = {
+                title: [
+                    {
+                        text: '重点用户关注排行',
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        },
+                        top: '4%',
+                        left: '4%'
+                    },
+                    {
+                        text: "分类排行标题",
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        },
+                        top: '4%',
+                        left: '55%'
+                    },
+                ],
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                legend: {
+                    data: [
+                        {name: '人数', icon: 'circle'},
+                        {name: '金额', icon: 'circle'},
+
+                    ],
+                    gridIndex: 3,
+                    orient: 'vertical',
+                    right: "44%",
+                    bottom: "6%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#00CCFF',
+                        fontSize: 10
+                    }
+                },
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '50%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    axisLabel: {show: false},
+                    axisTick: {show: false},
+                    splitLine: {show: false},
+                    axisLine: {show: false}
+                },
+                yAxis: {
+                    type: 'category',
+                    axisTick: {show: false},
+                    splitLine: {show: false},
+                    axisLine: {show: false},
+                    axisLabel: {
+                        color: '#fff',
+                        backgroundColor: '#A34FFA',
+                        borderRadius: 3,
+                        margin: 0,
+                        padding: [1, 3, 1, 3]
+                    },
+                    inverse: true,
+                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+                },
+                angleAxis: {
+                    type: 'category',
+                    axisLine: {
+                        lineStyle: {
+                            color: '#172E6E'
+                        }
+                    },
+                    startAngle: 135,
+                    axisLabel: {
+                        color: '#04E8EB',
+                        fontSize: 10
+                    },
+                    axisTick: {show: false},
+                    data: ['分类1', '分类2', '分类3', '分类4'],
+                    z: 10
+                },
+                radiusAxis: {
+                    splitLine: {
+                        lineStyle: {
+                            color: '#172E6E'
+                        }
+                    },
+                    axisTick: {show: false},
+                    axisLabel: {show: false},
+                    axisLine: {
+                        show: false
+                    }
+                },
+                polar: {
+                    center: ['72%', '55%'],
+                    radius: "65%",
+                },
+                series: [
+                    {
+                        name: '分类1',
+                        type: 'bar',
+                        stack: '总量',
+                        barWidth: 8,
+                        itemStyle: {
+                            color: '#5304EC',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '分类2',
+                        type: 'bar',
+                        stack: '总量',
+                        barWidth: 8,
+                        itemStyle: {
+                            color: '#6829EE',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '分类3',
+                        type: 'bar',
+                        stack: '总量',
+                        barWidth: 8,
+                        itemStyle: {
+                            color: '#8040ED',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '其他',
+                        type: 'bar',
+                        barWidth: 8,
+                        stack: '总量',
+                        itemStyle: {
+                            color: '#9D50EC',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        name: '其他',
+                        type: 'bar',
+                        barWidth: 8,
+                        stack: '总量',
+                        itemStyle: {
+                            color: '#A77BDE',
+                            borderRadius: [0, 8, 8, 0]
+                        },
+                        label: {
+                            show: false,
+                            position: 'insideRight'
+                        },
+                        data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 15]
+                    },
+                    {
+                        type: 'bar',
+                        data: [1, 2, 3, 4],
+                        coordinateSystem: 'polar',
+                        name: '金额',
+                        itemStyle: {
+                            color: '#0AB9FE'
+                        },
+                        stack: 'a'
+                    }, {
+                        type: 'bar',
+                        data: [2, 4, 6, 1],
+                        coordinateSystem: 'polar',
+                        name: '人数',
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 1,
+                                x2: 0,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(104,18,147,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: '#1D2584' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        stack: 'a'
+                    }
+
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setDeviceSafe();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.deviceSafeRisk {
+    height: 100%;
+}
+</style>

src/views/modules/monitoring/components/page3/chart7.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="ring">
+        <canvas :id="id"></canvas>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        id: String,
+        title: String,
+        color: String
+    },
+    name: '',
+    data() {
+        return {}
+    },
+    methods: {
+        drawRing() {
+            var canvas = document.getElementById(this.id);
+            var context = canvas.getContext('2d');
+            canvas.width = this.$el.offsetWidth;
+            canvas.height = this.$el.offsetHeight;
+            context.lineWidth = 1;
+            context.strokeStyle = "#16417F";
+            context.save();
+            context.beginPath();
+            context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 6, 0, 2 * Math.PI, false);
+            context.stroke();
+            context.restore();
+            context.save();
+            context.beginPath();
+            context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 12, 0, 2 * Math.PI, false);
+            context.stroke();
+            context.restore();
+            var percent1 = 60;
+            var percent2 = 60;
+            var angle1 = percent1 * 3.6 - 90;
+            var angle2 = percent2 * 3.6 - 60;
+            context.lineWidth = 4;
+
+            context.lineCap = 'round';
+            context.save();
+            context.strokeStyle = "#035EFF";
+            context.beginPath();
+            context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 6, -Math.PI / 2, angle1 * Math.PI / 180, false);
+            context.stroke();
+            context.restore();
+            context.save();
+            context.beginPath();
+            context.strokeStyle = this.color;
+            context.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2 - 12, -Math.PI / 6, angle2 * Math.PI / 180, false);
+            context.stroke();
+            context.restore();
+            context.save();
+            context.font = '10px Microsoft YaHei';
+            context.fillStyle = '#fff';
+            if (this.title.length > 4) {
+                context.fillText(this.title, canvas.width / 2 - 25, canvas.height / 2 + 3);
+            } else {
+                context.fillText(this.title, canvas.width / 2 - 20, canvas.height / 2 + 3);
+            }
+
+            context.restore();
+        },
+    },
+    mounted() {
+        this.drawRing();
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.ring {
+    width: 100%;
+    height: 33.33333%;
+    text-align: center;
+}
+</style>

src/views/modules/monitoring/components/page3/chart8.vue

@@ -0,0 +1,633 @@
+<template>
+    <div class="hotWords"></div>
+</template>
+
+<script>
+export default {
+    name: 'hotWords',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        // 舆论、心里风险分析
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                legend: {
+                    data: [
+                        {name: '分类排行', icon: 'circle'},
+                        {name: '用户排行', icon: 'circle'},
+
+                    ],
+                    gridIndex: 3,
+                    left: "28.5%",
+                    top: "4%",
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#00CCFF',
+                        fontSize: 10
+                    }
+                },
+                grid: [
+                    {
+                        left: "10%",
+                        top: '12%',
+                        bottom: "64%",
+                        width: '35%'
+                    },
+                    {
+                        left: "48%",
+                        top: '12%',
+                        bottom: "64%",
+                        width: 1
+                    },
+                    {
+                        right: "15%",
+                        top: '12%',
+                        bottom: "64%",
+                        width: '35%'
+                    },
+                    {
+                        left: "10%",
+                        top: '41.5%',
+                        bottom: "35%",
+                        width: '35%'
+                    },
+                    {
+                        left: "48%",
+                        top: '41.5%',
+                        bottom: "35%",
+                        width: 1
+                    },
+                    {
+                        right: "15%",
+                        top: '41.5%',
+                        bottom: "35%",
+                        width: '35%'
+                    },
+                    {
+                        left: "10%",
+                        top: '70%',
+                        bottom: "5%",
+                        width: '35%'
+                    },
+                    {
+                        left: "48%",
+                        top: '70%',
+                        bottom: "5%",
+                        width: 1
+                    },
+                    {
+                        right: "15%",
+                        top: '70%',
+                        bottom: "5%",
+                        width: '35%'
+                    },
+                ],
+                xAxis: [
+                    {
+                        type: "value",
+                        inverse: true,
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 1,
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 2,
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 3,
+                        inverse: true,
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 4,
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 5,
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 6,
+                        inverse: true,
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 7,
+                    },
+                    {
+                        type: "value",
+                        gridIndex: 8,
+                        splitLine: {show: false},
+                        axisLine: {show: false},
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                    },
+                ],
+                yAxis: [
+                    {
+                        data: [1, 2, 3, 4, 5],
+                        inverse: true,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {show: false}
+                    },
+                    {
+                        data: [1, 2],
+                        gridIndex: 1,
+                        offset: -1,
+                        axisLine: {
+                            lineStyle: {
+                                color: '#153575'
+                            }
+                        },
+                        axisTick: {
+                            color: '#153575'
+                        },
+                        boundaryGap: false,
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        axisLabel: {show: false}
+                    },
+                    {
+                        data: [1, 2],
+                        gridIndex: 1,
+                        axisLine: {
+                            lineStyle: {
+                                color: '#153575'
+                            }
+                        },
+                        axisTick: {
+                            color: '#153575'
+                        },
+                        boundaryGap: false,
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        axisLabel: {show: false}
+                    },
+                    {
+                        data: [1, 2, 3, 4, 5],
+                        gridIndex: 2,
+                        inverse: true,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {show: false}
+                    },
+                    {
+                        data: [1, 2, 3, 4, 5],
+                        gridIndex: 3,
+                        inverse: true,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {show: false}
+                    },
+                    {
+                        data: [1, 2],
+                        gridIndex: 4,
+                        offset: -1,
+                        axisLine: {
+                            lineStyle: {
+                                color: '#153575'
+                            }
+                        },
+                        axisTick: {
+                            color: '#153575'
+                        },
+                        boundaryGap: false,
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        axisLabel: {show: false}
+                    },
+                    {
+                        data: [1, 2],
+                        gridIndex: 4,
+                        axisLine: {
+                            lineStyle: {
+                                color: '#153575'
+                            }
+                        },
+                        axisTick: {
+                            color: '#153575'
+                        },
+                        boundaryGap: false,
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        axisLabel: {show: false}
+                    },
+                    {
+                        data: [1, 2, 3, 4, 5],
+                        gridIndex: 5,
+                        inverse: true,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {show: false}
+                    },
+                    {
+                        data: [1, 2, 3, 4, 5],
+                        gridIndex: 6,
+                        inverse: true,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {show: false}
+                    },
+                    {
+                        data: [1, 2],
+                        gridIndex: 7,
+                        offset: -1,
+                        axisLine: {
+                            lineStyle: {
+                                color: '#153575'
+                            }
+                        },
+                        axisTick: {
+                            color: '#153575'
+                        },
+                        boundaryGap: false,
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        axisLabel: {show: false}
+                    },
+                    {
+                        data: [1, 2],
+                        gridIndex: 7,
+                        axisLine: {
+                            lineStyle: {
+                                color: '#153575'
+                            }
+                        },
+                        axisTick: {
+                            color: '#153575'
+                        },
+                        boundaryGap: false,
+                        showMinLabel: true,
+                        showMaxLabel: true,
+                        axisLabel: {show: false}
+                    },
+                    {
+                        data: [1, 2, 3, 4, 5],
+                        gridIndex: 8,
+                        inverse: true,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {show: false}
+                    },
+                ],
+                series: [
+                    {
+                        name: '分类排行',
+                        type: 'bar',
+                        barWidth: 6,
+                        label: {
+                            show: true,
+                            position: 'left',
+                            formatter: "{b}",
+                            color: '#6EDDF2'
+                        },
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(4,85,229,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(4,85,229,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: [
+                            {
+                                value: 500,
+                                name: '分类数据1'
+                            },
+                            {
+                                value: 424,
+                                name: '分类数据2'
+                            },
+                            {
+                                value: 332,
+                                name: '分类数据3'
+                            },
+                            {
+                                value: 264,
+                                name: '分类数据4'
+                            },
+                            {
+                                value: 144,
+                                name: '分类数据5'
+                            },
+                        ]
+                    },
+                    {
+                        name: '用户排行',
+                        type: 'bar',
+                        xAxisIndex: 2,
+                        yAxisIndex: 3,
+                        barWidth: 6,
+                        label: {
+                            show: true,
+                            position: 'right',
+                            formatter: "{b}",
+                            color: '#6EDDF2'
+                        },
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(1,176,223,0)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(1,176,223,1)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: [
+                            {
+                                value: 500,
+                                name: '张学友'
+                            },
+                            {
+                                value: 424,
+                                name: '刘德华'
+                            },
+                            {
+                                value: 332,
+                                name: '郭富城'
+                            },
+                            {
+                                value: 264,
+                                name: '黎明'
+                            },
+                            {
+                                value: 144,
+                                name: '周华健'
+                            },
+                        ]
+                    },
+                    {
+                        name: '分类排行',
+                        type: 'bar',
+                        barWidth: 6,
+                        xAxisIndex: 3,
+                        yAxisIndex: 4,
+                        label: {
+                            show: true,
+                            position: 'left',
+                            formatter: "{b}",
+                            color: '#6EDDF2'
+                        },
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(4,85,229,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(4,85,229,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: [
+                            {
+                                value: 500,
+                                name: '分类数据1'
+                            },
+                            {
+                                value: 424,
+                                name: '分类数据2'
+                            },
+                            {
+                                value: 332,
+                                name: '分类数据3'
+                            },
+                            {
+                                value: 264,
+                                name: '分类数据4'
+                            },
+                            {
+                                value: 144,
+                                name: '分类数据5'
+                            },
+                        ]
+                    },
+                    {
+                        name: '用户排行',
+                        type: 'bar',
+                        xAxisIndex: 5,
+                        yAxisIndex: 7,
+                        barWidth: 6,
+                        label: {
+                            show: true,
+                            position: 'right',
+                            formatter: "{b}",
+                            color: '#6EDDF2'
+                        },
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(1,176,223,0)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(1,176,223,1)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: [
+                            {
+                                value: 500,
+                                name: '张学友'
+                            },
+                            {
+                                value: 424,
+                                name: '刘德华'
+                            },
+                            {
+                                value: 332,
+                                name: '郭富城'
+                            },
+                            {
+                                value: 264,
+                                name: '黎明'
+                            },
+                            {
+                                value: 144,
+                                name: '周华健'
+                            },
+                        ]
+                    },
+                    {
+                        name: '分类排行',
+                        type: 'bar',
+                        barWidth: 6,
+                        xAxisIndex: 6,
+                        yAxisIndex: 8,
+                        label: {
+                            show: true,
+                            position: 'left',
+                            formatter: "{b}",
+                            color: '#6EDDF2'
+                        },
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(4,85,229,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(4,85,229,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: [
+                            {
+                                value: 500,
+                                name: '分类数据1'
+                            },
+                            {
+                                value: 424,
+                                name: '分类数据2'
+                            },
+                            {
+                                value: 332,
+                                name: '分类数据3'
+                            },
+                            {
+                                value: 264,
+                                name: '分类数据4'
+                            },
+                            {
+                                value: 144,
+                                name: '分类数据5'
+                            },
+                        ]
+                    },
+                    {
+                        name: '用户排行',
+                        type: 'bar',
+                        xAxisIndex: 8,
+                        yAxisIndex: 11,
+                        barWidth: 6,
+                        label: {
+                            show: true,
+                            position: 'right',
+                            formatter: "{b}",
+                            color: '#6EDDF2'
+                        },
+                        itemStyle: {
+                            color: { // 颜色线性渐变
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(1,176,223,0)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(1,176,223,1)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+                            borderRadius: 5,
+                        },
+                        data: [
+                            {
+                                value: 500,
+                                name: '张学友'
+                            },
+                            {
+                                value: 424,
+                                name: '刘德华'
+                            },
+                            {
+                                value: 332,
+                                name: '郭富城'
+                            },
+                            {
+                                value: 264,
+                                name: '黎明'
+                            },
+                            {
+                                value: 144,
+                                name: '周华健'
+                            },
+                        ]
+                    }
+                ]
+
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+            this.myChart.clear();
+            this.myChart.resize();
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.hotWords {
+    height: 100%;
+    width: 70%;
+    float: right;
+}
+</style>

src/views/modules/monitoring/components/page3/chinaMap.vue

@@ -0,0 +1,845 @@
+<template>
+    <div class="chinaMap"></div>
+</template>
+
+<script>
+import "@/lib/china.js"
+
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setMap() {
+            var data = [
+                {name: '鄂尔多斯', value: 125},
+                {name: '广州', value: 238},
+                {name: '贵阳', value: 171},
+                {name: '宝鸡', value: 272},
+                {name: '长沙', value: 175},
+                {name: '衢州', value: 177},
+                {name: '廊坊', value: 193},
+                {name: '菏泽', value: 194},
+                {name: '合肥', value: 229},
+                {name: '大庆', value: 279}
+            ];
+            var geoCoordMap = {
+                '海门': [121.15, 31.89],
+                '鄂尔多斯': [109.781327, 39.608266],
+                '招远': [120.38, 37.35],
+                '舟山': [122.207216, 29.985295],
+                '齐齐哈尔': [123.97, 47.33],
+                '盐城': [120.13, 33.38],
+                '赤峰': [118.87, 42.28],
+                '青岛': [120.33, 36.07],
+                '乳山': [121.52, 36.89],
+                '金昌': [102.188043, 38.520089],
+                '泉州': [118.58, 24.93],
+                '莱西': [120.53, 36.86],
+                '日照': [119.46, 35.42],
+                '胶南': [119.97, 35.88],
+                '南通': [121.05, 32.08],
+                '拉萨': [91.11, 29.97],
+                '云浮': [112.02, 22.93],
+                '梅州': [116.1, 24.55],
+                '文登': [122.05, 37.2],
+                '上海': [121.48, 31.22],
+                '攀枝花': [101.718637, 26.582347],
+                '威海': [122.1, 37.5],
+                '承德': [117.93, 40.97],
+                '厦门': [118.1, 24.46],
+                '汕尾': [115.375279, 22.786211],
+                '潮州': [116.63, 23.68],
+                '丹东': [124.37, 40.13],
+                '太仓': [121.1, 31.45],
+                '曲靖': [103.79, 25.51],
+                '烟台': [121.39, 37.52],
+                '福州': [119.3, 26.08],
+                '瓦房店': [121.979603, 39.627114],
+                '即墨': [120.45, 36.38],
+                '抚顺': [123.97, 41.97],
+                '玉溪': [102.52, 24.35],
+                '张家口': [114.87, 40.82],
+                '阳泉': [113.57, 37.85],
+                '莱州': [119.942327, 37.177017],
+                '湖州': [120.1, 30.86],
+                '汕头': [116.69, 23.39],
+                '昆山': [120.95, 31.39],
+                '宁波': [121.56, 29.86],
+                '湛江': [110.359377, 21.270708],
+                '揭阳': [116.35, 23.55],
+                '荣成': [122.41, 37.16],
+                '连云港': [119.16, 34.59],
+                '葫芦岛': [120.836932, 40.711052],
+                '常熟': [120.74, 31.64],
+                '东莞': [113.75, 23.04],
+                '河源': [114.68, 23.73],
+                '淮安': [119.15, 33.5],
+                '泰州': [119.9, 32.49],
+                '南宁': [108.33, 22.84],
+                '营口': [122.18, 40.65],
+                '惠州': [114.4, 23.09],
+                '江阴': [120.26, 31.91],
+                '蓬莱': [120.75, 37.8],
+                '韶关': [113.62, 24.84],
+                '嘉峪关': [98.289152, 39.77313],
+                '广州': [113.23, 23.16],
+                '延安': [109.47, 36.6],
+                '太原': [112.53, 37.87],
+                '清远': [113.01, 23.7],
+                '中山': [113.38, 22.52],
+                '昆明': [102.73, 25.04],
+                '寿光': [118.73, 36.86],
+                '盘锦': [122.070714, 41.119997],
+                '长治': [113.08, 36.18],
+                '深圳': [114.07, 22.62],
+                '珠海': [113.52, 22.3],
+                '宿迁': [118.3, 33.96],
+                '咸阳': [108.72, 34.36],
+                '铜川': [109.11, 35.09],
+                '平度': [119.97, 36.77],
+                '佛山': [113.11, 23.05],
+                '海口': [110.35, 20.02],
+                '江门': [113.06, 22.61],
+                '章丘': [117.53, 36.72],
+                '肇庆': [112.44, 23.05],
+                '大连': [121.62, 38.92],
+                '临汾': [111.5, 36.08],
+                '吴江': [120.63, 31.16],
+                '石嘴山': [106.39, 39.04],
+                '沈阳': [123.38, 41.8],
+                '苏州': [120.62, 31.32],
+                '茂名': [110.88, 21.68],
+                '嘉兴': [120.76, 30.77],
+                '长春': [125.35, 43.88],
+                '胶州': [120.03336, 36.264622],
+                '银川': [106.27, 38.47],
+                '张家港': [120.555821, 31.875428],
+                '三门峡': [111.19, 34.76],
+                '锦州': [121.15, 41.13],
+                '南昌': [115.89, 28.68],
+                '柳州': [109.4, 24.33],
+                '三亚': [109.511909, 18.252847],
+                '自贡': [104.778442, 29.33903],
+                '吉林': [126.57, 43.87],
+                '阳江': [111.95, 21.85],
+                '泸州': [105.39, 28.91],
+                '西宁': [101.74, 36.56],
+                '宜宾': [104.56, 29.77],
+                '呼和浩特': [111.65, 40.82],
+                '成都': [104.06, 30.67],
+                '大同': [113.3, 40.12],
+                '镇江': [119.44, 32.2],
+                '桂林': [110.28, 25.29],
+                '张家界': [110.479191, 29.117096],
+                '宜兴': [119.82, 31.36],
+                '北海': [109.12, 21.49],
+                '西安': [108.95, 34.27],
+                '金坛': [119.56, 31.74],
+                '东营': [118.49, 37.46],
+                '牡丹江': [129.58, 44.6],
+                '遵义': [106.9, 27.7],
+                '绍兴': [120.58, 30.01],
+                '扬州': [119.42, 32.39],
+                '常州': [119.95, 31.79],
+                '潍坊': [119.1, 36.62],
+                '重庆': [106.54, 29.59],
+                '台州': [121.420757, 28.656386],
+                '南京': [118.78, 32.04],
+                '滨州': [118.03, 37.36],
+                '贵阳': [106.71, 26.57],
+                '无锡': [120.29, 31.59],
+                '本溪': [123.73, 41.3],
+                '克拉玛依': [84.77, 45.59],
+                '渭南': [109.5, 34.52],
+                '马鞍山': [118.48, 31.56],
+                '宝鸡': [107.15, 34.38],
+                '焦作': [113.21, 35.24],
+                '句容': [119.16, 31.95],
+                '北京': [116.46, 39.92],
+                '徐州': [117.2, 34.26],
+                '衡水': [115.72, 37.72],
+                '包头': [110, 40.58],
+                '绵阳': [104.73, 31.48],
+                '乌鲁木齐': [87.68, 43.77],
+                '枣庄': [117.57, 34.86],
+                '杭州': [120.19, 30.26],
+                '淄博': [118.05, 36.78],
+                '鞍山': [122.85, 41.12],
+                '溧阳': [119.48, 31.43],
+                '库尔勒': [86.06, 41.68],
+                '安阳': [114.35, 36.1],
+                '开封': [114.35, 34.79],
+                '济南': [117, 36.65],
+                '德阳': [104.37, 31.13],
+                '温州': [120.65, 28.01],
+                '九江': [115.97, 29.71],
+                '邯郸': [114.47, 36.6],
+                '临安': [119.72, 30.23],
+                '兰州': [103.73, 36.03],
+                '沧州': [116.83, 38.33],
+                '临沂': [118.35, 35.05],
+                '南充': [106.110698, 30.837793],
+                '天津': [117.2, 39.13],
+                '富阳': [119.95, 30.07],
+                '泰安': [117.13, 36.18],
+                '诸暨': [120.23, 29.71],
+                '郑州': [113.65, 34.76],
+                '哈尔滨': [126.63, 45.75],
+                '聊城': [115.97, 36.45],
+                '芜湖': [118.38, 31.33],
+                '唐山': [118.02, 39.63],
+                '平顶山': [113.29, 33.75],
+                '邢台': [114.48, 37.05],
+                '德州': [116.29, 37.45],
+                '济宁': [116.59, 35.38],
+                '荆州': [112.239741, 30.335165],
+                '宜昌': [111.3, 30.7],
+                '义乌': [120.06, 29.32],
+                '丽水': [119.92, 28.45],
+                '洛阳': [112.44, 34.7],
+                '秦皇岛': [119.57, 39.95],
+                '株洲': [113.16, 27.83],
+                '石家庄': [114.48, 38.03],
+                '莱芜': [117.67, 36.19],
+                '常德': [111.69, 29.05],
+                '保定': [115.48, 38.85],
+                '湘潭': [112.91, 27.87],
+                '金华': [119.64, 29.12],
+                '岳阳': [113.09, 29.37],
+                '长沙': [113, 28.21],
+                '衢州': [118.88, 28.97],
+                '廊坊': [116.7, 39.53],
+                '菏泽': [115.480656, 35.23375],
+                '合肥': [117.27, 31.86],
+                '武汉': [114.31, 30.52],
+                '大庆': [125.03, 46.58]
+            };
+
+            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;
+            };
+
+            let option = {
+                title: [
+                    {
+                        text: '数据1',
+                        top: '4.8%',
+                        left: '7.5%',
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                            fontWeight: 'normal',
+                        }
+                    },
+                    {
+                        text: '数据2',
+                        top: '11.5%',
+                        left: '7.5%',
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                            fontWeight: 'normal',
+                        }
+                    },
+                    {
+                        text: '数据3',
+                        top: '4.8%',
+                        left: '37.5%',
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                            fontWeight: 'normal',
+                        }
+                    },
+                    {
+                        text: '数据4',
+                        top: '11.5%',
+                        left: '37.5%',
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                            fontWeight: 'normal',
+                        }
+                    },
+                    {
+                        text: '数据5',
+                        top: '4.8%',
+                        left: '67.5%',
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                            fontWeight: 'normal',
+                        }
+                    },
+                    {
+                        text: '数据6',
+                        top: '11.5%',
+                        left: '67.5%',
+
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 12,
+                            fontWeight: 'normal',
+                        }
+                    }
+                ],
+                grid: [
+                    {
+                        top: '3%',
+                        left: '17.5%',
+                        height: '5%',
+                        right: "67.5%"
+                    },
+                    {
+                        top: '10%',
+                        height: '5%',
+                        left: '15.5%',
+                        right: "67.5%"
+                    },
+                    {
+                        top: '3%',
+                        left: '47.5%',
+                        height: '5%',
+                        right: "37.5%"
+                    },
+                    {
+                        top: '10%',
+                        height: '5%',
+                        left: '47.5%',
+                        right: "37.5%"
+                    },
+                    {
+                        top: '3%',
+                        left: '77.5%',
+                        height: '5%',
+                        right: "7.5%"
+                    },
+                    {
+                        top: '10%',
+                        height: '5%',
+                        left: '77.5%',
+                        right: "7.5%"
+                    }
+                ],
+                xAxis: [
+                    {
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {
+                            lineStyle: {
+                                color: '#4F2561'
+                            }
+                        },
+                        inverse: true,
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                    },
+                    {
+                        gridIndex: 1,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {
+                            lineStyle: {
+                                color: '#51323E'
+                            }
+                        },
+                        inverse: true,
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                    },
+                    {
+                        gridIndex: 2,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {
+                            lineStyle: {
+                                color: '#55594B'
+                            }
+                        },
+                        inverse: true,
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                    },
+                    {
+                        gridIndex: 3,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {
+                            lineStyle: {
+                                color: '#451C45'
+                            }
+                        },
+                        inverse: true,
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                    },
+                    {
+                        gridIndex: 4,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {
+                            lineStyle: {
+                                color: '#1E5A79'
+                            }
+                        },
+                        inverse: true,
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                    },
+                    {
+                        gridIndex: 5,
+                        axisLabel: {show: false},
+                        axisTick: {show: false},
+                        axisLine: {
+                            lineStyle: {
+                                color: '#172E6F'
+                            }
+                        },
+                        inverse: true,
+                        boundaryGap: false,
+                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        axisLabel: {show: false},
+                        position: "right",
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {show: false},
+                        splitLine: {show: false}
+                    },
+                    {
+                        gridIndex: 1,
+                        axisLabel: {show: false},
+                        position: "right",
+                        axisLine: {
+                            show: false
+                        },
+
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        type: 'value'
+                    },
+                    {
+                        gridIndex: 2,
+                        axisLabel: {show: false},
+                        position: "right",
+                        axisLine: {
+                            show: false
+                        },
+
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        type: 'value'
+                    },
+                    {
+                        gridIndex: 3,
+                        axisLabel: {show: false},
+                        position: "right",
+                        axisLine: {
+                            show: false
+                        },
+
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        type: 'value'
+                    },
+                    {
+                        gridIndex: 4,
+                        axisLabel: {show: false},
+                        position: "right",
+                        axisLine: {
+                            show: false
+                        },
+
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        type: 'value'
+                    },
+                    {
+                        gridIndex: 5,
+                        axisLabel: {show: false},
+                        position: "right",
+                        axisLine: {
+                            show: false
+                        },
+
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        type: 'value'
+                    },
+                ],
+                geo: {
+                    map: 'china',
+                    emphasis: {
+                        label: {
+                            show: false
+                        },
+
+                    },
+                    roam: false,
+                    itemStyle: {
+                        areaColor: '#2043AA',
+                        borderColor: '#111'
+                    }
+                },
+                series: [
+                    {
+                        name: 'pm2.5',
+                        type: 'effectScatter',
+                        coordinateSystem: 'geo',
+                        data: convertData(data.sort(function (a, b) {
+                            return b.value - a.value;
+                        }).slice(0, 10)),
+                        symbolSize: function (val) {
+                            return val[2] / 15;
+                        },
+                        showEffectOn: 'render',
+                        // rippleEffect: { // 效果
+                        //     brushType: 'stroke'
+                        // },
+                        emphasis: {
+                            scale: true
+                        },
+                        label: {
+                            formatter: '{b}',
+                            position: 'right',
+                            show: false
+                        },
+                        itemStyle: {
+                            color: function (params) {
+                                var colorList = ['#FFA200', '#0006FF', '#D6FC01', '#00D8FF', '#FF00CC', '#FF1200']
+                                if (params.dataIndex <= 6) {
+                                    return colorList[params.dataIndex]
+                                } else {
+                                    return colorList[params.dataIndex % 6]
+                                }
+                            },
+                            shadowBlur: 10,
+                        },
+                        zlevel: 1
+                    },
+                    {
+                        type: 'line',
+
+                        smooth: true,
+                        lineStyle: {
+                            color: 'rgba(161,23,128,1)',
+                            width: 1
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(161,23,128,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(161,23,128,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        //4,5,3,9,2,4,8,3,4,5
+                        data: [
+                            {
+                                value: 4, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(161,23,128,1)',
+                                    borderWidth: 1,
+                                },
+                            },
+                            {value: 5, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 2, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        symbol: "none",
+                        smooth: true,
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        lineStyle: {
+                            color: 'rgba(196,103,20,1)',
+                            width: 1
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(196,103,20,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(196,103,20,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: [
+                            {
+                                value: 4, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(196,103,20,1)',
+                                    borderWidth: 1,
+                                },
+                            },
+                            {value: 5, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 2, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        xAxisIndex: 2,
+                        yAxisIndex: 2,
+                        smooth: true,
+                        lineStyle: {
+                            color: 'rgba(181,174,28,1)',
+                            width: 1
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(181,174,28,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(181,174,28,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        //4,5,3,9,2,4,8,3,4,5
+                        data: [
+                            {
+                                value: 4, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(181,174,28,1)',
+                                    borderWidth: 1,
+                                },
+                            },
+                            {value: 5, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 2, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        symbol: "none",
+                        smooth: true,
+                        xAxisIndex: 3,
+                        yAxisIndex: 3,
+                        lineStyle: {
+                            color: 'rgba(165,15,71,1)',
+                            width: 1
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(165,15,71,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(165,15,71,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: [
+                            {
+                                value: 4, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(165,15,71,1)',
+                                    borderWidth: 1,
+                                },
+                            },
+                            {value: 5, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 2, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        xAxisIndex: 4,
+                        yAxisIndex: 4,
+                        smooth: true,
+                        lineStyle: {
+                            color: 'rgba(16,182,165,1)',
+                            width: 1
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(16,182,165,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(16,182,165,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        //4,5,3,9,2,4,8,3,4,5
+                        data: [
+                            {
+                                value: 4, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(16,182,165,1)',
+                                    borderWidth: 1,
+                                },
+                            },
+                            {value: 5, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 2, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+
+                        ]
+                    },
+                    {
+                        type: 'line',
+                        symbol: "none",
+                        smooth: true,
+                        xAxisIndex: 5,
+                        yAxisIndex: 5,
+                        lineStyle: {
+                            color: 'rgba(9,83,176,1)',
+                            width: 1
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(9,83,176,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(9,83,176,0)' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            }
+                        },
+                        data: [
+                            {
+                                value: 4, symbol: 'circle',
+                                symbolSize: 5,
+                                itemStyle: {
+                                    color: '#293880',
+                                    borderColor: 'rgba(9,83,176,1)',
+                                    borderWidth: 1,
+                                },
+                            },
+                            {value: 5, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 9, symbol: 'none'},
+                            {value: 2, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 8, symbol: 'none'},
+                            {value: 3, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+                            {value: 4, symbol: 'none'},
+
+                        ]
+                    }
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setMap();
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.chinaMap {
+    height: 100%;
+}
+
+</style>

src/views/modules/monitoring/components/page4/chinaMap.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="chinaMap"></div>
+</template>
+
+<script>
+import "@/lib/china.js"
+
+export default {
+    name: '',
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setMap() {
+            var data = [
+                {name: '北京', value: 1176},
+                {name: '上海', value: 2765},
+                {name: '天津', value: 509},
+                {name: '重庆', value: 610},
+                {name: '黑龙江', value: 1966},
+                {name: '湖北', value: 68309},
+                {name: '台湾', value: 16451},
+                {name: '香港', value: 12368},
+                {name: '河北', value: 1435},
+                {name: '河南', value: 1594},
+                {name: '安徽', value: 1008},
+                {name: '江苏', value: 1603},
+                {name: '浙江', value: 1497},
+                {name: '福建', value: 1314},
+                {name: '广东', value: 3247},
+                {name: '湖南', value: 1197},
+                {name: '四川', value: 1254},
+                {name: '云南', value: 1607},
+                {name: '吉林', value: 579},
+                {name: '内蒙古', value: 613},
+                {name: '辽宁', value: 515},
+                {name: '山东', value: 990},
+                {name: '山西', value: 263},
+                {name: '陕西', value: 701},
+                {name: '甘肃', value: 344},
+                {name: '新疆', value: 981},
+                {name: '宁夏', value: 122},
+                {name: '江西', value: 951},
+                {name: '贵州', value: 159},
+                {name: '广西', value: 355},
+                {name: '海南', value: 190},
+                {name: '青海', value: 30},
+                {name: '澳门', value: 77},
+                {name: '西藏', value: 1},
+
+            ];
+            const regions = data.map(item=> {
+                return {
+                    name: item.name,
+                    itemStyle: {
+                        areaColor: '#2043AA'
+                    },
+                    emphasis: {
+                        itemStyle : {
+                            areaColor: '#2043AA'
+                        }
+                    }
+                }
+            })
+            let option = {
+                title: [
+                    {
+                        text: "现有确诊 {a| 3204} \n {b|较昨日} {c| +6}",
+                        top: 0,
+                        left: '7%',
+                        textStyle: {
+                            color: '#6dd0e3',
+                            fontSize: 16,
+                            fontWeight: 'normal',
+                            rich: {
+                                a: {
+                                    color: '#E64546',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    fontSize: 12,
+                                    lineHeight: 20,
+                                    color: '#163794'
+                                },
+                                c: {
+                                    fontSize: 12,
+                                    color: '#E64546'
+                                }
+                            }
+                        }
+                    },
+                    {
+                        text: '现有疑似 {a| 2} \n {b|较昨日} {c| +1}',
+                        top: 0,
+                        left: '40%',
+
+                        textStyle: {
+                            color: '#6dd0e3',
+                            fontSize: 16,
+                            fontWeight: 'normal',
+                            rich: {
+                                a: {
+                                    color: '#FF9985',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    fontSize: 12,
+                                    lineHeight: 20,
+                                    color: '#163794'
+                                },
+                                c: {
+                                    fontSize: 12,
+                                    color: '#FF9985'
+                                }
+                            }
+                        }
+                    },
+                    {
+                        text: '境外输入 {a| 9794} \n {b|较昨日} {c| +15}',
+                        top: 0,
+                        right: '7%',
+                        textStyle: {
+                            color: '#6dd0e3',
+                            fontSize: 16,
+                            fontWeight: 'normal',
+                            rich: {
+                                a: {
+                                    color: '#476DA0',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    fontSize: 12,
+                                    lineHeight: 20,
+                                    color: '#163794'
+                                },
+                                c: {
+                                    fontSize: 12,
+                                    color: '#476DA0'
+                                }
+                            }
+                        }
+                    },
+                    {
+                        text: '累计确诊 {a| 126836} \n {b|较昨日} {c| +60}',
+                        top: '14%',
+                        left: '7%',
+                        textStyle: {
+                            color: '#6dd0e3',
+                            fontSize: 16,
+                            fontWeight: 'normal',
+                            rich: {
+                                a: {
+                                    color: '#B80909',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    fontSize: 12,
+                                    lineHeight: 20,
+                                    color: '#163794'
+                                },
+                                c: {
+                                    fontSize: 12,
+                                    color: '#B80909'
+                                }
+                            }
+                        }
+                    },
+                    {
+                        text: '累计治愈 {a| 117934} \n {b|较昨日} {c| +54}',
+                        top: '14%',
+                        left: '40%',
+                        textStyle: {
+                            color: '#6dd0e3',
+                            fontSize: 16,
+                            fontWeight: 'normal',
+                            rich: {
+                                a: {
+                                    color: '#10AEB5',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    fontSize: 12,
+                                    lineHeight: 20,
+                                    color: '#163794'
+                                },
+                                c: {
+                                    fontSize: 12,
+                                    color: '#10AEB5'
+                                }
+                            }
+                        }
+                    },
+                    {
+                        text: '累计死亡 {a| 5997} \n {b|较昨日} {c| +1}',
+                        top: '14%',
+                        right: '7%',
+
+                        textStyle: {
+                            color: '#6dd0e3',
+                            fontSize: 16,
+                            fontWeight: 'normal',
+                            rich: {
+                                a: {
+                                    color: '#4D5054',
+                                    fontSize: 16
+                                },
+                                b: {
+                                    fontSize: 12,
+                                    lineHeight: 20,
+                                    color: '#163794'
+                                },
+                                c: {
+                                    fontSize: 12,
+                                    color: '#4D5054'
+                                }
+                            }
+                        }
+                    }
+
+                ],
+                visualMap: {
+                    left: 'right',
+                    type: 'piecewise',
+                    pieces: [
+                        {gte: 0, lte: 9, label: '0-9', color: '#FFE5DB'},
+                        {gte: 10, lte: 99, label: '10-99', color: '#FF9985'},
+                        {gte: 100, lte: 999, label: '10-999', color: '#F57567'},
+                        {gte: 1000, lte: 9999, label: '1000-9999', color: '#E64546'},
+                        {gte: 10000, label: '10000', color: '#B80909'},
+                    ],
+                    showLabel: true,
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    }
+                },
+                legend: {
+                    show: false
+                },
+                tooltip: {
+                    show: true,
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10,
+                    }
+                },
+                geo: {
+                    map: 'china',
+                    top: '20%',
+                    label: {
+                        show: true,
+                        color: '#6dd0e3',
+                        fontSize: 10
+                    },
+                    roam: false,
+                    itemStyle: {
+                        areaColor: '#2043AA',
+                        borderColor: '#676e6f',
+                    },
+                    regions: regions
+                },
+                series: [
+                    {
+                        name: '累计确诊人数',
+                        type: 'map',
+                        label: {
+                            position: 'center',
+                            show: true
+                        },
+                        geoIndex: 0,
+                        data: data
+                    },
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize()
+            this.myChart.setOption(option);
+        },
+    },
+    mounted() {
+        this.setMap();
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.chinaMap {
+    height: 100%;
+}
+
+</style>

src/views/modules/monitoring/components/pie.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="webPie">
+        <div class="webPie-title">
+            <span class="subtitle"><span class="leftCircle"
+                                         :style="{background:data.color}"></span>{{ data.title }}<span
+                class="rightCircle" :style="{background:data.color}"></span></span>
+        </div>
+        <div class="webPie-content" :id="id">
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: '',
+    props: {
+        id: String,
+        data: Object
+    },
+    data() {
+        return {
+            myChart: null
+        }
+    },
+    methods: {
+        setChart() {
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    backgroundColor: '#11367a',
+                    textStyle: {
+                        color: '#6dd0e3',
+                        fontSize: 10
+                    },
+                    formatter: "{b}:{d}%"
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: '70%',
+                        center: ['50%', '50%'],
+                        label: {
+                            color: '#75deef',
+                            fontSize: 8,
+                            formatter: function (data) {
+                                return data.data.name + ' ' + (data.percent).toFixed(0) + '%';
+                            }
+                        },
+                        labelLine: {
+                            length: 10,
+                            length2: 8,
+                            lineStyle: {
+                                color: 'rgb(57,63,90)'
+                            }
+                        },
+                        data: this.data.data,
+                    }
+                ]
+            };
+            if (!this.myChart) this.myChart = this.$echarts(document.getElementById(this.id));
+            this.myChart.clear();
+            this.myChart.resize();
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart()
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.webPie {
+    width: 100%;
+    height: 100%;
+
+    .webPie-title {
+        height: 20%;
+        text-align: center;
+
+        .subtitle {
+            color: #68C6D6;
+            position: relative;
+            font-size: 12px;
+
+            .leftCircle {
+                display: block;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                position: absolute;
+                left: -15px;
+                top: 5px;
+            }
+
+            .rightCircle {
+                display: block;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                position: absolute;
+                right: -15px;
+                top: 5px;
+            }
+        }
+    }
+
+    .webPie-content {
+        height: 80%
+    }
+}
+</style>

src/views/modules/monitoring/components/radar.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="chart"></div>
+</template>
+
+<style lang="less" scoped>
+.chart {
+    height: 100%;
+}
+</style>
+
+<script>
+export default {
+    name: '',
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            myChart:null
+        }
+    },
+    methods: {
+        setChart() {
+            let seriesData = []
+            this.data.data.forEach(item => {
+                seriesData.push(
+                    {
+                        value: item.value,
+                        name: item.name,
+                        symbol: 'none',
+                        symbolSize: 5,
+                        itemStyle: {
+                            color: item.color
+                        },
+                        lineStyle: {
+                            color: item.color,
+                            width: 1,
+                        },
+                        emphasis: {
+                            lineStyle: {
+                                width: 2
+                            }
+                        }
+                    }
+                )
+            })
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                title: {
+                    text: this.data.title,
+                    top: "5%",
+                    left: this.data.position[0],
+                    textStyle: {
+                        color: '#fff',
+                        fontSize:12,
+                    }
+                },
+                legend: {
+                    data: this.data.data.map(item => {
+                        return {name: item.name, icon: 'circle'}
+                    }),
+                    left: "center",
+                    top: this.data.position[1],
+                    itemWidth: 7,
+                    itemHeight: 7,
+                    textStyle: {
+                        color: '#67C3D6',
+                        fontSize: 10
+                    }
+                },
+                radar: {
+                    indicator: this.data.indicator,
+                    center: this.data.center,
+                    radius: "50%",
+                    startAngle: 90,
+                    splitNumber: 4,
+                    shape: 'circle',
+                    axisName: {
+                        textStyle: {
+                            color: '#0DECF0',
+                            fontSize: 8,
+                        }
+                    },
+                    axisNameGap: 3,
+                    splitArea: {
+                        areaStyle: {
+                            color: ['#1166C4',
+                                '#0C52A4', '#102F7D',
+                                '#13216B'],
+                        }
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#163794'
+                        }
+                    },
+                    splitLine: {
+                        show: false,
+                        lineStyle: {
+                            color: '#163794'
+                        }
+                    }
+                },
+                series: {
+                    name: '雷达图',
+                    type: 'radar',
+                    emphasis: {
+                        // color: 各异,
+                        lineStyle: {
+                            width: 4
+                        }
+                    },
+                    data: seriesData
+                }
+            };
+            if (this.id == 'bottom_1_2') {
+                option.legend.left = '5%';
+            }
+            if (!this.myChart) this.myChart = this.$echarts(this.$el);
+
+            this.myChart.clear();
+            this.myChart.resize(
+                {
+                    width: this.$el.offsetWidth,
+                    height: this.$el.offsetHeight
+                }
+            )
+            this.myChart.setOption(option);
+        }
+    },
+    mounted() {
+        this.setChart();
+    },
+}
+</script>
+