场景:
折线图一般都是实线为准,但是由于最后一个数据是预测。所以想要实现最后一段为虚线。
效果图:
具体实现:
series:[{name: "销售总金额",type: "line",smooth: true,barWidth: 10,stack: 'Total',itemStyle: {normal: {color: "#F02FC2",lineStyle: {width: 2,type: 'solid' //'dotted'虚线 'solid'实线}},// 强调最后一个数据点的样式},data: [1213,232132,4324,2,23,42323,4234,4243223,424334,4324,423423,64456]PS:重点虚线的那一段的开头数据需要与实线的最后一个数据对应},{name: "销售总金额",type: "line",smooth: true,barWidth: 10,itemStyle: {normal: {color: "#F02FC2",// 最后一个点的边框颜色borderWidth: 2,lineStyle: {width: 2,type: 'dotted',color: "yellow"//'dotted'虚线 'solid'实线}}},data: ["-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", 64456, 52435]},]
同理:如果中间段的数据需要虚线也按这个方法即可。
数据处理:
let dataValue = [1, 2, 3, 4, 5, 6];
let dataValue1 = [ ...new Array(dataValue.length - 1).fill('-'), dataValue[dataValue.length - 1]