隐患图标分析修改

jiale

2022-05-24 2a8099cf8cd907c6e14a9ac4300a05544c345b0d

 src/views/chartAnalysis/index.vue

@@ -92,10 +92,18 @@
                </div>
            </el-form>
        </div>
        <div class="whole_bottom">
            <div v-if="chartType == 'pie'" id="pie" style="width: 100%;height: 550px;"></div>
            <div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>
            <div v-if="chartType == 'column'" id="column" style="width: 100%;height: 650px;"></div>
        <div class="whole_bottom" style="position: relative;z-index: 1">
            <div id="heigcharts" style="width: 100%;height: 550px;"></div>
            <!--<div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>-->
            <!--<div v-if="chartType == 'column'" id="column" style="width: 100%;height: 550px;"></div>-->
            <div v-if="chartType == 'column'" class="legend">
                <div class="legend-body">

                    <div v-for="(item,index) in this.columnChartData.xList" class="legend-item">
                        <div :class="'legendItemBack'+index"></div>{{item}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
@@ -167,6 +175,7 @@
            YHBMList: [],
            YHJBList: [],
            YHZTList: [],
            columnXData:[]
        }
    },
    mounted() {
@@ -299,7 +308,7 @@
                    data: this.pieChartData
                }]
            }
            Highcharts.chart("pie", option);
            Highcharts.chart("heigcharts", option);
        },
        getData() {
            this.formData.beginTime = this.time[0]
@@ -333,11 +342,17 @@
                                    // },
                                    "data": [parseInt(n.yAxes)]
                                }
                                dataList.push(singleData);
                                dataList.push(parseInt(n.yAxes));
                            })
                        }
                        this.columnChartData.xList = xList;
                        this.columnChartData.dataList = dataList;
                        this.columnChartData.dataList=[]
                        this.columnChartData.dataList.push(
                            {
                                data:dataList,
                                colorByPoint:true
                            }
                            );
                        this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        this.lineChartData = {}
@@ -507,13 +522,16 @@
                    enabled: false //不显示LOGO
                },
            }
            Highcharts.chart("line", option);
            Highcharts.chart("heigcharts", option);
        },
        initCloumnChart() {

            console.log("this.columnChartData.xList",this.columnChartData.xList)
            console.log("this.columnChartData.dataList",this.columnChartData.dataList)
            var option = {
                chart:{
                    type:'column'
                    type:'column',
                    marginBottom:70
                },
                title: {
                    text: null
@@ -523,12 +541,14 @@
                        enabled:false
                    }
                },
                colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                tooltip:{
                    formatter:function () {
                        return this.x+" : "+this.y
                    }
                },
                colors: ['#ff6600', '#fcd202', '#b0de09', '#0289cc', '#2001cd', '#cd0d74', '#cc0000', '#00cc00', '#0000cc', '#dddddd', '#999999', '#333333', '#990000', '#92e3d4', '#f09aea'],
                legend: {
                    align: "center", //程度标的目标地位
                    verticalAlign: "bottom",//垂直标的目标地位
                    x: 0, //间隔x轴的间隔
                    y: 0 //间隔Y轴的间隔
                    enabled:false,
                },
                xAxis: {
                    // type: 'category',
@@ -545,7 +565,7 @@
                    enabled: false //不显示LOGO
                },
            }
            Highcharts.chart("column", option);
            Highcharts.chart("heigcharts", option);
        },
        getCurrentMonthFirst() {
            var date = new Date();
@@ -585,6 +605,75 @@
</script>

<style scoped>
.legend{
    position: absolute;bottom: 10px;z-index: 2;
    width: 100%;
}
.legend-body{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    height: 100%;
}
.legend-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    line-height: 1.5;
}
.legend-item div{
    width: 20px;
    height: 15px;
    margin-right: 10px;
}
.legendItemBack0{
    background-color: #ff6600;
}
.legendItemBack1{
    background-color: #fcd202;
}
.legendItemBack2{
    background-color: #b0de09;
}
.legendItemBack3{
    background-color: #0289cc;
}
.legendItemBack4{
    background-color: #2001cd;
}
.legendItemBack5{
    background-color: #cd0d74;
}
.legendItemBack6{
    background-color: #cc0000;
}
.legendItemBack7{
    background-color: #00cc00;
}
.legendItemBack8{
    background-color: #0000cc;
}
.legendItemBack9{
    background-color: #dddddd;
}
.legendItemBack10{
    background-color: #999999;
}
.legendItemBack11{
    background-color: #333333;
}
.legendItemBack12{
    background-color: #990000;
}
.legendItemBack13{
    background-color: #92e3d4;
}
.legendItemBack14{
    background-color: #f09aea;
}
.top {
    padding: 10px 5px;
    background: #e4edf4;