oms/src/views/components/orderChannel.vue

<template>
    <div class="chart-box">
        <div class="title-top">
            <span>toC 订单渠道</span>
            <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
        </div>
        <div class="chart" :id="id"></div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

@Component
export default class Pie02 extends Vue {
    id = this.randomString();
    dateValue = new Date().getMonth() + 1
    options: Array<any> = [{
        label: '1月',
        value: 1
    }, {
        label: '2月',
        value: 2
    }, {
        label: '3月',
        value: 3
    }, {
        label: '4月',
        value: 4
    }, {
        label: '5月',
        value: 5
    }, {
        label: '6月',
        value: 6
    }, {
        label: '7月',
        value: 7
    }, {
        label: '8月',
        value: 8
    }, {
        label: '9月',
        value: 9
    }, {
        label: '10月',
        value: 10
    }, {
        label: '11月',
        value: 11
    }, {
        label: '12月',
        value: 12
    }]
    mounted() {
        this.getData()
    }

    randomString() {
        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = 10; i > 0; --i)
            result += str[Math.floor(Math.random() * str.length)];
        return result;
    }
    dateChange() {
        this.getData()
    }
    getData() {
        (this as any).$request({
            url: '/omsOrder/orderReport/orderChannel',
            method: 'GET',
            params: {
                month: this.dateValue
            }
        }).then((res: any) => {
            if (res.data) {
                this.initChart(res.data)
            }
        }).catch(() => { })
    }
    initChart(data: Array<any>) {
        let chartDom: any = document.getElementById(this.id);
        let myChart = echarts.init(chartDom);
        let option: EChartsOption;
        let _data: Array<any> = []
        for (const item of data) {
            _data.push({
                name: item.shopSite,
                value: item.total
            })
        }
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                show: true,
                bottom: 0,
                type: 'scroll',
                orient: 'horizontal',
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{b}:\n {d}' + '%',
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: _data
                }
            ]
        };

        option && myChart.setOption(option);
    }

}
</script>

<style lang="scss" scoped>
.chart-box {
    height: 100%;
    width: 100%;

    .title-top {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;

        >span {
            font-size: 16px;
            font-weight: 700;
        }

        .select {
            width: 100px;
            position: absolute;
            top: 6px;
            right: 0;
        }
    }
}

.chart {
    height: calc(100% - 40px);
    width: 100%;
}
</style>>