在Vue3项目中引入并使用Echarts图表的步骤指南

npm install echarts --save

yarn add echarts

<template>  
  <div ref="chart" style="width: 600px;height:400px;"></div>  
</template>  
  
<script>  
// 引入ECharts主模块  
import * as echarts from 'echarts';  
  
export default {  
  name: 'BarChart',  
  mounted() {  
    this.initChart();  
  },  
  methods: {  
    initChart() {  
      // 基于准备好的dom，初始化echarts实例  
      const myChart = echarts.init(this.$refs.chart);  
      // 指定图表的配置项和数据  
      const option = {  
        title: {  
          text: 'ECharts 入门示例'  
        },  
        tooltip: {},  
        legend: {  
          data:['销量']  
        },  
        xAxis: {  
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  
        },  
        yAxis: {},  
        series: [{  
          name: '销量',  
          type: 'bar',  
          data: [5, 20, 36, 10, 10, 20]  
        }]  
      };  
      // 使用刚指定的配置项和数据显示图表。  
      myChart.setOption(option);  
    }  
  }  
}  
</script>  
  
<style scoped>  
/* 样式可以根据需要自定义 */  
</style>

beforeUnmount() {  
  if (this.myChart) {  
    this.myChart.dispose();  
  }  
}