echarts 预测图一半实线一半虚线

最新推荐文章于 2024-04-11 23:24:46 发布

不吃糖的哼哼

最新推荐文章于 2024-04-11 23:24:46 发布

阅读量1.4k

点赞数 8

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/Y13349887034/article/details/135408443

版权

文章描述了如何使用ECharts库在图表中展示历史数据和预测数据，确保两者在视觉上连贯，通过调整连线样式和数据处理逻辑来实现不同数据类型的无缝衔接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
图表由两段折线组成，实线的数据前半部分是具体数字，后半段是’-‘，虚线部分前半段是’-'，后半段是具体的数字。两个段线之前的连接部分要虚线部分把实线部分最后一个有具体值的数字放在虚线的数据的对应位置，这样两段线才可以连贯

historyList:[283,99,412,88,323,996,'-','-','-','-','-','-'],
futureList:['-','-','-','-','-',996,233,234,45,231,534,356],
dateList:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

const options ={
    
  grid: {
   
    top: '20%',
    bottom: '20%',
    left:'15%'
  },
  tooltip: {
   
    trigger: "axis",
    formatter: function(params)