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

骑猪看日落 2024-04-22 15:19 87阅读 0赞

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

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

### 1.找到打开vite官网   ![3f4c0081b8014b4d84337222027f2e35.png][] ###

### 2. 运行创建命令 ###

yarn create vite

![985e552a9e074fd3b81052649dc90e6d.png][]

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

![45d782e387bb43599b0b8f7b6100b282.png][]

## 二、添加echarts依赖 ##

### 1. 搜索echarts官网   ![5a80ebdaad154caebb3f38f216f125d4.png][] ###

### 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节点、通常请求数据是异步的，下一篇重点讲解

[3f4c0081b8014b4d84337222027f2e35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4eac9ec481ab47a897649ccc4b72301e.png
[985e552a9e074fd3b81052649dc90e6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3a8552c38f014df6a7963586a9fe494d.png
[45d782e387bb43599b0b8f7b6100b282.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c5fc23e663034fbab593caf7aefd6cac.png
[5a80ebdaad154caebb3f38f216f125d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1053dd8c63bb46738d6239f56e6e3541.png