Vue3+TS 添加多个echarts

<template>

    <div class="row q-pa-sm">

        <div style="margin-top:90px;margin-left:150px;">

            <div ref="chart1" style="height: 400px;width:500px;display: inline-block;"></div>

            <div ref="chart2" style="height: 400px;width:500px;display: inline-block;"></div>

        </div>

    </div>

</template>

<script lang="ts" setup>

import * as echarts from 'echarts';

import { ref,onMounted} from 'vue';

 

const chart1 = ref();

const chart2 = ref();

let myChart: echarts.ECharts;

let myChart2: echarts.ECharts;

onMounted(() => {

    myChart = echarts.init(chart1.value);

    myChart.setOption(getChartSetOption());

    myChart2 = echarts.init(chart2.value);

    myChart2.setOption(getChartSetOption2());

    window.addEventListener('resize', resizeHandler);

});

const resizeHandler = () => {

            if (myChart) {

                myChart.resize()

            }

            if (myChart2) {

                myChart2.resize()

            }

        }

 

function getChartSetOption(){

    type EChartsOption = echarts.EChartsOption;

    var option: EChartsOption;

    option = {

        xAxis: {

            type: 'category',

            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

        },

        yAxis: {

            type: 'value'

        },

        series: [

            {

            data: [120, 200, 150, 80, 70, 110, 130],

            type: 'bar',

            showBackground: true,

            backgroundStyle: {

                color: 'rgba(180, 180, 180, 0.2)'

            }

            }

        ]

    };

    return option;

}

function getChartSetOption2(){

    type EChartsOption = echarts.EChartsOption;

    var option: EChartsOption;

    option = {

    legend: {

        top: 'bottom'

    },

    toolbox: {

        show: true,

        feature: {

        mark: { show: true },

        dataView: { show: true, readOnly: false },

        restore: { show: true },

        saveAsImage: { show: true }

        }

    },

    series: [

        {

        name: 'Nightingale Chart',

        type: 'pie',

        radius: [50, 150],

        center: ['50%', '50%'],

        roseType: 'area',

        itemStyle: {

            borderRadius: 8

        },

        data: [

            { value: 40, name: 'rose 1' },

            { value: 38, name: 'rose 2' },

            { value: 32, name: 'rose 3' },

            { value: 30, name: 'rose 4' },

            { value: 28, name: 'rose 5' },

            { value: 26, name: 'rose 6' },

            { value: 22, name: 'rose 7' },

            { value: 18, name: 'rose 8' }

        ]

        }

    ]

    };

    return option;

}

 

</script>

<style></style>