Echarts图表在Vue的基本展示

前言

本文主要介绍了：echarts图表是怎么在vue中展示的

步骤

step1: 首先，创建一个vue项目

vue create 项目名称

• 进入工程文件并运行：
  

step2：删除不需要的文件

创建的vue项目默认是vue官方提供的一个组件，我们在components文件夹中将2个.vue文件删除，并且在main.js文件中将对这2个.vue文件的引用代码删除

step3：下载echarts

• 下载：

npm install --save echarts

step4：使用echarts绘制图表

在App.vue文件中对echarts进行使用，主要分为2部分：包括为图表提供一个盒子，以及为图表初始化echarts实例并进行相关的配置

App.vue完整代码：

<template>
  <div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="chart" style="width: 100%;height:400px"></div>
  </div>
</template>

 <script setup>
  import {
    
     ref ,reactive,onMounted} from 'vue'
  import * as echarts from 'echarts'; 
  const chart = ref();
  let option = reactive({
    
    

    tooltip: {
    
    },

    legend: {
    
    

      data: ['销量']
    },
    xAxis: {
    
    
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
    
    },
    series: [
      {
    
    
      name: '销量',
      smooth: true,
      type: 'bar',
      data: [100,200,232,344,200,100]
      }
    ]
  });
  onMounted(() => {
    
    
    let myChart = echarts.init(chart.value);
    myChart.setOption(option);
  })

 </script>
 

step5：运行vue项目文件

• 在终端输入运行命令：

npm run serve

• 结果：