Vue 3 使用 Vue-ECharts 的实践心得

背景：为了提升业务数据的可视化和实时监控，团队决定在产品首页引入一个概览模块。这个概览将集中展示业务中最关键、最需要关注的数据，帮助用户在第一时间获得重要的数据信息。而可视化的展示，这里将通过图表的形式直观呈现。

我总结了下关于vue-echarts的使用和经验，希望对大家有所帮助、有所借鉴。

一、Vue-ECharts 简介

在图表开发中，使用了 vue-echarts 开源库，它是专为 Vue.js 量身打造的 ECharts 组件。通过结合 Vue 和 ECharts，vue-echarts 可以轻松在 Vue 项目中绘制各种类型的图表，包括折线图、柱状图、饼图等。依托 ECharts 强大的渲染引擎，vue-echarts 在处理大数据量和复杂交互时，依然能够保持高效的渲染性能，适合用于大数据展示和复杂的图表需求，从而确保流畅的用户体验。

• echarts官网：https://echarts.apache.org/examples/zh/index.html
• vue-echarts：https://github.com/ecomfe/vue-echarts

作为开源项目，vue-echarts 被广泛使用，开发者可以通过官方文档、示例以及度娘等搜索资料，迅速解决开发过程中的问题。它具有快速集成、简化开发的特点，支持 Vue2 和 Vue3，同时支持响应式数据绑定，极大降低了开发复杂度和学习成本，我们可以快速在项目中集成和开发，提升开发效率。

二、安装与使用

在你的 Vue 项目中使用 vue-echarts 非常简单。首先，你需要安装 vue-echarts 和 echarts：

npm install vue-echarts echarts --save

然后在全局注册use

import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 手动引入 ECharts 各模块来减小打包体积
import {
  CanvasRenderer
} from 'echarts/renderers'

import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent
} from 'echarts/components'

import {
  BarChart,
  PieChart,
  LineChart
} from 'echarts/charts'

use([
  CanvasRenderer,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  LineChart
])

const app = createApp(App)
app.component('VChart', ECharts)

最后，在你的 Vue 组件模板中，我们可以使用 <v-chart> 组件来渲染图表，指定 options 来配置图表的各种参数：

<template>
  <v-chart :options="chartOptions" />
</template>

<script lang="ts" setup name="gatewayMetrics">
  const chartOptions = ref({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  })
</script>

三、Vue-ECharts 的实践技巧

1. 图表数据和配置项的响应式

Vue-ECharts 很好地与 Vue 的响应式系统结合，图表的配置项和数据都能响应式地更新。例如，当数据发生变化时，图表会自动重新渲染，无需手动更新：

const chartOptions = ref({
  title: {
    text: '销售趋势图',
    subtext: '2021年'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['2021-01-01', '2021-01-02', '2021-01-03']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [50, 70, 60],
    type: 'line',
    smooth: true
  }]
}
})

onMounted() {
  setInterval(() => {
    this.chartOptions.series[0].data.push(Math.random() * 100); // 动态更新数据
  }, 2000);
}

在这个例子中，图表会随着 chartOptions 数据的变化自动更新，而不需要额外的操作。

2. 图表类型与配置

Vue-ECharts 支持多种类型的图表，包括折线图、柱状图、饼图、散点图等。每种图表的配置项有所不同，但 Vue-ECharts 让我们可以很方便地在 Vue 组件中管理这些配置。例如：

• 折线图（Line Chart） ：

{
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901],
    type: 'line'
  }]
}

• 柱状图（Bar Chart） ：

{
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [100, 200, 300],
    type: 'bar'
  }]
}

根据需求，我们可以灵活调整 series、xAxis 和 yAxis 的配置，满足不同的展示需求。

3. 图表的交互性

ECharts 强大的交互性是其受欢迎的原因之一，Vue-ECharts 完美地继承了这一特性。例如，鼠标悬停、点击事件都可以通过 @event-name 监听器来捕获，从而实现联动或其他交互效果：

<v-chart
  :options="chartOptions"
  @click="handleChartClick"
/>

methods: {
  handleChartClick(params) {
    console.log('Chart clicked:', params);
  }
}

这种交互性使得图表不再是静态的展示，可以根据用户的操作进行动态反馈，增强用户体验。具体详见文档

4. 配置和自定义主题

Vue-ECharts 可以轻松与自定义主题结合，利用 ECharts 的 theme 功能来调整图表的外观。通过传入不同的主题配置，我们可以快速改变图表的颜色、字体等样式：

import { use } from 'echarts/core';
import dark from 'echarts/theme/dark'; // 引入主题

use([dark]);

this.chartOptions = {
  theme: 'dark',
  title: {
    text: 'Dark Theme Chart'
  },
  xAxis: {
    data: ['Mon', 'Tue', 'Wed']
  },
  series: [{
    type: 'bar',
    data: [23, 34, 45]
  }]
};

使用主题后，我们可以确保整个图表风格一致，且易于定制。

四、常用配置项

其中autoresize随浏览器大小，自动调整图表大小，是我们常用的配置之一。

1. init-options：图表初始化配置

init-options 配置项用于定制图表实例化时的一些参数，主要是传递给 ECharts 的 echarts.init 方法。这些配置项可以帮助我们在初始化图表时传递更多的定制参数，例如渲染容器、图表宽高等。

<v-chart :init-options="{ renderer: 'canvas' }" />

2. theme：主题配置

theme 属性用于设置图表的主题，可以传递一个字符串或一个对象。如果传递字符串，ECharts 将会使用内置的主题（如 'light' 或 'dark'）；如果传递对象，则可以创建一个自定义主题。

<v-chart :theme="'dark'" />

或使用自定义主题：

