vue3.0中使用echarts

最新推荐文章于 2024-08-08 00:23:29 发布

尕铪铪

最新推荐文章于 2024-08-08 00:23:29 发布

阅读量3.6k

点赞数 3

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_56438094/article/details/122976457

版权

前言

本文主要是讲述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 (re