ads_web/src/components/echartsComponents/BarLineChart.vue

<template>
    <div ref="barLine" style="height: 400px;"></div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    barLineData: {type: Object}
})
let lineChart = ref()
const barLine = ref()

onMounted(() => {
    lineChart = echarts.init(barLine.value)
    updateChart()
    addResize()  // 监听窗口大小变化，调整图表大小
    setTimeout(() => {
        resizeChart()
    }, 0)
})
onBeforeUnmount(() => {
    if (lineChart) {
        lineChart.dispose()
        lineChart = null
    }
    removeResize()   // 在组件销毁前移除事件监听，避免内存泄漏
})
// 获取图像数据 lieChartData
let chartData = props.barLineData

function updateChart() {
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
        // toolbox: {
        //     feature: {
        //         saveAsImage: { yAxisIndex: 'none' }
        //     }
        // },
        grid: {
            top: 50, right: 150, bottom: 30, left: 55,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: chartData.xData,
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'ACOS',
                splitLine: {
                    show: true // 设置显示分割线
                },
                axisLabel: {
                    formatter: '{value} 单位1'
                },
                axisLine: {
                    show: true
                }
            },
            {
                type: 'value',
                name: '点击率',
                position: 'right',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} 单位2'
                },
                axisLine: {
                    show: true
                }
            },
            {
                type: 'value',
                position: 'right',
                offset: 80,
                name: '订单数',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} 单位3'
                },
                axisLine: {
                    show: true
                }
            }
        ],
        series: [
            {
                name: '柱状图',
                type: 'bar',
                // tooltip: {
                //   valueFormatter: function (value) {
                //     return value + ' ml';
                //   }
                // },
                barWidth: '30%',
                data: chartData.barData,
                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: '数据1',
                type: 'line',
                symbolSize: 6,
                symbol: 'circle',
                smooth: true,
                data: chartData.yData1,
                yAxisIndex: 1,
                lineStyle: {color: '#fe9a8b'},
                itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#fe9a8bb3'},
                        {offset: 1, color: '#fe9a8b03'},
                    ]),
                },
            },
            {
                name: '数据2',
                type: 'line',
                symbolSize: 6,
                symbol: 'circle',
                smooth: true,
                data: chartData.yData2,
                yAxisIndex: 2,
                lineStyle: {color: '#9E87FF'},
                itemStyle: {color: '#9E87FF', borderColor: '#9E87FF'},
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#9E87FFb3'},
                        {offset: 1, color: '#9E87FF03'},
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [
                                {offset: 0, color: '#9E87FF'},
                                {offset: 0.4, color: '#9E87FF'},
                                {offset: 0.5, color: '#fff'},
                                {offset: 0.7, color: '#fff'},
                                {offset: 0.8, color: '#fff'},
                                {offset: 1, color: '#fff'},
                            ],
                        },
                        borderColor: '#9E87FF',
                        borderWidth: 2,
                    },
                },
            },
        ],
    }
    lineChart.setOption(option)
}

// 自适应调整窗口
function resizeChart() {
    if (lineChart) {
        lineChart.resize()
    }
}

function addResize() {
    window.addEventListener('resize', resizeChart)
}

function removeResize() {
    window.removeEventListener('resize', resizeChart)
}

defineExpose({resizeChart, updateChart})

</script>

<style>
</style>