VUE3 ECharts5 快速上手（附详细步骤）

安装

pnpm install echarts

引入 ECharts

import * as echarts from 'echarts';

设置容器

1. 注意：虽然echarts可以在配置时设置宽高，但还是推荐在配置前直接为容器设置宽高

   <template>
     <div id="main" class="echart-style">
     </div>
   </template>
   <style scoped>
   .echart-style {
     width: 1000px;
     height: 900px;
     background: skyblue;
   }
   </style>
   

使用

1. 引入vue需要的方法

   import { onMounted, ref } from 'vue';
   

2. 声明响应式变量

   let myChart = ref()
   let option = ref({})

3. 等待组件加载完成后再初始化echarts组件（这里将初始操作封装再init方法中），防止echarts获取不到dom节点

   onMounted(() => {
     init()
   })

4. init内部实现过程

   1. 基于准备好的dom，初始化echarts实例

        myChart.value = echarts.init(document.getElementById('main'));
      

   2.  绘制图表

      option.value = {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      }
        myChart.value.setOption(option.value)
      }

全部代码

<template>
  <div id="main" class="echart-style">
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
let myChart = ref()
let option = ref({})
onMounted(() => {
  init()
})
const init = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById('main'));
  // 绘制图表
 option.value = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
}
  myChart.value.setOption(option.value)
}

</script>

<style scoped>
.echart-style {
  width: 1000px;
  height: 900px;
  background: skyblue;
}
</style>