Usando gráficos echarts en vue3 - preparación

A menudo usamos gráficos para representar datos en proyectos, y el ícono más utilizado en la actualidad es echarts. A continuación, comenzaremos a aprender a usar los íconos echarts en Vue.

1. Prepare un proyecto vue (generalmente creado a través de vite, no de vue-cli)

 1. Busque y abra el sitio web oficial de Vite.

2. Ejecute el comando crear

yarn create vite

3. Ejecute Yarn Install para instalar las dependencias del proyecto y luego ejecute Yarn Dev para ejecutar el proyecto.

2. Agregar dependencia de echarts

  1. Buscar en el sitio web oficial de echarts

 2. Agregar dependencias

yarn add echarts

3. Escribe un caso básico del uso de echarts en 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>

Todavía hay algunos problemas: la obtención de nodos DOM y la solicitud de datos generalmente son asincrónicas, lo que se explicará en el próximo artículo.