vue3.0中使用echarts

前言

本文主要是讲述vue3.0中应用echarts步骤。主要涉及到vue3.0中vue对象的很多新API或对象的使用。而且网上给出的方法比较繁乱，要么是没有做成公共引用方法，仅在要使用的组件中单独引入，要么是按示例代码实现不生效等。现根据停车业务前端代码的实现，做了个笔记，供大家参考和使用。

1.安装echarts

npm install echarts --save

2.main.js引入进行挂载配置

import * as echarts from 'echarts'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts

3.组件中使用

<template>
    <div ref="chart" id="chart"></div>
</template>
​
<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
​
export default {
    setup () {
        const data = reactive({
            options: {...} // echarts的options设置
        })
        // 图表初始化
        const { proxy } = getCurrentInstance() // proxy是组件实例化对象
        const initChart = async () => {
            const res = await getData({...})
            if (res.success) {
                // 根据请求到的数据，赋值到options
                data.options.series[0].data.value = res.data
            }
            // 渲染图表
            const chart = proxy.$echarts.init(document.getElementById('chart'))
            chart.setOption(data.options)
            window.onresize = () => {
                chart.resize()
            }
        }
        // 执行初始化数据函数
        initChart()
        return {
            ...toRefs(data)
        }
    }
}
</script>

​