Echarts拼接折线图，左右两部分设置不同的样式及formatter的处理

最新推荐文章于 2024-05-02 18:12:22 发布

每一天，每一步

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量585

点赞数

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

本文链接：https://blog.csdn.net/u010234868/article/details/131481537

版权

ECharts 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

option = {
  tooltip: {
    trigger: 'axis',
    formatter: (params) => {
      console.log(params);
      if (params && params.length == 2) {
        if (params[0].value != '-') {
          return `日期：${params[0].name}<br>${params[0].marker} ${params[0].value}`;
        } else {
          return `日期：${params[1].name}<br>${params[1].marker} ${params[1].value}<br>`;
        }
      }
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value'
    }
  ],
  series: [
    {
      type: 'line',
      areaStyle: {
        color: '#6c50f330'
      },
      data: [190, 230, 224, 200, 230, '-', '-', '-', '-', '-', '-']
    },
    {
      type: 'line',
      areaStyle: {
        color: '#00ca9550'
      },
      data: ['-', '-', '-', '-', 230, 200, 190]
    }
  ]
};

效果：