【Vue3】ECharts图表案例-EW帮帮网

1、创建工程

npm create vite@latest

或

npm init vue@latest

设置如下

2、下载依赖集运行项目

cd vue-echarts-demo
npm install
npm install echarts
npm run dev

3、编写核心代码

创建src\components\BarView.vue文件，内容如下：

<template>
  <!-- 图表容器：设置宽度和高度 -->
  <div ref="chartRef" style="width: 1000px; height: 400px;"></div>
</template>
 
<script setup>
// 引入 Vue 的 Composition API
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 引入 echarts 库
import * as echarts from 'echarts'
 
// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = null
 
// 初始化图表的方法
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value)
 
    // 配置项
    const option = {
      title: {
        text: 'Vue3柱状图示例' // 图表标题
      },
      tooltip: {}, // 默认提示框配置
      legend: {
        data: ['销量'] // 图例名称
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据
      },
      yAxis: {}, // Y 轴默认配置
      series: [
        {
          name: '销量', // 系列名称
          type: 'bar', // 图表类型为柱状图
          data: [5, 20, 36, 10, 10, 20] // 数据值
        }
      ]
    }
 
    // 使用配置项渲染图表
    chartInstance.setOption(option)
  }
}
 
// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize()
}
 
// 组件挂载后执行初始化
onMounted(() => {
  initChart()
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener('resize', resizeChart)
})
 
// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance?.dispose() // 销毁 echarts 实例
})
</script>

编写src\components\PieView.vue代码

<template>
  <!-- 图表容器：设置宽度和高度 -->
  <div ref="chartRef" style="width: 1000px; height: 400px;"></div>
</template>
 
<script setup>
// 引入 Vue 的 Composition API
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 引入 echarts 库
import * as echarts from 'echarts'
 
// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = null
 
// 初始化图表的方法
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value)
 
    // 配置项
var option;

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
 
    // 使用配置项渲染图表
    chartInstance.setOption(option)
  }
}
 
// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize()
}
 
// 组件挂载后执行初始化
onMounted(() => {
  initChart()
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener('resize', resizeChart)
})
 
// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance?.dispose() // 销毁 echarts 实例
})
</script>

4、修改App代码

src\App.vue内容修改如下

<script setup>
import BarView from './components/BarView.vue';
import PieView from './components/PieView.vue';
</script>

<template>

  <BarView />
  <PieView></PieView>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>