添加饼图

gaoshp

2024-11-10 e051ca94fc5ab5f956e6bbf9ff7fa9d91cf47bb9

添加饼图

 src/views/mdc/processParam/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-11-05 22:55:01
 * @LastEditTime: 2024-11-10 19:36:53
 * @FilePath: /cps-web/src/views/mdc/processParam/index.vue
 实时看板
-->
@@ -43,8 +43,15 @@
                                    v-if="(item.paramChartType == 'distribute' && item?.dayCharts?.series?.length > 1) || (item.paramChartType !== 'distribute' && item?.dayCharts?.series?.length > 0) && activeList.indexOf(index) > -1">
                                    <div>
                                        <el-button size="small" @click="viewData(item)">查看数据</el-button>
                                        <el-switch style="margin-left: 8px;" v-model="item.showPie"
                                            v-show="item.paramChartType == 'distribute'" active-text="饼图"
                                            inactive-text="" />
                                    </div>
                                    <scEcharts style="width:100%" :height="item.height" :option="item?.dayCharts">
                                    <scEcharts v-if="!item.showPie" style="width:100%" :height="item.height"
                                        :option="item?.dayCharts">
                                    </scEcharts>
                                    <scEcharts v-else style="width:100%" :height="item.height"
                                        :option="item?.pieCharts">
                                    </scEcharts>
                                </div>
                                <el-empty v-else description="暂无数据" />
@@ -308,13 +315,15 @@
                let index = this.list.findIndex(item => item.dpName === myname)
                this.list[index] = Object.assign({
                    ...this.list[index],
                    dayCharts: {}
                    dayCharts: {},
                    showPie: false
                })
            } else {
                let index = this.list.findIndex(item => item.dpName === myname)
                this.list[index] = Object.assign({
                    ...this.list[index],
                    dayCharts
                    dayCharts,
                    showPie: false
                })
            }

@@ -415,11 +424,58 @@
                },
            }
            let index = this.list.findIndex(item => item.dpName === myname)

            this.list[index] = Object.assign({
                ...this.list[index],
                dayCharts
                dayCharts,
                pieCharts: this.getPieCharts(data.data),
                showPie: false
            })
            console.log(this.list, '>>>>>>>>>>>>>>>>>>>>>>111')
            // console.log(this.list, '>>>>>>>>>>>>>>>>>>>>>>111')
        },
        getPieCharts(data) {
            let start = this.timeRange.startTime
            const obj = {
            }
            data.forEach(v => {
                if (obj[v.value]) {
                    obj[v.value] += moment(v.time).valueOf() - moment(start).valueOf()
                } else {
                    obj[v.value] = moment(v.time).valueOf() - moment(start).valueOf()
                }
                start = v.time

            })
            let result = Object.keys(obj).map(key => {
                return {
                    value: obj[key] / 1000,
                    name: key,
                }
            })
            let charts = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params, '>>>>>.')
                        let d = moment.duration(params.value, 'seconds')
                        return `${params.name}: ${d.hours()}小时${d.minutes()}分${d.seconds()}秒`
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: result
                    }
                ],
            }
            console.log(obj, 'pie')
            return charts
        },
        change(e) {
            this.timeStart = e[0] || moment().format('YYYY-MM-DD')