样式修改

component/chart/bar-chart.js

@@ -1,13 +1,20 @@
(function () {
    Vue.component('bar-chart', {
        template: '<div class="chart_box" >\
                        <div :id="chartid" class="chart_box"></div>\
                        <div v-show="!isEmpty" :id="chartid" class="chart_box"></div>\
                        <div class="noData" v-show="isEmpty" class="chart-no-data">\
                            <p v-show="isEmpty" style="text-align: center">{{title}}</p>\
                            <img src="../../bigData/images/noData.png" alt="">\
                            暂无数据\
                        </div>\
                    </div>',
        props: ['config'],
        data: function () {
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
                isEmpty: false,
                title:''
            }
        },
        mounted: function () {
@@ -36,6 +43,16 @@
        watch: {
            config: function (data) {
                if (data) {
                    debugger
                    if(!data.series[0].data){
                        this.isEmpty = true;
                        this.title =data.title && data.title.text;  //无数据时渲染的标题  
                    }else{
                        if(data.series[0].data.length == 0){
                            this.isEmpty = true;
                            this.title =data.title && data.title.text;  //无数据时渲染的标题  
                        }
                    }
                    this.chart.setOption(this.setOption(data));
                }
            }

page/bigData/css/alert.css

@@ -22,7 +22,7 @@ body {
}
.alert_content .alert_title .right {
  float: right;
  width: 2.838542rem;
  width: 2.538542rem;
  overflow: hidden;
}
.alert_content .alert_title .right .alert_type {
@@ -71,9 +71,19 @@ body {
  background-repeat: no-repeat;
  background-position: 10px center;
}
.alert_content .alert_title .right .alert_time input:hover {
  border: solid 1px #009dfe!important;
}
.alert_content .alert_title .right .alert_time input:active {
  border: solid 1px #009dfe!important;
}
.alert_content .alert_title .right .alert_time input:focus {
  border: solid 1px #009dfe!important;
}
.alert_content .alert_people {
  padding-left: .260417rem;
  padding-right: .260417rem;
  margin-top: 15px;
}
.alert_content .alert_people > div {
  width: 1.677083rem;
@@ -100,7 +110,7 @@ body {
.alert_chart {
  padding-left: .260417rem;
  padding-right: .260417rem;
  margin-top: .2025rem;
  margin-top: .1025rem;
}
.alert_chart .left {
  height: 2.848958rem;
@@ -116,28 +126,29 @@ body {
  width: 199px;
}
.alert_chart .left_2 ul li {
  background-color: #062e5a;
  background-color: rgba(5, 31, 51, 0.75);
}
.alert_chart .left_2 ul li.title {
  box-shadow: inset 1px 0px 20px 6px #009dfe;
  box-shadow: inset 1px 0px 20px 6px #004b7a;
  border: 1px solid #009dfe;
}
.alert_chart .left_2 ul li.title div {
  height: 40px;
  line-height: 40px;
  height: 42px;
  line-height: 42px;
}
.alert_chart .left_2 ul li div {
  height: 45px;
  line-height: 45px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  color: #b5e1fc;
  border: solid 1px #009dfe;
  border: solid 1px #004b7a;
  width: 50%;
}
.alert_chart .right {
  width: 4.583333rem;
}
.alert_chart .right .top > div {
  width: 1.510417rem;
  width: 284px;
  height: 1.380208rem;
  background-image: url("../images/top_bgi.png");
  background-size: 100% 100%;
@@ -147,13 +158,13 @@ body {
  background-image: url("../images/right-chart-bgi.png");
}
.alert_chart .right .top .nianling_2 {
  width: 430px;
  height: 256px;
  width: 433px;
  height: 276px;
  background-image: url("../images/nianling_2.png");
}
.alert_chart .right .top .xingbie_2 {
  width: 430px;
  height: 256px;
  width: 433px;
  height: 276px;
  background-image: url("../images/nianling_2.png");
}
.alert_chart .right .bottom {
@@ -226,3 +237,20 @@ body {
.layui-laydate {
  left: 4.453125rem !important;
}
.layui-laydate .laydate-disabled,
.layui-laydate .laydate-disabled:hover {
  color: #0c324f!important;
}
.chart-no-data {
  text-align: center;
  color: #b5e1fc;
}
.chart-no-data p {
  font-size: 16px;
  padding-top: 10px;
  font-weight: bold;
}
.chart-no-data img {
  display: block;
  margin: 40px auto 15px;
}

page/bigData/css/alert.less

@@ -12,7 +12,7 @@ body{
    float: left;font-size: .125rem;color: #b5e1fc;margin-left: .3125rem;
}
.alert_content .alert_title .right{
    float: right;width: 2.838542rem;overflow: hidden;
    float: right;width: 2.538542rem;overflow: hidden;
}
.alert_content .alert_title .right .alert_type{
    float: left;width: .875rem;
@@ -45,10 +45,19 @@ body{
    background-image: url("../images/icon_rili1.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    &:hover{
        border: solid 1px #009dfe!important;
    }
    &:active{
        border: solid 1px #009dfe!important;
    }
    &:focus{
        border: solid 1px #009dfe!important;
    }
}
.alert_content .alert_people{
    padding-left: .260417rem;padding-right: .260417rem;
    padding-left: .260417rem;padding-right: .260417rem;margin-top: 15px;
}
.alert_content .alert_people>div{
    width: 1.677083rem;height: .239583rem;line-height: .239583rem;background-image: url("../images/people_bgi.png");background-size: 100% 100%;
@@ -66,7 +75,7 @@ body{
    }
}
.alert_chart{
    padding-left: .260417rem;padding-right: .260417rem;margin-top: .2025rem;
    padding-left: .260417rem;padding-right: .260417rem;margin-top: .1025rem;
    .left{
        height: 2.848958rem;width: 2.15625rem;background-image: url("../images/quxian-bgi.png");background-size: 100% 100%;
    }
@@ -75,15 +84,15 @@ body{
        ul{
            width: 199px;
            li{
                background-color: #062e5a;
                background-color: rgba(5, 31, 51, 0.75);
                &.title{
                    box-shadow:inset 1px 0px 20px 6px #009dfe;
                    box-shadow:inset 1px 0px 20px 6px #004b7a;border:1px solid #009dfe;
                    div{
                        height: 40px;line-height: 40px;
                        height: 42px;line-height: 42px;
                    }
                }
                div{
                    height: 45px;line-height: 45px;text-align: center;color: #b5e1fc; border: solid 1px #009dfe;width: 50%;
                    height: 46px;line-height: 46px;text-align: center;color: #b5e1fc; border: solid 1px #004b7a;width: 50%;
                }
            }
        }
@@ -92,16 +101,16 @@ body{
        width: 4.583333rem;
        .top{
            &>div{
                width: 1.510417rem;height: 1.380208rem;background-image: url("../images/top_bgi.png");background-size: 100% 100%;
                width: 284px;height: 1.380208rem;background-image: url("../images/top_bgi.png");background-size: 100% 100%;
                &.bingfa2{
                    width: 3.005208rem;background-image: url("../images/right-chart-bgi.png");
                }
            }
            .nianling_2{
                width: 430px;height: 256px;background-image: url("../images/nianling_2.png");
                width: 433px;height: 276px;background-image: url("../images/nianling_2.png");
            }
            .xingbie_2{
                width: 430px;height: 256px;background-image: url("../images/nianling_2.png");
                width: 433px;height: 276px;background-image: url("../images/nianling_2.png");
            }
        }
        .bottom{
@@ -173,4 +182,16 @@ body{
}
.layui-laydate{
    left: 4.453125rem!important
}
.layui-laydate .laydate-disabled, .layui-laydate .laydate-disabled:hover{
    color: #0c324f!important;
}
.chart-no-data{
    text-align: center;color: #b5e1fc;
    p{
        font-size: 16px;padding-top: 10px;font-weight: bold;
    }
    img{
        display: block;margin: 40px auto 15px;
    }
}

page/bigData/html/alert5.html

@@ -53,8 +53,6 @@
                    </div>
                </div>
            </div>
            <div class="alert_people flex f_x_sb f_y_c">
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left_2 flex f_x_sb">
                    <ul>

page/bigData/html/alert6.html

@@ -53,8 +53,6 @@
                    </div>
                </div>
            </div>
            <div class="alert_people flex f_x_sb f_y_c">
            </div>
            <div class="alert_chart flex f_x_sb">
                <div class="left_2 flex f_x_sb">
                    <ul>

page/bigData/js/alert1.js

@@ -158,12 +158,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            console.log(options)
            this.alertChart2 = options
        },
@@ -184,12 +184,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){

page/bigData/js/alert2.js

@@ -158,12 +158,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            console.log(options)
            this.alertChart2 = options
        },
@@ -184,12 +184,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){

page/bigData/js/alert3.js

@@ -152,12 +152,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart2 = options
        },
        setAlertChart3:function(data){
@@ -177,12 +177,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart4:function(data){

page/bigData/js/alert5.js

@@ -140,12 +140,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart3:function(data){
@@ -165,12 +165,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart4 = options
        },
        setAlertChart4:function(data){

page/bigData/js/alert6.js

@@ -140,12 +140,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.044 * window.screen.width;//85;
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['35%','55%'];
            this.alertChart3 = options
        },
        setAlertChart3:function(data){
@@ -165,12 +165,12 @@ new Vue({
                });
                return name + "  " + clientcounts[index];
            }
            options.legend.left = '48%';
            options.legend.left = '58%';
            options.legend.top = 0.0625 * window.screen.width;//120
            options.legend.itemWidth = 0.005 * window.screen.width;//10;
            options.legend.itemHeight = 0.005 * window.screen.width;//10;
            options.legend.itemGap = 0.0078 * window.screen.width;//15;
            options.series[0].center = ['25%','55%'];
            options.series[0].center = ['40%','55%'];
            this.alertChart4 = options
        },
        setAlertChart4:function(data){

page/bigData/js/alertCharts.js

@@ -246,14 +246,16 @@ qushiChart = function(options){
        },
        "grid": {
            top: '90',
            left: '60'
            left: '60',
            bottom:'25',
            right:'60'
        },
        legend: {
            data: ['新增人次', '环比'],
            textStyle: {
                color: '#b5e1fc'
            },
            top: '40'
            top: '45'
        },
        xAxis: [{
            type: 'category',