echerts+vue3弹窗封装

啊～哈

于 2024-08-21 01:02:22 发布

阅读量95

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_49014420/article/details/141371608

版权

<template>
<!-- 中部弹窗 -->
    <el-dialog v-model="visible" width="980" class="red">
        <chart-card2>
            <div  class="cart">{{data.name}}</div>
            <!-- <chart-select2 :options="typeOptions" v-model="type" style="width: 100%" /> -->
            <!-- 热力图 -->
            <div v-if="data.data=='line'" class="item">
                <chart-select2 :options="data.type" v-model="type" style="width: 100%" />
                <div style="height:90%;width:100%" >
                    <v-chart :options="chartOptions" autoresize ref=vChartRef5 :manual-update="false" />
                    <!-- <v-chart v-if="chartOptions2" :options="chartOptions2" autoresize ref=vChartRef5 :manual-update="false" /> -->
                </div>
            </div>
        <!-- 表格 -->
            <div v-if="data.data=='table'" class="item">
                <chart-select2 :options="data.type" v-model="type2" style="width: 100%" />
                <!-- {{result}} -->
                <div v-if="result" class="operating-right2">
                    
                    <ul class="operating-right2-row">
                        <li class="operating-right2-row-item" style="width: 120px;"></li>
                        <li class="operating-right2-row-item" style="flex: 1;">流量（m3/h）</li>
                        <li class="operating-right2-row-item" style="flex: 1;">时间（h）</li>
                        <li class="operating-right2-row-item" style="flex: 1;">台数（个）</li>
                    </ul>
                    <ul class="operating-right2-row"  style="border: none;" >
                        <li class="operating-right2-row-item" style="width: 120px;color:#fff">低谷</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.lowFlow }}</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.lowTime }}</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.lowNum }}</li>
                    </ul>
                    <ul class="operating-right2-row" style="border: none;">
                        <li class="operating-right2-row-item" style="width: 120px;color:#fff">平时</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.flatFlow }}</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.flatTime }}</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.flatNum }}</li>
                    </ul>
                    <ul class="operating-right2-row" style="border: none;">
                        <li class="operating-right2-row-item" style="width: 120px;color:#fff">高峰</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.highFlow}}</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.highTime }}</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ result.highNum }}</li>
                    </ul>
                    <ul class="operating-right2-row" style="border: none;">
                        <li class="operating-right2-row-item" style="width: 120px;color:#fff">经济成本（元）</li>
                        <li class="operating-right2-row-item" style="flex: 1;border-top: 1px solid #333">{{ result.cost }}元</li>
                    </ul>
                    <ul class="operating-right2-row" style="border-top: none;">
                        <li class="operating-right2-row-item" style="width: 120px;color:#fff">设备利用率</li>
                        <li class="operating-right2-row-item" style="flex: 1;">{{ parseInt(result.ur*100) }}%</li>
                    </ul>
                </div>
            </div>
            <div class="botton-item">
                <img @click="handleCancel" src="@/assets/img2/suoxiao.png" alt="">
                <span @click="handleCancel">返回查看大屏</span>
            </div>
            <!-- <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleCancel">
                        取消
                    </el-button>
                </div>
            </template> -->
        </chart-card2>
    </el-dialog> 

</template>

