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

最新推荐文章于 2024-04-22 09:19:52 发布

不吃糖的哼哼

最新推荐文章于 2024-04-22 09:19:52 发布

阅读量881

点赞数 8

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

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

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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) {
      const valMap = {}
      let html = `${params[0].name}<br>`
      params.forEach(param => {
        // 过滤无效值和重叠值
        if (
          param.value === "-" ||
            valMap[param.seriesName] === param.value
        )
          return
        valMap[param.seriesName] = param.value
        const value =
            param.value != null
              ? param.value
                .toString()
                .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
              : "-"
        html += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10p
      })
      return `<div style="text-align:left">${html}</div>`
    }
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: _this.dateList,
      axisLabel: {
        fontSize: 10, // 这里设置字体大小
        // x轴的文本颜色
        textStyle: {
          color: '#fff', // 这里就是颜色
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false, // X轴 网格线 颜色类型的修改
        lineStyle: {
          color: '#94B8DC',
        },
      },
      splitLine: {
        show: false, // X轴线 颜色类型的修改
        lineStyle: {
          color: '#94B8DC',
        },
      },
      axisLabel: {
        interval: 0,
        rotate: 30, //倾斜的程度
        fontSize: 10, // 这里设置字体大小
        // x轴的文本颜色
        textStyle: {
          color: '#fff', // 这里就是颜色
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff',
        },
      },
      name:'',
      left:10,
      axisTick: {
        inside: false,
      },
      min: 0,
      splitLine: {
        show: false, // X轴线 颜色类型的修改
        lineStyle: {
          color: '#94B8DC',
        },
      },
    },
  ],
  series: [
    {
      name: '实际',
      type: 'line',
      itemStyle: {
        color: '#38c8a8',
      },
      showSymbol: false,
      smooth: true,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(17, 45, 55)',
          },
          {
            offset: 1,
            color: 'rgba(12, 62, 96,0.2)',
          },
        ]),
      },
      data:_this.historyList,
    },
    {
      name: '预测',
      type: 'line',
      itemStyle: {
        color: '#38c8a8',
      },
      showSymbol: false,
      smooth: true,
      lineStyle: {
        width: 2,
        type: "dotted"
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(17, 45, 55)',
          },
          {
            offset: 1,
            color: 'rgba(12, 62, 96,0.2)',
          },
        ]),
      },
      data:_this.futureList,
    },
  ],
};