vue3组件中使用Echarts小白教程_vue3 echarts官网-CSDN博客

本文指导如何在Vue3项目中下载并使用Echarts库，包括引入依赖、创建饼图实例、在HTML中添加图表元素以及在生命周期钩子中初始化图表。

1.打开Echarts官网，去寻找你需要的实例组件，应有尽有！

官网链接：https://echarts.apache.org/zh/index.html

2.在vue3项目中下载依赖库

yarn add echarts

3. 在你需要的组件中引入ECharts

import * as echarts from 'echarts';// 引入echarts

4. 官网找到你想要组件，并找到完整代码

5.在组件中HTML标签上添加id属性

<div id="main" class="statisticalData"></div>

6.将官网组件的数据复制下来，用响应式ref保存，并写echarts初始化函数

const option = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
        }
    ]
})

//echarts初始化
const initEcharts = () => {
    // 模型统计
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    myChart.setOption(option.value);
}

7.最后一步就是生命周期函数中，调用echarts初始化函数

import { ref, onMounted } from 'vue';


// 生命周期钩子函数
onMounted(() => {
    initEcharts()

})