<script lang="ts">
    import {defineComponent, ref,watch } from 'vue'
    import {OperatingLeft1,OperatingLeft2,OperatingRight1,OperatingRight2,OperatingRight3} from "@/utils/http-serve/operationSide.ts"
    import VChart from 'vue-echarts';
    import ChartSelect2 from "@/components/ChartSelect2.vue";
    import { EChartsOption } from 'echarts';
    import {graphic } from 'echarts/core';
    export default defineComponent({
        components: {
            VChart,
            ChartSelect2,
        },
        setup(){
            const formLabelWidth = '140px'
            const data=ref({})
            const vChartRef5 = ref();
            const type = ref<string>("1");
            const type2 = ref<string>("方案 1");
            const chartOptions = ref<EChartsOption>(); 
            // const chartOptions2 = ref<EChartsOption>(); 
            const result=ref()
            const colorSeries = ref(['217,110,0','108,240,27','0,204,228','34, 91, 167','27, 240, 163','255, 233, 162','33, 125, 166','34, 92, 167','31, 160, 166','252, 9, 96','217, 110, 0','141, 39, 243','108, 240, 27','0, 204, 228','254, 207, 67','100, 110, 0','200, 110, 0'])

            let visible = ref(false)
            // 打开弹窗 -- 可通过接收参数data来展示父组件的数据
            const openDialog = (list:any) => {
                if(!list.data) return false
                visible.value = true
                if (list) {
                    data.value={...list}
                    // console.log(list.option);
                    
                    chartOptions.value = list.option
                } 
            }
            // 关闭
            const handleCancel = () => {
                visible.value = false
            }

            watch(() => [data.value.name,type.value,type2.value], async() => {
                // let resList=data.value.option
                
                if (vChartRef5.value || chartOptions.value) {
                    // console.log(chartOptions.value);
                    
                    if(data.value.name=='接卸利用率'){
                        const {data} =await OperatingLeft1({type:type.value})
                        chartOptions.value.xAxis.data = data.xaxis
                        chartOptions.value.yAxis.data=data.yaxis
                        const series:string[] = []
                        let pdata =ref ([]);
                        // if(data.xaxis.length==data.yaxis.length){
                            chartOptions.value.yAxis.data.forEach((item, index) => {
                                series.push(data.series[index].data);
                            });
                            chartOptions.value.yAxis.data.forEach((item, index) => {
                            chartOptions.value.yAxis.data.forEach((item2, index2) => {
                                    pdata.value.push([index2, index, series[index][index2]]);
                                })
                            });
                        chartOptions.value.series.data=pdata.value
                    }
                    if(data.value.name=='外输利用率'){
                        const {data} =await OperatingLeft2({type:type.value})
         
                            chartOptions.value.xAxis.data = data.xaxis
                            chartOptions.value.yAxis.data=data.series.map((i)=>i.name)
                            const series:string[] = []
                            let pdata =ref ([]);
                            // if(data.xaxis.length==data.yaxis.length){
                                chartOptions.value.yAxis.data.forEach((item, index) => {
                                    series.push(data.series[index].data);
                                });
                                chartOptions.value.yAxis.data.forEach((item, index) => {
                                    chartOptions.value.yAxis.data.forEach((item2, index2) => {
                                        pdata.value.push([index2, index, series[index][index2]]);
                                    })
                                });
                            chartOptions.value.series.data=pdata.value
                    }
                    if(data.value.name=='储存利用率'){
                        const {data} =await OperatingRight1({type:type.value})
  
                        chartOptions.value.xAxis.data = data.xaxis
                        chartOptions.value.yAxis.data=data.series.map((i)=>i.name)
                        const series:string[] = []
                        let pdata =ref ([]);
                        // if(data.xaxis.length==data.yaxis.length){
                            chartOptions.value.yAxis.data.forEach((item, index) => {
                                series.push(data.series[index].data);
                            });
                            chartOptions.value.yAxis.data.forEach((item, index) => {
                            chartOptions.value.xAxis.data.forEach((item2, index2) => {
                                    pdata.value.push([index2, index, series[index][index2]]);
                                })
                            });
                        chartOptions.value.series.data=pdata.value
                    }
                    if(data.value.name=='设备运行成本优化'){
                        const {data} =await OperatingRight3({name:type2.value})
                        result.value=data
                        // console.log(result.value);
                        
                        return false
                    }
                    // if(chartOptions.value){
                        setTimeout(()=>{
                            console.log(chartOptions.value.series);
                            
                            vChartRef5.value.clear()
                            vChartRef5.value.setOption(chartOptions.value, true); 
                        },1000) 
                    // }else if(chartOptions2.value){
                    //     setTimeout(()=>{
                    //         vChartRef5.value.setOption(chartOptions2.value, true); 
                    //     },1000) 
                    // }
                    
                     
                }  
                }, {  
                deep: true,},
                // ()=>type.value,async()=>{
                //     console.log(222);
                    
                // }
                );  

            return {
                formLabelWidth,
                openDialog,
                visible,
                handleCancel,
                data,
                vChartRef5,
                type,
                type2,
                result
            }
            
        }
        
    })
