yos_web/src/HManagement/archives_ad/dataAnalysis/modules/adShareData.vue

<template>
    <div class="content">
        <header>分享数据</header>
        <div class="chart">
            <div class="box">
                <div class="title-box">
                    <div class="title">分享次数</div>
                    <el-radio-group v-model="tabPosition" style="margin-right:33px;" size="small">
                        <el-radio-button label="year">年</el-radio-button>
                        <el-radio-button label="month">月</el-radio-button>
                        <el-radio-button label="day">日</el-radio-button>
                    </el-radio-group>
                </div>
                <div id="container" style="width: calc(100% - 33px); height: 374px; margin-top: 40px;"></div>
            </div>
            <div class="box">
                <div class="title-box">
                    <div class="title">分享渠道</div>
                </div>
                <div id="pie" style="width: calc(100% - 33px); height: 374px; margin-top: 40px;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { Line, Pie } from '@antv/g2plot';
export default {
    name: "adShareData",
    data() {
        return {
            tabPosition: "year",
        }
    },
    mounted() {
        /* 折线图 */
        fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
            .then((res) => res.json())
            .then((data) => {
                const line = new Line('container', {
                    data,
                    padding: '0',
                    xField: 'Date',
                    yField: 'scales',
                    xAxis: {
                        // type: 'timeCat',
                        tickCount: 12,
                    },
                    yAxis: {
                        tickCount: 9,
                    }
                });
                line.render();
            });

        /* 饼状图 */
        const data = [
            { type: '分类一', value: 27 },
            { type: '分类二', value: 25 },
        ];

        const piePlot = new Pie('pie', {
            appendPadding: 10,
            data,
            angleField: 'value',
            colorField: 'type',
            radius: 0.75,
            legend: {
                position: 'leftTop'
            },
            label: {
                type: 'spider',
                labelHeight: 28,
                content: '{name}\n{percentage}',
            },
            interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        });

        piePlot.render();
    }
}
</script>

<style scoped>
@import url('./public.css');

.chart {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 22rpx;
    height: 450px;
}

.chart .box {
    flex: 1;
    height: 50px;
}
</style>