效果如下： 这里用的是echarts的折线图堆叠 本文要讨论的内容： 1、折线堆叠样式 2、动态更改数据 3、图表挂载 1、折线堆叠样式 const lineChart = () => { let option = { color : ['#00f2f1','#ed3f35'], /* 调色盘 */ /* 标题的样式 */ title: { text: '单位：万', /* 右上角标题 */ textStyle : { /* 标题的样式 */ fontSize : '12px', color : '#61a8ff', fontStyle : 'normal', fontWeight : 'normal' }, left:'40px', // 标题位置 }, /* 鼠标移入的悬浮框配置 */ tooltip: { trigger: 'axis', backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */ borderColor: 'transparent', // 边框色 textStyle: { // 文字颜色 color : 'rgba(255,255,255,0.8)' }, axisPointer:{ //坐标轴指示器 type:'cross', //十字准星指示器 // x轴的线条 crossStyle: { color: "rgba(76, 155, 253)", //线的颜色 width: 1, // 宽度 type: "dashed", // 虚线 }, // y轴的线条 lineStyle:{ color : 'rgba(76, 155, 253)' }, // x和y轴指向的数据提示样式 label : { show : true, color : '#fff', // 文字颜色 backgroundColor : '#4c9bfd' // 背景颜色 } } }, /* 分类说明 */ legend: { data: ['预期销售额', '实际销售额'], /* 顶部分类 */ textStyle:{ color : '#4c9bfd' // 右上角字体颜色 }, lineStyle : { color : 'inherit' /* 标题分类数据的的颜色-根据调色盘的样式自动遍历选择 */ }, }, grid: { left: '4%', // 定位 right: '4%', bottom: '0%', height : 'auto', // 高度自适应 top : '30px', // 距离顶部 show : true, // 展示并允许修改样式 containLabel: true, // 包括刻度文字在内 borderColor: '#096b80' /* 边框的颜色 */ }, /* 工具栏配置 */ toolbox: { /* 保存按钮 */ feature: { saveAsImage: { /* 保存为图片 */ iconStyle : { /* icon图标的样式 */ borderColor: '#61a8ff' }, bottom : '10px' // 位置 } }, top:'-5px', // 工具栏位置 right:'10px' // 工具栏位置 }, /* x y 轴的文字样式 */ textStyle:{ color: '#4c9bfd' }, // 轴下方指向的颜色 axisTick: { lineStyle : { color : '#096b80' } }, xAxis: { type: 'category', boundaryGap: false, //去除轴内间距 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'] // x轴下方的月份数据 }, yAxis: { type: 'value', splitLine : { // y轴折线图分割线配置 show : true, lineStyle : { color : '#096b80' } }, }, series: [ /* 折线图-折线的配置 */ { name: '预期销售额', // 对应legend分类 type: 'line', // 类型为线条 data: expect, // 平滑折线 smooth: false, // symbol:'none', // 去掉连接点 }, { name: '实际销售额', // 对应legend分类 type: 'line', // 类型为线条 data: practical, // 平滑折线 smooth: false, } ] }; myChart.setOption(option); } 2、动态更改数据 我们只需要去操作series绑定的数据即可 series: [ /* 折线图-折线的配置 */ { name: '预期销售额', // 对应legend分类 type: 'line', // 类型为线条 data: expect, // 平滑折线 smooth: false, // symbol:'none', // 去掉连接点 }, { name: '实际销售额', // 对应legend分类 type: 'line', // 类型为线条 data: practical, // 平滑折线 smooth: false, } ] 我们可以模拟一个随机数，调用该函数随机生成数据并替换掉series原有的数据，这样就可以实现动态数据。 /* 随机生成并重置数据 */ const randomInfo = (num) => { expect.length = 0; practical.length = 0; stackedInfo.forEach(el=>{ el.expect = (Math.random() * num).toFixed(0); el.practical = (Math.random() * num).toFixed(0); expect.push(el.expect) practical.push(el.practical) }) lineChart(); // 重新设置图表 }; 我们更改了echarts的数据源，页面视图并不会发生变化，因为图表没有重新设置，仅仅数据变了，echarts没有重新设置是没有用的，所以我们需要封装设置图表的方法，数据变化后调用方法重新设置图表。 3、图表挂载 vue3可以使用setup，由于setup替代了beforeCreate和created声明周期，所以这个阶段是无法初始化echarts的，因为dom此时还获取不到，我们可以将数据写在组合API上面，实际初始化echarts在onMounted中即可。 const expect = reactive([]); // 预期销售数据 const practical = reactive([]); // 实际销售数据 const stacked = ref(); // dom let myChart = null; // echarts onMounted(()=>{ myChart = echarts.init(stacked.value); // 初始化echarts lineChart(); }) 最后附上官方配置项文档：https://echarts.apache.org/examples/zh/editor.html?c=line-stack 如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~