</script>

<style lang="less">
.red{
    background-color: rgba(0, 8, 18,0.8);
    // height: 560px;
    border: 2px solid rgba(0, 204, 228,0.3);
    position: relative;
}
.item{
    width: 100%;
    height: 100%;
}
.chart{
    // height: 100px;
    // width: 200px;
    // background-color: aquamarine;
}
.cart{
    position: absolute;
    top: 43px;
    left: 78px;
    color: #fff;
    font-weight: bold;
}
.botton-item{
    position: absolute;
    bottom: -50px;
    right: 20px;
    text-align: right;
    // background-color: rgb(170, 23, 33);
    color: #ccc;
    height: 80px;
    display: inline-block;
    margin-top: 30px;
    span{
        position: relative;
        top: -5px;
        margin-left: 5px;
        cursor: pointer;
    }
}
</style>

这是子组件代码，父组件代码如下

<template>
    <chart-card2 title="储存利用率">
        <chart-select2 :options="typeOptions" v-model="type" style="width: 100%" />
        <v-chart v-if="type==2||type==3" autoresize ref="vChartRef" :manual-update="false" />
        <v-chart v-else autoresize ref="vChartRef" :manual-update="false" />
        <div class="img-pop">
            <img src="@/assets/img2/fangda.png" @click="popShowList">
        </div>
        <!-- 弹窗引入 -->
        <operating-pop :popShow="popShow" ref="demoDialogRef2"></operating-pop>
    </chart-card2>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
