jonhon-mes-web/src/views/wel/components/orderDetail.vue

<template>
    <div class="order_box">
        <div class="title_bar">车间订单</div>
        <div class="pie_box">
            <div class="pie_box_item" >
                <div class="btn_box">
                    <span class="btn first" :class="activeIndex == 1 ? 'active' : ''" @click="changeChart(1)">热表</span>
                    <span class="btn second" :class="activeIndex == 2 ? 'active' : ''" @click="changeChart(2)">烧结</span>
                </div>
                <div ref="rb_chart" v-show="activeIndex == 1" class="chart_box"></div>
                <div ref="sj_chart" v-show="activeIndex == 2" class="chart_box"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex:1
        }
    },
    mounted() {
        this.$nextTick(() =>{
            this.initRbEcharts()
        })
    },
    methods: {
        changeChart(type){
            this.activeIndex = type
            this.$nextTick(() =>{
                if(type == 1){
                    this.initRbEcharts()
                }else{
                    this.initSjEcharts()
                }
            })
            
        },
        initRbEcharts() {
            var myChart = this.$echarts.init(this.$refs.rb_chart);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} <br/> 占比：{d}%'
                },
                legend: {
                    // top: '-2%',
                    left: '15%',
                    top:'center',
                    orient: "vertical"
                },
                series: [
                    {
                        top: '10%',
                        type: 'pie',
                        radius: ['65%', '95%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 5
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        // data: this.problemArr
                        data:[
                            { value: 8, name: '在制品',itemStyle: {color:'#3B82F6'}},
                            { value: 2, name: '加工中',itemStyle: {color:'#E6A23C'} },
                            { value: 2, name: '检验中',itemStyle: {color:'#EF4444'} },
                            { value: 2, name: '已完成',itemStyle: {color:'#22C55E'} },
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        },
        initSjEcharts() {
            var myChart = this.$echarts.init(this.$refs.sj_chart);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} <br/> 占比：{d}%'
                },
                legend: {
                    // top: '-2%',
                    left: '15%',
                    top:'center',
                    orient: "vertical"
                },
                series: [
                    {
                        top: '10%',
                        type: 'pie',
                        radius: ['65%', '95%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 5
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        // data: this.problemArr
                        data:[
                            { value: 20, name: '在制品',itemStyle: {color:'#3B82F6'}},
                            { value: 28, name: '未齐套',itemStyle: {color:'#ff7a45'}},
                            { value: 14, name: '已齐套', itemStyle: {color:'#20c5f6'}},
                            { value: 42, name: '加工中',itemStyle: {color:'#E6A23C'} },
                            { value: 13, name: '检验中',itemStyle: {color:'#EF4444'} },
                            { value: 25, name: '已完成',itemStyle: {color:'#22C55E'} },
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped>
.order_box {
    padding: 20px;

    .title_bar {
        font-weight: 550;
    }

    .pie_box {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: space-between;

        .pie_box_item {
            width: 100%;
            height: 100%;
            padding: 10px;

            .btn_box{
                width: 100%;
                display: flex;
                justify-content: flex-end;

                .btn{
                    padding: 5px 15px;
                    border: 1px solid #eee;
                    cursor: pointer;
                    font-size: 14px;

                    &.first{
                        border-top-left-radius: 6px;
                        border-bottom-left-radius: 6px;
                        border-right: none;
                    }

                    &.second{
                        border-top-right-radius: 6px;
                        border-bottom-right-radius: 6px;
                    }


                    &.active{
                        color: rgb(64, 158, 255);
                    }
                }
            }

            .title{
                font-weight: 500;
            }

            .chart_box{
                width: 100%;
                height: 210px;
                margin-top: 10px;
            }
        }
    }
}
</style>