Usando gráficos echarts em vue3 - preparação

Freqüentemente usamos gráficos para representar dados em projetos, e o ícone mais comumente usado atualmente são os echarts. A seguir, começaremos a aprender como usar os ícones dos echarts no Vue.

1. Prepare um projeto vue (geralmente construído através do vite, não do vue-cli)

 1. Encontre e abra o site oficial do vite

2. Execute o comando de criação

yarn create vite

3. Execute Yarn Install para instalar as dependências do projeto e, em seguida, execute Yarn Dev para executar o projeto

2. Adicionar dependência de echarts

  1. Pesquise no site oficial dos echarts

 2. Adicione dependências

yarn add echarts

3. Escreva um caso básico de uso de echarts em vue

<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>

Ainda existem alguns problemas: a obtenção de nós DOM e geralmente a solicitação de dados são assíncronas, o que será explicado no próximo artigo.