// Other
import ChartCard2 from "@/components/ChartCard2.vue";
import ChartSelect2 from "@/components/ChartSelect2.vue";
// import { request } from "@/utils/http"
import {OperatingRight1} from "@/utils/http-serve/operationSide.ts"
import OperatingPop from './OperatingPop.vue'
// EChart
import { graphic,use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import VChart from 'vue-echarts';
import DefaultLayout from "@/layout/default-layout.vue";
// import NavTab from "@/components/NavTab.vue";

use([
    CanvasRenderer,
    LineChart,
    BarChart,
    GridComponent,
    TooltipComponent,
]);
export default defineComponent({
    name: "OperatingRight1",
    components: {
        ChartSelect2,
        DefaultLayout,
        // NavTab,
        ChartCard2,
        VChart,
        OperatingPop
    },
    props:{
        isReady:{
            type: Boolean,
            default:false,
        }
    },
    setup(props) {
        const vChartRef = ref()

        const type = ref<string>("1");
        const typeOptions = [
            {
                label: "储罐利用率",
                value: "1"
            },
            {
                label: "Spearman相关性",
                value: "2"
            },
            {
                label: "灰色关联分析",
                value: "3"
            },
            {
                label: "储罐周转能力",
                value: "4"
            }
        ];

        const option2 = {
            color: ['#00CCE4'],
            tooltip: {
                trigger: 'axis',
                className: "app-chart-tooltip",
            },
            grid: {
                top: '3%',
                left: '5%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [] as string[],
                axisLine: {
                    lineStyle: {
                        type: 'dashed', // 设置轴线为虚线
                        color: '1F3D68' // 设置虚线颜色
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed', // 设置网格线为虚线
                        color: '#1F3D68' // 设置虚线颜色
                    }
                },
                axisLabel: {
                    fontSize: 10, // 设置文字大小
                    color: '#fff' // 设置文字颜色
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed', // 设置网格线为虚线
                        color: '#1F3D68' // 设置虚线颜色
                    }
                },
                axisLabel: {
                    fontSize: 9, // 设置文字大小
                    color: '#fff' // 设置文字颜色
                }
            },
            series:[]
            // series: {
            //     name: "利用率",
            //     type: 'line',
            //     areaStyle: {
            //         opacity: 0.8,
            //         color: new graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 0,
            //                 color: 'rgba(0, 204, 228,0.06)'
            //             },
            //             {
            //                 offset: 1,
            //                 color: 'rgba(0, 204, 228, 0.4)'
            //             }
            //         ])
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [] as string[]
            // }
        }

        const option = {
            // tooltip: {
            //     position: 'top'
            // },
            grid: {
                height: '80%',
                top: '3%',
                left: '85px',
                right:'0%'
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    interval: 'auto',
                    rotate: 30,
                    margin: 14,
                    color: '#99d7ff',
                },
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    margin: 14,
                    color: '#99d7ff',
                },
            },
            visualMap: {
                show:false,
                min: -1,
                max: 1,
                inRange: {  
                    color: ['rgba(33, 89, 235, 1)','rgba(228, 182, 18, 1)', 'rgba(51, 175, 21, 1)','rgba(140, 236, 207, 1)','rgba(33, 89, 235, 1)'] 
                }
            },
            tooltip: {
                formatter: function (val) {
                    return `${val.name}-${dataLabels2.value[val.data[1]]}：${val.data[2]}`
                    
                    // return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    //     this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
                }
            },
            series: {
                    name: 'Punch Card',
                    type: 'heatmap',
                    data: [],
                    label: {
                        show: true,
                        formatter:function(val){
                        if(val.data[2]>0.4&&val.data[2]<0.6){
                            return `\n${val.data[2]}\n${'*'}`
                        }
                        if(val.data[2]>0.6&&val.data[2]<0.8){
                            return `\n${val.data[2]}\n${'**'}`
                        }
                        if(val.data[2]>0.8&&val.data[2]<1){
                            return `\n${val.data[2]}\n${'***'}`
                        }
                        
                        }
                    },
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#fff',
                    },
                }
            };

        const colorSeries = ref(['217,110,0','108,240,27','0,204,228','34, 91, 167','27, 240, 163','255, 233, 162','33, 125, 166','34, 92, 167','31, 160, 166','252, 9, 96','217, 110, 0','141, 39, 243','108, 240, 27','0, 204, 228','254, 207, 67','100, 110, 0','200, 110, 0'])
        const dataLabels2 =ref()
        const remoteData = async () => {
            // @ts-ignore

            // const { data } = await request("/api/singleBerth/api/v/throughput");
            const {data} =await OperatingRight1({type:type.value})
            // console.log(data);
            

            if(type.value==2||type.value==3){
                option.xAxis.data = data.xaxis
                option.yAxis.data=data.series.map((i)=>i.name)
                dataLabels2.value=data.series.map((i)=>i.name)
                const series:string[] = []
                let pdata =ref ([]);
                // if(data.xaxis.length==data.yaxis.length){
                    option.yAxis.data.forEach((item, index) => {
                        series.push(data.series[index].data);
                    });
                    option.yAxis.data.forEach((item, index) => {
                    option.xAxis.data.forEach((item2, index2) => {
                            pdata.value.push([index2, index, series[index][index2]]);
                        })
                    });
                option.series.data=pdata.value

                vChartRef.value.clear()
                vChartRef.value.setOption(option)
            }else{
                const series:any = []
                data.series.forEach((item: any,i:any) => {
                    series.push({
                        name: item.name,
                        type: 'line',
                        stack: 'total',
                        areaStyle: {
                            opacity: 0.8,
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: `rgba(${colorSeries.value[i]},0.06)`
                                },
                                {
                                    offset: 1,
                                    color: `rgba(${colorSeries.value[i]},0.04)`
                                }
                            ])
                        },
                        data: item.data
                    })
                });
                option2.xAxis.data = data.xaxis
                option2.series = series
                vChartRef.value.clear()
                vChartRef.value.setOption(option2)
            }
            
        }

        const demoDialogRef2 = ref()
        const popShow=ref(false)
        // 弹窗
        const popShowList=()=>{
            demoDialogRef2.value.openDialog({name:'储存利用率',option:option,type:typeOptions,data:'line'})
        }

        remoteData()

        watch(() => [type.value,props.isReady], remoteData)

        return {
            vChartRef,
            type,
            typeOptions,
            popShowList,
            demoDialogRef2,
            popShow,
        }
    }
})

</script>