当前位置：首页 > news >正文

从零开始：使用 Vue-ECharts 实现数据可视化图表功能

news 2025/5/14 5:58:46

前言

你好，小二！很高兴你愿意分享关于 Vue-ECharts 的使用经验。

📊 Vue-ECharts：让你在 Vue 项目中轻松绘制图表

在前端开发中，经常会遇到需要展示数据可视化的需求，比如柱状图、折线图、饼图等。这类需求不仅要求我们准确地将数据呈现出来，还需要兼顾美观与交互体验。这时候，一个强大的图表库就显得尤为重要。

今天我们就来聊聊——Vue-ECharts，它是一个基于 Apache ECharts 和 Vue.js 的封装库，能够帮助我们在 Vue 项目中更高效地实现各种类型的图表展示。

🌟 为什么选择 Vue-ECharts？

1. 基于 ECharts，功能强大

ECharts 是由百度开源的一款非常流行的可视化图表库，支持丰富的图表类型（如柱状图、饼图、地图、雷达图等）以及强大的交互功能。Vue-ECharts 正是基于 ECharts 构建，因此继承了它的全部能力。

2. 更符合 Vue 开发习惯

Vue-ECharts 对 ECharts 进行了组件化封装，使得开发者可以像使用普通 Vue 组件一样使用图表，代码结构更加清晰，也更容易维护。

3. 支持响应式数据绑定

借助 Vue 的响应式系统，当你的数据发生变化时，图表会自动更新，无需手动调用 setOption 等方法，大大提升了开发效率。

4. 易于集成与动态更新

你可以将图表作为组件嵌入到任意页面或模块中，并通过 props 动态传递数据或配置项，实现图表的实时更新和交互控制。

🧱 实战示例：快速上手 Vue-ECharts

为了让大家更好地理解 Vue-ECharts 的使用方式，我们以一个简单的柱状图为例，带你一步步实现。

✅ 安装依赖

npm install vue-echarts echarts

✅ 引入并注册组件

// main.js 或组件内引入均可
import { defineComponent } from 'vue'
import { BarChart } from 'vue-echarts'export default defineComponent({components: {BarChart}
})

✅ 在模板中使用

<template><bar-chart :data="chartData" :settings="chartSettings" />
</template>

✅ 准备数据和配置

<script setup>
import { ref } from 'vue'const chartData = ref({columns: ['月份', '销售额'],rows: [{ 月份: '一月', 销售额: 120 },{ 月份: '二月', 销售额: 200 },{ 月份: '三月', 销售额: 180 },{ 月份: '四月', 销售额: 250 },{ 月份: '五月', 销售额: 300 }]
})const chartSettings = ref({})
</script>

通过以上步骤，你就可以在 Vue 项目中快速渲染出一个柱状图了。是不是比原生写法简单很多？而且代码逻辑更清晰，维护起来也更方便！

📌 小结

相比直接使用 ECharts，Vue-ECharts 提供了更好的组件化体验和更自然的响应式数据绑定机制，尤其适合在 Vue 项目中进行图表开发。虽然语法上与原版略有不同，但掌握之后能显著提升开发效率。

如果你正在寻找一种在 Vue 中快速构建图表的方式，不妨试试 Vue-ECharts。它不仅能满足你的基本需求，还能支持高级定制和交互功能。

案例：Vue-Echart开发一个分组柱状图

安装依赖

首先，我们需要在 Vue 项目中安装 Vue-ECharts 以及 ECharts：

npm install vue-echarts echarts

注意，这两个都要安装，只安装vue-echarts是不行的。

引入

全局引入

你可以在 main.js中，进行全局引入。

如果你是 Echarts 4.x，可以这样写：

// 引入 Echarts 4.x
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

如果是 5.x，可以这样写：

// 引入 Echarts 5.x
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入vue-echarts
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

按需引入

你也可以在单个页面或者组件中，局部引入你所需要的组件。比方说这里的案例是柱状图，我可以这样写：

// 从 echarts/core 导入必要的函数和组件
import { use, graphic } from 'echarts/core'// 导入用于在画布上渲染图表的渲染器
import { CanvasRenderer } from 'echarts/renderers'// 导入你想要使用的图表类型，在这里是柱状图
import { BarChart } from 'echarts/charts'// 导入图表的各种组件，如标题、提示和图例
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'// 从 vue-echarts 导入 VChart 组件用于 Vue 集成
import VChart from 'vue-echarts'// 注册导入的组件到 echarts 中
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])

