vue3 echarts动态折线图

### Vue 3 中实现动态更新的 ECharts 折线图 在 Vue 3 项目中集成并实现实时数据刷新的 ECharts 折线图，主要涉及初始化图表实例、配置项设置以及定时器触发的数据更新逻辑。 #### 初始化组件模板结构 HTML部分定义了一个容器用于承载图表： ```html <div ref="chartContainer" style="width: 100%; height:400px;"></div> ``` 此`<div>`元素作为ECharts渲染的目标区域[^2]。 #### 安装依赖库 确保已经通过 npm 或 yarn 安装了 `echarts` 和其对应的 vue 组件包 `vue-echarts`: ```bash npm install echarts vue-echarts ``` 或者使用yarn命令来完成相同操作。 #### 编写Vue组件代码 下面是一个完整的Vue单文件组件例子，展示了如何创建一个可以自动更新数据点的折线图： ```javascript <script setup> import { ref, onMounted } from 'vue'; import * as echarts from 'echarts'; // 创建ref绑定DOM节点 const chartContainer = ref(null); let myChart; let dataCount = 5; onMounted(() => { // 基于准备好的dom，初始化echarts实例 myChart = echarts.init(chartContainer.value); const option = { xAxis: { type: 'category', boundaryGap: false, data: Array.from({ length: dataCount }, (_, i) => `${i}`) }, yAxis: { type: 'value' }, series: [{ name:'模拟数据', type:'line', smooth:true, symbolSize:8, sampling:'average', itemStyle:{ color:'#FF7F50' }, areaStyle:{}, data:Array(dataCount).fill(0).map(() => Math.round(Math.random() * 10)) }] }; function addData(shift){ let list=option.series[0].data; if (shift){ list.shift(); } list.push(Math.round(Math.random()*10)); // 更新X轴标签 option.xAxis.data.shift(); option.xAxis.data.push(`${list.length}`); myChart.setOption(option); } setInterval(function () { addData(true); }, 1000); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }); </script> <style scoped> /* 可选样式 */ </style> ``` 上述脚本实现了每秒向现有数据集中追加一个新的随机数值，并移除最旧的一个值以保持固定数量的数据点显示。这使得曲线看起来像是随着时间流动而变化的效果[^1]。 #### 注意事项 如果开发环境启用了 ESLint，则建议定期执行快捷键组合 `Alt+Shift+F` 对源码进行格式化处理，从而遵循良好的编码习惯[^3]。