成果如下：
这里用的是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(); // domlet myChart = null; // echartsonMounted(()=>{ myChart = echarts.init(stacked.value); // 初始化echarts lineChart(); })最初附上官网配置项文档：https://echarts.apache.org/examples/zh/editor.html?c=line-stack
如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发✨哦~