ads_web/src/components/echartsComponents/PieBarChart.vue

<template>
    <div>
        <el-row :gutter="5">
            <el-col :span="8">
                <div>
                    <!--<span>{{ modelValue }}</span>-->
                    <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px"/>
                </div>

                <div ref="pie" style="height: 400px;"></div>
            </el-col>
            <el-col :span="16">
                <div style="margin-left: 40%">
                    <span style="background: rgb(176,234,232); width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
                    <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
                    <span style="background: rgb(234,207,135); width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
                    <TextSelector :modelValue="modelValue" :options="options" style="margin-top: 5px; margin-left: 8px;"/>
                </div>
                <div ref="bar" style="height: 400px;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import * as echarts from "echarts"
import TextSelector from '/@/components/TextSelector/index.vue'

let props = defineProps({
    pieBarChartData: {
        type: Object,
    }
})

let pieChart = ref()
let barChart = ref()
const pie = ref()
const bar = ref()

onMounted(() => {
    barChart = echarts.init(bar.value)
    pieChart = echarts.init(pie.value)
    setChartData()
    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
    setTimeout(() => {
        resizeChart()
    }, 0)
})

function setChartData() {
    // 柱状图配置
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        // legend: {data: ['数据1', '数据2'],},
        toolbox: {
            feature: {
                saveAsImage: { yAxisIndex: 'none' }
            }
        },
        grid: {
            top: 70, right: 60, bottom: 30, left: 55,

        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: ['商品', '品类', '关键词-精准', '关键词-广泛', '关键词-词组'],
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数据1',
                axisLabel: {
                    formatter: '{value} 单位1'
                },
                axisLine: {
                    show: true
                }
            },
            {
                type: 'value',
                name: '数据2',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} 单位2'
                },
                axisLine: {
                    show: true
                }
            }
        ],
        series: [
            {
                name: '数据1',
                type: 'bar',
                // tooltip: {
                //   valueFormatter: function (value) {
                //     return value + ' ml';
                //   }
                // },
                barWidth: '30%',
                data: props.pieBarChartData.barData[0],
                yAxisIndex: 0,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
                        { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
                    ]),
                    // 柱状图圆角
                    borderRadius: [15, 15, 0, 0],
                },
            },
            {
                name: '数据2',
                type: 'bar',
                barWidth: '30%',
                data: props.pieBarChartData.barData[1],
                yAxisIndex: 1,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#ebb14d' },
                        { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
                    ]),
                    // 柱状图圆角
                    borderRadius: [15, 15, 0, 0],
                },
            },
        ],
    }
    barChart.setOption(option)
    // 饼图配置
    const option2 = {
        tooltip: {
            trigger: 'item',
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['25%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderWidth: 1, // 设置边框的宽度
                    borderColor: '#fff', // 将边框颜色设置为白色或图表背景颜色
                },
                emphasis: {
                    label: {
                        show: true,
                        // fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        // formatter: '{b}: {c} ({d}%)' // b为数据名，c为数据值，d为百分比
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: props.pieBarChartData.pieData
            }
        ]
    }
    pieChart.setOption(option2)
    resizeChart()
}

function resizeChart() {
    barChart.resize()
    pieChart.resize()
}

defineExpose({ resizeChart })

// 下拉框相关
const options = [
    {
        value: '花费',
        label: '花费',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    }
]
const modelValue = ref(options[0].value)

</script>

<style scoped>

</style>