<v-chart :theme="customTheme" />

3. option：图表配置项

option 是 Vue-ECharts 中最常用的属性，它传递的是 ECharts 的配置对象。修改 option 属性会触发 setOption 方法，重新渲染图表。需要注意的是，如果直接修改 option 对象，且引用未发生变化，ECharts 会默认使用 notMerge: false，即合并新旧配置。

data() {
  return {
    chartOption: {
      title: { text: '销售趋势' },
      xAxis: { data: ['January', 'February', 'March'] },
      series: [{ data: [820, 932, 901], type: 'line' }]
    }
  }
}

4. update-options：图表更新配置

update-options 属性用于更新图表配置时传入的额外参数，类似于 option，但它为更新配置提供了更细粒度的控制。例如，我们可以在修改数据时指定 notMerge、lazyUpdate 等选项。

<v-chart :update-options="{ notMerge: true, lazyUpdate: true }" />

例如：更改配置options没有触发视图更新问题，通过配置notMerge:true可以解决。

• notMerge: boolean：可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。

5. group：图表分组

group 属性使得图表能够进行分组，适用于多个图表需要关联时的场景。例如，多个图表通过某个共享的 group 名称进行联动，可以通过事件触发器来同步更新图表。

<v-chart :group="'group1'" />

6. autoresize：自动调整大小

autoresize 属性决定了图表是否在容器尺寸发生变化时自动调整。通过设置 throttle 延迟，或者提供 onResize 回调函数，我们可以定制图表调整尺寸的行为。

<v-chart :autoresize="{ throttle: 200, onResize: handleResize }" />
//可以直接配置
<v-chart autoresize/> 

methods: {
  handleResize() {
    console.log('Chart resized!');
  }
}

7. loading 与 loading-options：加载状态

loading 属性控制图表的加载状态，在数据加载或其他操作过程中，可以设置图表处于加载中状态，避免用户看到空白或无响应的界面。loading-options 允许定制加载动画的配置项。

<v-chart :loading="true" :loading-options="{ text: '数据加载中...' }" />

8. manual-update：手动更新

在数据量较大时，频繁更新 option 可能导致性能问题。通过设置 manual-update 为 true，我们可以绕过 Vue 的响应式系统，手动调用 setOption 更新图表。这对于大数据集的场景尤为重要。

<v-chart :manual-update="true" ref="chart" />

然后通过 ref 获取图表实例，手动调用 setOption 来更新数据：

methods: {
  updateChart() {
    const chartInstance = this.$refs.chart;
    chartInstance.setOption({
      series: [{ data: [10, 20, 30, 40] }]
    });
  }
}

五、性能优化建议

1. 使用 manual-update 优化大数据渲染

在面对大量数据时，Vue 的响应式系统可能会导致不必要的重渲染。使用 manual-update 属性可以完全绕过响应式系统，直接通过 setOption 更新图表，从而提升性能。

2. 图表更新频率控制

对于数据更新频繁的场景，我们可以结合 throttle 或 debounce 来限制图表更新的频率。通过延迟更新操作，可以有效减少渲染次数，从而避免性能问题。

<v-chart :autoresize="{ throttle: 100 }" />

3. 利用 update-options 和 notMerge

在频繁更新图表配置时，建议使用 update-options 配合 notMerge: true，避免每次修改 option 时造成不必要的配置合并，从而减少性能开销。

<v-chart :update-options="{ notMerge: true }" />

4. 使用 group 实现图表联动

多个图表之间的联动可以通过 group 属性来实现。这种方式比通过事件监听更新多个图表更为高效，避免了重复渲染的问题。

<v-chart :group="'group1'" />

使用 group 实现图表联动是通过 ECharts 的 group 机制来实现的。group 允许多个图表实例共享同一个组，在组内的图表会相互联动。比如，当一个图表触发某个事件（如点击、选择等），其他图表可以同步更新，或响应特定的事件。

<template>
  <div>
    <v-chart
      :group="'group1'"
      :option="barChartOption"
      @click="onBarChartClick"
      ref="barChart"
    />
    <v-chart :group="'group1'" :option="lineChartOption" ref="lineChart" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { EChartOption } from 'echarts'

const barChartOption = ref<EChartOption>({
  title: {
    text: '销售数据'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70],
    type: 'bar'
  }]
})

const lineChartOption = ref<EChartOption>({
  title: {
    text: '销售趋势'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [10, 20, 30, 40, 50],
    type: 'line'
  }]
})

const onBarChartClick = (params: any) => {
  console.log('Clicked on bar chart:', params)

  // 更新折线图的数据
  const newData = [params.value, params.value + 10, params.value + 20, params.value + 30, params.value + 40]
  lineChartOption.value.series![0].data = newData

  // 更新折线图
  const lineChart = $refs.lineChart as any
  lineChart.setOption(lineChartOption.value)
}
</script>

六、总结

通过这段时间的实践，我深刻体会到 Vue-ECharts 的优势。它不仅简化了 ECharts 的集成，还能充分发挥 Vue 的响应式特性，使得图表的更新与数据变化无缝衔接。此外，Vue-ECharts 的灵活性和扩展性非常强，无论是简单的静态图表，还是复杂的动态交互，均能轻松实现。

在实际项目中，我利用 Vue-ECharts 完成了多个数据可视化的需求展示，Vue-ECharts 提供的灵活配置使得我能够在保证性能的同时，提供丰富的图表功能。如果你正在寻找一种简便的方式将 ECharts 集成到 Vue 3 项目中，Vue-ECharts 无疑是一个非常好的选择。

希望这篇文章对你有所帮助！如果你有更多具体的问题或希望讨论更深入的内容，随时告诉我！