ECharts 图表

基于 ECharts 封装的 Vue3 图表组件，支持柱状图、折线图、饼图等。在线演示

基础用法

<template>
  <ECharts :options="chartOptions" height="400px" />
</template>

<script setup lang="ts">
const chartOptions = ref({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  yAxis: { type: 'value' },
  series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
})
</script>

柱状图

<script setup lang="ts">
const barOptions = ref({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月'] },
  yAxis: { type: 'value' },
  series: [{ name: '销售额', type: 'bar', data: [120, 200, 150, 80, 70, 110] }]
})
</script>

饼图

<script setup lang="ts">
const pieOptions = ref({
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ]
  }]
})
</script>

折线图

<script setup lang="ts">
const lineOptions = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['访问量', '订单量'] },
  xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
  yAxis: { type: 'value' },
  series: [
    { name: '访问量', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] },
    { name: '订单量', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] }
  ]
})
</script>

Props

参数	说明	类型	默认值
options	ECharts 配置项	EChartsCoreOption	—
width	图表宽度	string	'100%'
height	图表高度	string	'400px'

扩展图表类型

默认只注册了 BarChart、LineChart、PieChart，其他类型需手动注册：

// src/components/ECharts/index.vue
import { RadarChart, ScatterChart } from "echarts/charts";

echarts.use([
  RadarChart,
  ScatterChart,
]);

动态更新数据

直接修改 options，图表会自动更新：

<script setup lang="ts">
function updateData() {
  chartOptions.value.series[0].data = [
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
  ]
}
</script>