曲线图加载

panzy

2022-05-21 81d866385fd7bbd006d7fd60159844e7340c416d

 src/views/chartAnalysis/index.vue

@@ -69,10 +69,10 @@
                            <el-radio :label="6">按检查类别</el-radio>
                            <el-radio :label="7">按当前警情</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="radio2" style="margin-left: 50px;">
                            <el-radio :label="1">曲线图</el-radio>
                            <el-radio :label="2">饼状图</el-radio>
                            <el-radio :label="3">柱形图</el-radio>
                        <el-radio-group v-model="chartType" style="margin-left: 50px;">
                            <el-radio label="line">曲线图</el-radio>
                            <el-radio label="pie">饼状图</el-radio>
                            <el-radio label="column">柱形图</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
@@ -106,9 +106,11 @@
                    </el-form-item>
                    <el-form-item>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >汇总</el-button>
                        >汇总
                        </el-button>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >同比环比</el-button>
                        >同比环比
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
@@ -154,18 +156,27 @@
            inspectionCategoryList:['日常检查'],
            policeSituationList: ['轻警'],
            radio: 1,
            radio2: 1,
            columnChartData:{}
            chartType: "column",
            columnChartData: {},
            lineChartData: {}
        }
    },
    mounted() {
        this.getData()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
            this.formData.echart_type = newVal;
            this.getData();
        }
    },
    methods: {
        getData(){
            chart_analysis(this.formData).then(res=>{
                let data = res.data;
                if(data.ok){
                    console.log(this.formData.echart_type)
                    if (this.formData.echart_type == "column") {
                    let xList = [];
                    let dataList = [];
                    data.data[0].forEach(n=>{
@@ -184,6 +195,41 @@
                    this.columnChartData.xList = xList;
                    this.columnChartData.dataList = dataList;
                    this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        let dataList = [];
                        let timeList = [];
                        data.data[0].forEach(n => {
                            if(timeList.indexOf(n.days)==-1){
                                timeList.push(n.days)
                            }
                            let obj = dataList.find(v => v.name == n.catalogy);
                            if (obj == null) {
                                // obj.data.push(n.counts);
                                obj = {
                                    name: n.catalogy,
                                    data: [],
                                    type: 'line',
                                    areaStyle: {}
                                }
                                dataList.push(obj)
                            }
                        })
                        timeList.forEach(time=>{
                            let singileData = data.data[0].filter(n=>n.days == time)
                            dataList.forEach(n=>{
                                let searchData = singileData.find(v=>v.catalogy == n.name);
                                if(searchData!=null){
                                    n.data.push(searchData.counts)
                                }else{
                                    n.data.push(0)
                                }
                            })
                        })
                        this.lineChartData = {}
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        this.initLineChart()
                    }
                    // this.initChart()
                }

@@ -214,86 +260,22 @@
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                    data: this.lineChartData.timeList
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: [
                    {
                        name: '电仪车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料二车间',
                        data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产二车间',
                        data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '烧焦二车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '炼焦一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '众和机电',
                        data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '生产技术部',
                        data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '选煤厂',
                        data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '工程部',
                        data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '机电部',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
                series:this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
                //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
                //         type: 'line',
                //         areaStyle: {}
                //     }
                // ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
@@ -323,86 +305,22 @@
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                    data: this.lineChartData.timeList
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: [
                    {
                        name: '电仪车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料二车间',
                        data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产二车间',
                        data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '烧焦二车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '炼焦一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '众和机电',
                        data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '生产技术部',
                        data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '选煤厂',
                        data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '工程部',
                        data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '机电部',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
                series:this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
                //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
                //         type: 'line',
                //         areaStyle: {}
                //     }
                // ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
@@ -575,12 +493,15 @@
    display: flex;
    flex-direction: column;
}

.top /deep/ .el-form-item__label{
    width: 110px;
}

.top /deep/ .el-form-item{
    margin-bottom: 5px;
}

/*多选框间距*/
.checkbox /deep/ .el-checkbox-group{
    display: flex;
@@ -588,68 +509,85 @@
    flex-wrap: wrap;
    justify-content: space-between;
}

.center{
    text-align: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0;
}

.center /deep/ .el-form-item__label{
    width: auto;
    padding-right: 0;
}

.checkbox {
    display: flex;
}

/deep/ .el-checkbox{
    margin-right: 7px;
}

.checkbox /deep/ .el-checkbox{
    margin-right: 0px;
}

/deep/ .el-checkbox__label{
    padding-left: 3px;
}

.checkbox /deep/ .el-checkbox__label{
    padding-left: 3px;
}

/deep/ .el-radio{
    margin-right: 7px;
}

.center{
    display: flex;
    align-items: center;
    justify-content: start;
}

.center /deep/ .el-form-item--medium{
    margin-bottom: 0px;
    display: flex;
}

.center /deep/ .el-input__inner{
    border: transparent;
    width: 85px;
    padding: 0 5px;
}

.center .time /deep/ .el-form-item__content{
    width: 70%;
}

.center .time /deep/ .el-input__inner{
    width: 218px;
}

.center .time /deep/ .el-range-input {
    width: 90px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 5px;
}

/deep/ .el-icon-date{
    display: none;
}

/*日期*/
/deep/ .el-date-editor .el-range-separator{
    width: auto;
    line-height: 36px;
}

.btn{
    background-color: #034ea2;
    border: 1px solid #034ea2;