目录
前言
一. 前置准备
二. 代码解析
1. HTML 结构搭建
2. CSS 样式设置
三. 逻辑实现
四. 补充方法
五. 注意事项
六. 本文总结
七. 更多操作
前言
在前端开发领域，数据可视化对于有效传达信息起着至关重要的作用。Echarts 作为一款广受欢迎的可视化库，提供了丰富的图表类型与强大的交互功能，满足了多样化的数据展示需求。而在 Vue 项目里，将 Echarts 与 Element - UI 的轮播图组件相结合，能够以动态且富有吸引力的方式呈现数据。其中，利用 Vue 的 ref 特性精准定位 DOM 元素，是实现这一完美组合的关键环节。这里带你深入了解，如何在 Vue 轮播图场景下巧妙运用 Echarts 和 ref实现该效果（轮播图就是Element中的走马灯组件）。
一. 前置准备
首先，我们要确保 Echarts 已正确安装并引入到 Vue 项目中
1. 安装流程：打开项目所在的终端，执行以下命令安装 ECharts：
npm install echarts --save
||
cnpm install echarts --save
该命令会在当前项目的根目录下（即包含package.json文件的目录）安装ECharts，并自动将ECharts添加到package.json文件的dependencies列表中，dependencies 中的包是你项目在生产环境中运行所必需的所有库和模块。
2. 引入操作：当 Echarts 安装完毕后，我们需在 main.js 这个 Vue 项目的核心入口文件中进行全局引入并挂载。示例代码如下：
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 全局引入Echarts
import * as echarts from "echarts";
// 挂载到vue原型
Vue.prototype.$echarts = echarts;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');通过以上步骤，我们成功将 ECharts 引入并挂载到 Vue 的原型之上，如此一来，在项目的各个组件内部，均可便捷地通过 this.$echarts 访问 ECharts 实例，为后续图表的创建与操作奠定了基础。
二. 代码解析
1. HTML 结构搭建
深入到 Vue 组件的模板层面，这里精心构建了一个集轮播与图表展示于一体的布局架构。示例代码如下：
<template>
<div class="lmg_BlockShow">
<!-- Element UI 轮播图 -->
<el-carousel class="lmg_echartsBox" :interval="3000" arrow="always">
<!-- 第1页：折线图 -->
<el-carousel-item class="lmgEcs_item">
<div ref="lineChart" class="chart_container"></div>
</el-carousel-item>
<!-- 第2页：饼图 -->
<el-carousel-item class="lmgEcs_item">
<div ref="pieChart" class="chart_container"></div>
</el-carousel-item>
</el-carousel>
</div>
</template>在这段代码中，<el-carousel> 作为 Element UI 的轮播图组件被使用，带有 class="lmg_echartsBox" 提供独特样式。通过 :interval="3000" 属性设置轮播图每3000毫秒自动切换到下一张幻灯片，而 arrow="always" 确保导航箭头始终显示以便用户手动切换。每个 <el-carousel-item> 代表轮播图中的一页，通过 ref 属性（如 ref="lineChart" 和 ref="pieChart"）为后续Echarts图表的初始化提供精确的DOM元素抓取支持，并且每一个图表容器拥有 class="chart_container"，为图表展示准备了布局并允许通过CSS进行样式定制。
2. CSS 样式设置
与之对应的 CSS 样式代码如下：
.lmg_BlockShow {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.lmg_echartsBox {
width: 100%;
height: 100%;
::v-deep .el-carousel__button {
background-color: gray;
}
::v-deep .el-carousel__container {
width: 100%;
height: 100%;
.lmgEcs_item {
width: 100%;
height: 100%;
.chart_container {
width: 830px;
height: 400px;
&>div {
width: 100%;
height: 100%;
}
}
}
}
}
}这段CSS代码使用了flex布局使lmg_BlockShow在父容器中居中展示。通过深度选择器::v-deep调整轮播图按钮的颜色，赋予独特风格。针对轮播图组件及内部元素进行布局优化，确保各部分尺寸适宜。特别地，图表容器.chart_container被设定为宽度830px、高度400px，为图表提供了一个宽敞且舒适的展示空间。
三. 逻辑实现
JavaScript 逻辑实现，在组件的 script 部分，隐藏着驱动整个图表展示与交互的核心：
export default {
methods: {
// 初始化折线图
initLineChart() {
const myChart = this.$echarts.init(this.$refs.lineChart);
const colors = ["#1890ff"]; // 设置柱形颜色为蓝色
const option = {
// 设置图表的整体颜色方案
color: colors,
title: {
text: '全国工会数据统计',
left: 'center', // 让标题在水平方向居中
top: '4%' // 让标题在垂直方向居中
},
// 设置布局
grid: {
left: "15%", // 网格左边距
bottom: "15%", // 网格底部边距
top: "20%", // 网格顶部边距
},
xAxis: {
type: 'category',
data: ['全国职工', '工会会员', '农名工'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [79238506, 70238506, 9738506],
type: 'bar',
},
],
};
// 使用配置项设置图表
option && myChart.setOption(option);
// 添加窗口大小改变事件监听器,在窗口大小变化时调整图表大小
window.addEventListener("resize", () => {
myChart.resize(); // 触发图表自适应调整
});
},
// 初始化饼图
initPieChart() {
const myChart = this.$echarts.init(this.$refs.pieChart);
const colors = ["#d48265", "#61a0a8", "#2f4554", "#c23531"]; // 设置柱形颜色为蓝色
const option = {
// 设置图表的整体颜色方案
color: colors,
title: {
text: '全省职工文化阵地',
left: 'center', // 让标题在水平方向居中
top: '4%' // 让标题在垂直方向居中
},
legend: {
orient: 'vertical',
left: 'left'
},
// 设置布局
grid: {
left: "15%", // 网格左边距
bottom: "15%", // 网格底部边距
top: "20%", // 网格顶部边距
right: "15%" // 网格右边距，这里补充完整，方便后续调整布局
},
series: [
{
name: '463' // 此处疑似有误，应为访问来源等合理名称，暂按原文保留
type: 'pie',
radius: '50%',
data: [
{ value: 735, name: '图书馆' },
{ value: 580, name: '体育场' },
{ value: 484, name: '文化宫' },
],
},
],
};
// 使用配置项设置图表
option && myChart.setOption(option);
// 添加窗口大小改变事件监听器,在窗口大小变化时调整图表大小
window.addEventListener("resize", () => {
myChart.resize(); // 触发图表自适应调整
});
},
},
mounted() {
// 在组件挂载后调用绘制函数
// 初始化柱状图
this.initLineChart();
// 初始化饼图
this.initPieChart();
// 这里再添加窗口大小改变时的重绘监听器，防止报错
window.addEventListener("resize", () => {
if (this.$echarts.init(this.$refs.lineChart)) {
this.initLineChart();
}
if (this.$echarts.init(this.$refs.pieChart)) {
this.initPieChart();
}
});
},
};1. initLineChart 方法：
通过 this.$echarts.init(this.$refs.lineChart) 初始化 Echarts 实例 myChart，利用之前定义的 ref="lineChart" 获取DOM元素。定义颜色数组 colors 设置柱状图颜色为蓝色，并构建 option 配置项：title 设置图表标题为“全国工会数据统计”且居中；grid 调整图表布局预留边距；xAxis 和 yAxis 分别定义人群分类和数值尺度；series 定义承载数据值的柱状图系列。使用 setOption 应用配置项，并添加窗口大小改变监听器调用 myChart.resize()。
2. initPieChart 方法：
采用 this.$echarts.init(this.$refs.pieChart) 初始化饼图的 Echarts 实例，依靠 ref="pieChart" 获取DOM元素。定义颜色数组 colors 为饼图部分设定色彩。在 option 中配置：title 设定为“全省职工文化阵地”并居中；legend 垂直排列于左侧以引导用户理解图表；grid 类似折线图但补充右边距便于灵活调整；series 定义半径50%的饼图数据系列包含名称和对应数据值。应用配置项并添加窗口大小改变的自适应监听器确保饼图能自适应调整大小。
3. mounted 生命周期钩子：
组件挂载完成后立即调用 initLineChart 和 initPieChart 方法初始化图表。额外添加窗口大小改变监听器，当检测到变化时判断是否可以初始化 Echarts 实例，条件允许则重新调用相应的初始化方法，确保图表始终完美适配窗口大小，提供流畅视觉体验。
四. 补充方法
使用 id 获取元素的补充方法。除了借助 Vue 特有的 ref 属性获取元素来初始化 Echarts 图表，我们还拥有传统的 id 属性。在 HTML 模板中，只需将 ref 替换为 id，便能开启另一种可能。示例如下：
<template>
<div class="lmg_BlockShow">
<!-- Element UI 轮播图 -->
<el-carousel class="lmg_echartsBox" :interval="3000" arrow="always">
<!-- 第1页：折线图 -->
<el-carousel-item class="lmgEcs_item">
<div id="lineChart" class="chart_container"></div>
</el-carousel-item>
<!-- 第2页：饼图 -->
<el-carousel-item class="lmgEcs_item">
<div id="chart" class="chart_container"></div>
</el-carousel-item>
</el-carousel>
</div>
</template>在 JavaScript 代码中，相应的初始化方法也需要同步调整：
initLineChart() {
const lineChart = document.getElementById('lineChart');
const myChart = this.$echarts.init(lineChart);
// 后续配置项与之前相同，省略...
}
initPieChart() {
const pieChart = document.getElementById('pieChart');
const myChart = this.$echarts.init(pieChart);
// 后续配置项与之前相同，省略...
}
可以简写为：const myChart = this.$echarts.init(document.getElementById("DomId"));相较于通过id获取元素的方式，ref因其与组件生命周期紧密结合、响应性出色的特点而更受推崇。Ref能够自动感知组件状态的变化并及时更新，而在特殊场景下，了解id的使用技巧也为解决问题提供了更多灵活性。
五. 注意事项
-
Echarts版本兼容性：选择Echarts版本时需谨慎，确保与现有依赖库兼容。项目初期选定版本后，更新时应全面测试，避免影响现有功能。
-
DOM元素获取时机：使用ref或id获取元素时，正确把握获取时机很重要。通常在mounted钩子中进行，但存在异步操作时需额外措施确保DOM完全渲染后再初始化图表，以防错误。
-
样式覆盖问题：使用::v-deep修改Element UI组件样式时要小心，防止样式覆盖范围失控。应精准定位并限定样式覆盖的类名，减少对其他组件的影响，维护页面和谐。
-
窗口大小调整逻辑：虽然监听窗口大小变化实现图表自适应，但在复杂布局下频繁调整可能导致性能问题。建议引入节流或防抖机制优化重绘频率，保持最佳性能和流畅用户体验。
-
如果是通过Websocket获取的图表数据，记得在获取数据后调用初始化方法，这样图表就会实时更新。
六. 本文总结
通过本文详述，了解了在 Vue 项目里结合 Echarts 与轮播图组件，能打造吸睛的数据展示。利用 ref 精准获取 DOM 元素，为图表初始化筑牢根基。从 Echarts 安装引入，到组件的 HTML、CSS、JavaScript 精细编码，步步关键。同时了解 id 获取元素作备用，还注意到 Echarts 版本兼容、DOM 元素获取时机、样式覆盖、窗口大小调整逻辑等要点，掌握这些，就能为前端可视化开发赋能，轻松创造惊艳效果。
七. 更多操作
更多Echarts操作，请看
Echarts 系列
https://blog.csdn.net/weixin_65793170/category_12278254.html
