ads_web/src/components/echartsComponents/LineChart.vue

<template>
    <div>
        <el-row :gutter="5">
            <el-col :span="14">
                <el-card>
                    <div id="main" ref="line" style="height: 400px;"></div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card>
                    <div class="grid-content ep-bg-purple-light" style="background-color:#9b9da1; height: 400px;">占个位置</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

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

export default {
    props: ['chartData'],

    setup(props, context) {
        let lineChart = ref()
        let line  = ref()
        onMounted(() => {
            lineChart = echarts.init(document.getElementById('main'))
            updateChart()
            // updateChart()
            setTimeout(()=>{
                resizeChart()
            }, 0)

            window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
        })
        onBeforeUnmount(() => {
            window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
        })
        // 获取图像数据 lieChartData
        let lieChartData = props.chartData
        console.log('lieChartData', lieChartData)
        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: 70, right: 60, bottom: 30, left: 55,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: lieChartData.xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        // name: yTitle1,
                        splitLine: {
                            show: true // 设置显示分割线
                        },
                        axisLabel: {
                            formatter: '{value} 单位1'
                        }
                    },
                    {
                        type: 'value',
                        // name: yTitle2,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} 单位2'
                        }
                    }
                ],
                series: [
                    {
                        name: '数据1',
                        type: 'line',
                        symbolSize: 6,
                        symbol: 'circle',
                        smooth: true,
                        data: lieChartData.yData1,
                        yAxisIndex: 0,
                        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: lieChartData.yData2,
                        yAxisIndex: 1,
                        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()
            }
        }

        return {  }
    }
}

// let props = defineProps({
//     chartData: {
//         type: Object,
//         required: true,
//     },
// })
// let { title, xData, yData1, yData2 } = props.chartData  // 将需要传入的数据解构出来方便在option中调用


</script>

<style scoped lang="scss">

</style>