vue3 中使用 echarts 图表——准备篇

@穷且益坚，不坠青云之志

已于 2023-10-06 10:41:47 修改

阅读量956

点赞数 1

分类专栏： vue3中使用echarts图表文章标签： echarts vue.js javascript

于 2023-10-06 10:41:11 首次发布

本文链接：https://blog.youkuaiyun.com/tengyuxin/article/details/133606180

版权

vue3中使用echarts图表专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成并使用Echarts图表，包括创建Vue项目、添加Echarts依赖，以及在模板中实现基本的柱状图示例。后续将探讨DOM操作和异步数据加载问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们常常在项目中使用图表来表示数据，而目前最常用的图标就是echarts，接下来我们就开始学习在vue中使用echarts图标。

一、准备一个vue项目（一般通过vite来构建，而不是vue-cli）

1.找到打开vite官网

2. 运行创建命令

yarn create vite

3. 执行yarn install安装项目依赖，之后执行行yarn dev运行项目

二、添加echarts依赖

1. 搜索echarts官网

2. 添加依赖

yarn add echarts

三、写一个在vue中使用echarts的基本案例

<template>
  <div id="main"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
onMounted(()=>{
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
        }
    ]
    };
    option && myChart.setOption(option);
});


</script>

<style scoped>
#main {
  width: 50vw;
  height: 50vh;
}
</style>

目前还存在一些问题：获取DOM节点、通常请求数据是异步的，下一篇重点讲解