共计 2762 个字符，预计需要花费 7 分钟才能阅读完成。
成果如下：
这里用的是 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
如果感觉这篇文章对你有帮忙，欢送点赞👍、珍藏💖、转发✨哦~
正文完