Vue3集成echarts

方式1

1）安装echarts依赖

npm install echarts

2）vue组件中使用echarts

<script setup lang="ts">
import { ref, onMounted} from 'vue'
import * as echarts from 'echarts'
const chartOptions = {
};
onMounted(()=>{
    const dom = document.getElementById("main")
    const myEchart = echarts.init(dom);
    myEchart.setOption(chartOptions)
});
</script>

<template>
员工职位统计
 <div id="main" style="width:500px; height:500px"></div>
</template>

方式2

1）安装echarts依赖

npm install echarts vue-echarts

2）main.ts注册ECharts

import ECharts from 'vue-echarts';
import 'echarts';
app.component('ECharts',ECharts)

3）vue组件中使用

import { ref, onMounted} from 'vue'
const chartOptions = ref({
});
onMounted(()=>{
    chartOptions.value = {后端接口返回的数据}
});

<template>
 <e-charts :option="chartOptions" style="width:600px; height:600px"/>
</template>