在Vue3中实现ECharts

1、首先在项目中安装ECharts

npm install echarts

2、在main.js中进行相关的注册

import { createApp } from 'vue';
import App from './App.vue';

// echarts
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts

3、在组件中使用
首先在组件中设置一个div有固定大小，展示区域即为这个区域

<template>
	<div id="ect" style="width: 100%;height: 300px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'

const option = {
        title: {
            text: '测试'
        },
        tooltip: {},//提示框
        legend: {
            data: ['人数']
        },
        xAxis: {
            data: ['vue', 'react', 'angular', 'jquery']
        },
        yAxis: {},
        series: [
            {
                name: '人数',
                type: 'bar',
                data: [200, 400, 150, 3000],
            }
        ]
    }

onMounted(() => {
    // charts
    var myChart = echarts.init(document.querySelector('#ect'));
    myChart.setOption(option)
})
</script>