Using echarts charts in vue3 - preparation

We often use charts to represent data in projects, and the most commonly used icon at present is echarts. Next, we will start to learn to use echarts icons in Vue.

1. Prepare a vue project (generally built through vite, not vue-cli)

 1. Find and open the vite official website

2. Run the create command

yarn create vite

3. Execute yarn install to install project dependencies, and then execute yarn dev to run the project

2. Add echarts dependency

  1. Search echarts official website

 2. Add dependencies

yarn add echarts

3. Write a basic case of using echarts in 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>

There are still some problems: obtaining DOM nodes and usually requesting data are asynchronous, which will be explained in the next article.