按需引入需要你对每个模块有一定的了解，比方说柱状图是属于BarChart，需要用到标题、图例组件等，如果是其他类型的图表，引入的组件会有所不同。

编写组件

除了上面的引入，其他的写法跟 Echarts 大差不差，一个简单的组件示例如下：

<v-chart autoresize :data="data" :option="defaultOption" />

data代表传入的数据，option 表示配置项，:auto-resize="true"代表图表自适应宽度。

我根据实际业务需求，开发了一个支持分组显示的柱状图组件，传入的数据可以是单柱，也可以是多柱。组件代码如下：

<!-- 纵向柱状图多柱 -->
<template><div class="vChartVerticalBar"><v-chart :auto-resize="true" :data="data" :option="defaultOption" /></div>
</template><script>
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])export default {name: 'vChartVerticalBar',components: { VChart },props: {option: {type: Object,default: function () {return {}},},data: {type: Object,default: function () {return {categories: ['被删', '哈士奇', '杨不易呀', '三掌柜', '花花', '喵喵侠'],series: [{name: '2023',data: [233, 340, 666, 100, 340, 30],},{name: '2024',data: [233, 566, 666, 200, 300, 330],},],}},},},data() {return {}},created() {},mounted() {},computed: {defaultOption() {let that = thisconst colorGradients = [this.generateGradient('#188df0', '#83bff6'),this.generateGradient('#f08d1a', '#ffaf7b'),this.generateGradient('#0d1a4f', '#4a69bd'),this.generateGradient('#83bff6', '#188df0'),this.generateGradient('#ffaf7b', '#f08d1a'),]const series = this.data?.series?.map((serie, index) => {return {type: 'bar',// showBackground: true,name: serie.name,itemStyle: {barBorderRadius: [20, 20, 0, 0],color: new graphic.LinearGradient(0, 1, 0, 0, colorGradients[index % 5]),},label: {show: false,position: 'top',},barWidth: '20%',data: serie.data,}})return {grid: {left: '3%',right: '4%',top: '25%',bottom: '1%',containLabel: true,},tooltip: {formatter: function (params) {const unit = that.option.unit ?? '' // 设置单位，可以根据需求修改let res = params[0].name + '<br/>'for (let i = 0; i < params.length; i++) {res += params[i].marker + params[i].seriesName + ' : ' + params[i].value + unit + '<br/>'}return res},trigger: 'axis',axisPointer: {type: 'shadow',},},legend: {icon: 'circle',textStyle: {padding: [0, 0, 0, -8], // 设置图例文字与图例符号之间的间距，[上, 右, 下, 左]},itemGap: 20, // 设置图例和图例之间间距},yAxis: [{type: 'value',name: that.option.yAxisName || '',minInterval: this.option.minInterval || '', // 坐标轴最小间隔大小。nameTextStyle: {padding: [0, 24, 0, 0],},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: true,lineStyle: {//分割线color: '#DCDFE6',width: 1,type: 'dashed', //dotted：虚线 solid:实线},},axisLabel: {textStyle: {color: '#556677',},formatter: '{value}',},},],xAxis: [{type: 'category',axisLabel: {color: '#858B9C',fontSize: '12',formatter: function (params) {let newParamsName = '' // 最终拼接成的字符串const paramsNameNumber = params.length // 实际标签的个数const provideNumber = that.option.provideNumber ||  6 // 每行能显示的字的个数const rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整/*** 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签*/// 条件等同于rowNumber>1if (paramsNameNumber > provideNumber) {/** 循环每一行,p表示行 */for (let p = 0; p < rowNumber; p++) {let tempStr = '' // 表示每一次截取的字符串const start = p * provideNumber // 开始截取的位置const end = start + provideNumber // 结束截取的位置// 此处特殊处理最后一行的索引值if (p == rowNumber - 1) {// 最后一次不换行tempStr = params.substring(start, paramsNameNumber)} else {// 每一次拼接字符串并换行tempStr = params.substring(start, end) + '\n'}newParamsName += tempStr // 最终拼成的字符串}} else {// 将旧标签的值赋给新标签newParamsName = params}//将最终的字符串返回return newParamsName},},splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},data: that.data.categories,},],series: series || [],}},},watch: {},methods: {// 生成渐变颜色的方法generateGradient(startColor, endColor) {return [{ offset: 0, color: startColor },{ offset: 0.5, color: startColor },{ offset: 1, color: endColor },]},},
}
</script>
<style lang="less" scoped>
.vChartVerticalBar {width: 100%;height: 100%;
}
</style>

效果图如下：