echarts设置多条折线不是你想的那样简单

南风晚来晚相识2023-12-14 12:49

简单的多条折线图

小伙伴写过多条折线图的都知道，
常见的折线图是  xAxis 配置项下的 data属性上设置时间或者日期。
series配置项下是对应的 legend中的数据以及该条折线的数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多条折线图</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 900px;height: 400px;"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector('div'))
  // 设置X轴的时间
  let dataXTime = [
    '2023-12-04 09:45:07', '2023-12-04 09:50:07','2023-12-04 09:55:07', '2023-12-04 10:00:07', '2023-12-04 10:05:07',
    '2023-12-04 11:05:07','2023-12-04 12:05:07','2023-12-04 13:05:07','2023-12-04 14:05:07','2023-12-04 15:05:07',
  ]
  let option = {
    // 设置的是标题
    title: {
      text: '折线图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads']
    },
    // 网格间距设置
    grid: {
      left: '30px',
      right: '60px',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dataXTime,
    },
    yAxis: {
      type: 'value'
    },
    // 数据
    series: [
      {
        name: 'Email',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210,90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
    
        data: [220, 182, 191, 234, 290, 330, 310,9, 30, 110]
      }
    ]
  };
  myChart.setOption(option);
</script>
</html>

发现多条折线共享一个时间

通过上面的小例子，我们发现一个问题：
多条折线共享的是一个时间(时间与数据是1对多的关系)
第一个时间匹配第一个数据，第2个时间匹配第2个数据。
也就是第n个时间匹配第n个数据。
我们不仅会提出这样一个问题：
有没有可能让每一条折线拥有自己的时间呢？
时间不同，也可以显示在一个实例上。

多条折线拥有数据自己的时间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多条折线图</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 900px;height: 400px;"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector('div'))
  let option = {
    // 设置的是标题
    title: {
      text: '折线图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['邮件', '短信']
    },
    // 网格间距设置
    grid: {
      left: '30px',
      right: '60px',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      // xAxis的下不在设置data属性共享时间
      type: 'category',
      splitLine: { show: false },
      lineStyle: {
        width: 2
      },
      axisTick: {
        show: false
      },
      axisLabel:{
        // 更改x轴文字颜色的配置
        textStyle: {
          color: '#717782'
        },
        showMaxLabel: true // 固定显示X轴的最后一条数据
      },
      // 更改x轴线的颜色
      axisLine: {
        lineStyle: {
          color: '#D2DBE6;',
          width: 1 // x轴线的宽度
        }
      },
    },
    yAxis: {
      type: 'value'
    },
    // 数据
    series: [
      { 
        "name": "邮件", 
        "type": "line", 
        "symbol": "rect",
        "connectNulls": true,
        "showAllSymbol": true, 
        // 让每一条折线拥有数据自己的时间
        "data": [ 
          [ "2023-12-04 09:50:07", "0.137"],
          [ "2023-12-04 09:55:07", "0.147"],
          [ "2023-12-04 10:00:07", "0.137"],
          [ "2023-12-04 10:05:07", "0.163"],
          [ "2023-12-04 10:10:07", "0.150"], 
          [ "2023-12-04 10:15:07", "0.143"], 
          [ "2023-12-04 10:20:07", "0.133"],
          [ "2023-12-04 10:25:07", "0.147"], 
          [ "2023-12-04 10:30:07", "0.147"],
          [ "2023-12-04 10:35:07", "0.143"],
          [ "2023-12-04 10:40:07", "0.140"], 
          [ "2023-12-04 10:45:07", "0.150"], 
          [ "2023-12-04 10:50:07", "0.143"],
        ], 
        "unit": "%", 
        "markPoint": { 
          "symbol": "rect",
          "symbolSize": "12",
          "label": { "show": false },
          "tooltip": { "triggerOn": "click", "trigger": "item" }, 
        }
      },
      { 
        "name": "短信", 
        "type": "line", 
        "symbol": "rect", 
        "connectNulls": true, 
        "showAllSymbol": true, 
          "data": [ 
            [ "2023-12-04 10:35:07", "0.123"],
            [ "2023-12-04 10:40:07", "0.140"], 
            [ "2023-12-04 10:45:07", "0.150"], 
            [ "2023-12-04 10:50:07", "0.143"],
          ], 
          "unit": "%", 
          "markPoint": { 
            "symbol": "circle",
            "symbolSize": "12", 
            "label": { "show": false } 
          } 
      } 
    ]
  };
  myChart.setOption(option);
</script>
</html>

成功了吗？多条折线拥有数据自己的时间

根据上面的图片，我们发现。
好像确实是每一条折线都拥有数据自己的时间了。
但是如果你只细看的话。你就会发现端倪
结束时间都是一样的，但是折线却是在不同的时间上结束的。
很明显不正确的。

多条折线他们必须有一样的开始时间和结束时间？

上面我们发现了问题：结束时间都是一样的，但是折线却是在不同的时间上结束的。
有的机智的小伙伴可能会说：
是因为：多条折线他们必须有一样的开始时间和结束时间。
这样echarts在渲染的时候就不会出现上面这样的情况。
需要有相同的起始点和结束点
感觉有点道理，我们尝试一下

 series: [
  { 
    "name": "邮件", 
    "data": [ 
      [ "2023-12-04 09:50:07", "0.137"],
      [ "2023-12-04 09:55:07", "0.147"],
      [ "2023-12-04 10:00:07", "0.137"],
      [ "2023-12-04 10:05:07", "0.163"],
      [ "2023-12-04 10:10:07", "0.150"], 
      [ "2023-12-04 10:15:07", "0.143"], 
      [ "2023-12-04 10:20:07", "0.133"],
      [ "2023-12-04 10:25:07", "0.147"], 
      [ "2023-12-04 10:30:07", "0.147"],
      [ "2023-12-04 10:35:07", "0.143"],
      [ "2023-12-04 10:40:07", "0.140"], 
      [ "2023-12-04 10:45:07", "0.150"], 
      [ "2023-12-04 10:50:07", "0.143"],
    ], 
  },
  { 
    "name": "短信", 
    "data": [ 
      [ "2023-12-04 09:50:07", "0.8"],
      [ "2023-12-04 10:40:07", "0.140"], 
      [ "2023-12-04 10:45:07", "0.150"], 
      [ "2023-12-04 10:50:07", "0.143"],
    ], 
  } 
]
现在都有相同的起始点(2023-12-04 09:50:07)和结束点(2023-12-04 10:50:07)。

如果每条折线的时间都没有交集会怎么样?

我们发现只要有相同的起始点和结束点；
就会可以达到我们的预期效果。
此时，有的小伙伴说:
"如果他们的时间如果没有交集会怎么样(有相同的起始点和结束点)"
"data": [ 
  [ "2023-12-04 09:50:07", "0.137"],
  [ "2023-12-04 09:55:07", "0.147"],
  [ "2023-12-04 10:00:07", "0.137"],
  [ "2023-12-04 10:05:07", "0.163"],
  [ "2023-12-04 10:10:07", "0.150"], 
  [ "2023-12-04 10:15:07", "0.143"], 
  [ "2023-12-04 10:20:07", "0.133"],
  [ "2023-12-04 10:25:07", "0.147"], 
  [ "2023-12-04 10:30:07", "0.147"],
  [ "2023-12-04 10:35:07", "0.143"],
  [ "2023-12-04 10:40:07", "0.140"], 
  [ "2023-12-04 10:45:07", "0.150"], 
  [ "2023-12-04 10:50:07", "0.143"],
], 

"data": [ 
  [ "2023-12-04 09:50:07", "0.8"],
  [ "2023-12-04 09:52:07", "1.23"],
  [ "2023-12-04 10:41:07", "0.140"], 
  [ "2023-12-04 10:49:07", "0.150"], 
  [ "2023-12-04 10:50:07", "0.143"],
],

xAxis 的 type值设置time

时间绘制的折线图不对，怎么会有返回去的折线？
怎么去解决这个问题呢？
有些小伙伴又提出了。我们可以将 xAxis 的 type值设置time。
就可以解决这个问题。

在 ECharts 中，type的值是 time 和 category 的区别

1.数据类型：'time' 表示时间类型的数据，适用于连续的时序数据。
通常返回的是时间戳。我们为了方便这里写的是yyyy-mm-dd hh:mm:ss
而 'category' 表示类目类型的数据，适用于离散的类目数据。

2.显示方式：在 'time' 类型下，
ECharts 会根据时间跨度自动切换显示的时间粒度，例如从月、星期、日到小时等。
而在 'category' 类型下，坐标轴只会显示类目列表，并且坐标轴内仅包含这些指定类目的坐标。

时间格式又不对

有眼尖的小伙伴发现了一个小问题。
我们给的时间是 yyyy-mm-dd hh:mm:ss的格式
但是刚刚发现展示的是 hh:ss mm-dd
格式和我们预期的不符合

xAxis 配置项 axisLabel下的formatter 转换时间格式

通过查询echarts的文档。
我们发现 xAxis.axisLabel.formatter 可以做到对格式进行转换。
formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 

对于时间轴（type: 'time'），formatter 的字符串模板支持3种形式：
1.字符串模板：简单快速实现常用日期时间模板，string 类型
2.回调函数：自定义 formatter，可以用来实现复杂高级的格式，Function 类型
3.分级模板：为不同时间粒度的标签使用不同的 formatter，object 类型
我发现使用 字符串模板 模板是不行的。分级模板没有试过。
官网推荐使用字符串模板，如果可以使用成功。
我们就不需要在写一个方法进行转化了。
但是很遗憾，失败了。可能是用的方式错误吧

字符串模板是失败的

字符串模板是失败的原因

本来我已经失望了。
结果小脑袋灵光一闪，猜测有没有可能是版本的原因。
我果断去切换到5的版本
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
果然字符串模板显示正常了
模板字符串的详细使用地址是：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter

字符串模板转化时间格式【推荐】

 xAxis: {
  // xAxis的下不在设置data属性共享时间`
  type: 'time',
  splitLine: { show: false },
  lineStyle: {
    width: 2
  },
  axisTick: {
    show: false
  },
  axisLabel:{
    // 更改x轴文字颜色的配置
    textStyle: {
      color: '#717782'
    },
    // 设置坐标轴上的时间格式 --使用的是模板字符串
    // formatter: "{yyyy}-{MM}-{dd}", 得到的 label 形如：'2020-12-02'
    formatter: '{yyyy}-{MM}-{dd} \n{HH}:{mm}:{ss}',

    showMinLabel: true,
    showMaxLabel: true // 固定显示X轴的最后一条数据
  },
  // 更改x轴线的颜色
  axisLine: {
    lineStyle: {
      color: '#D2DBE6;',
      width: 1 // x轴线的宽度
    }
  },
},

使用回调函数转化时间格式

function backTime(value){
  let date = new Date(value);  
  // 获取年份、月份和日期  
  let year = date.getFullYear();  
  let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
  let day = date.getDate();  

  let hours = date.getHours();  
  let minutes = date.getMinutes();  
  let seconds = date.getSeconds(); 
    
  // 格式化月份和日期为两位数（不足两位时补零）  
  month = month < 10 ? '0' + month : month;  
  day = day < 10 ? '0' + day : day;  

  hours = hours < 10 ? '0' + hours : hours;  
  minutes = minutes < 10 ? '0' + minutes : minutes;  
  seconds = seconds < 10 ? '0' + seconds : seconds;  
  
  // 返回格式化后的字符串  
  return year + '-' + month + '-' + day + ' ' +
         hours + ':' + minutes + ':' + seconds;
}

xAxis: {
  // xAxis的下不在设置data属性共享时间
  type: 'time',
  splitLine: { show: false },
  lineStyle: {
    width: 2
  },
  axisTick: {
    show: false
  },
  axisLabel:{
    // 更改x轴文字颜色的配置
    textStyle: {
      color: '#717782'
    },
    // 设置坐标轴上的时间格式
    formatter: function (value) {  
      console.log('时间戳',value )
      // 将时间转换为 我们需要的格式 ，这里的value是一个时间戳
      return backTime(value)
    },
    showMinLabel: true,
    showMaxLabel: true // 固定显示X轴的最后一条数据
  },
  // 更改x轴线的颜色
  axisLine: {
    lineStyle: {
      color: '#D2DBE6;',
      width: 1 // x轴线的宽度
    }
  },
},

特别提醒： type: 'time'的时候，
formatter : function (value) { }
中的value是一个时间戳

更改tooltip的时间格式

tooltip: {
  trigger: 'axis',
  formatter: (c) => {
    let str = ''
    let temp = {
      showTime: '', // 时间
      marker: '', // 颜色
      seriesName: '', // legend名称
      valueData: '', // 数值
      setWidthSpan: '',
    }
    c.forEach((item) => {
      temp.showTime = item.data[0]
      temp.marker = item.marker
      temp.seriesName = item.seriesName 
      temp.valueData = item.value[1] 
      temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
      str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
    })
    return temp.showTime + '<br />' + str
  },
},

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多条折线图</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 900px;height: 400px;"></div>
</body>
<script>

  function backTime(value){
    let date = new Date(value);  
    // 获取年份、月份和日期  
    let year = date.getFullYear();  
    let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
    let day = date.getDate();  

    let hours = date.getHours();  
    let minutes = date.getMinutes();  
    let seconds = date.getSeconds(); 
      
    // 格式化月份和日期为两位数（不足两位时补零）  
    month = month < 10 ? '0' + month : month;  
    day = day < 10 ? '0' + day : day;  

    hours = hours < 10 ? '0' + hours : hours;  
    minutes = minutes < 10 ? '0' + minutes : minutes;  
    seconds = seconds < 10 ? '0' + seconds : seconds;  
    
    // 返回格式化后的字符串  
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
  }
  let myChart = echarts.init(document.querySelector('div'))
  let option = {
    // 设置的是标题
    title: {
      text: '折线图'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (c) => {
        let str = ''
        let temp = {
          showTime: '', // 时间
          marker: '', // 颜色
          seriesName: '', // legend名称
          valueData: '', // 数值
          setWidthSpan: '',
        }
        c.forEach((item) => {
          temp.showTime = item.data[0]
          temp.marker = item.marker
          temp.seriesName = item.seriesName 
          temp.valueData = item.value[1] 
          temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
          str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
        })
        return temp.showTime + '<br />' + str
      },
    },
    legend: {
      data: ['邮件', '短信']
    },
    // 网格间距设置
    grid: {
      left: '30px',
      right: '60px',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      // xAxis的下不在设置data属性共享时间`
      type: 'time',
      splitLine: { show: false },
      lineStyle: {
        width: 2
      },
      axisTick: {
        show: false
      },
      axisLabel:{
        // 更改x轴文字颜色的配置
        textStyle: {
          color: '#717782'
        },
        // 设置坐标轴上的时间格式
        formatter: function (value) {  
          console.log('时间戳',value )
          // 将时间转换为 JavaScript 日期对象  
          return backTime(value)
        },
        showMinLabel: true,
        showMaxLabel: true // 固定显示X轴的最后一条数据
      },
      // 更改x轴线的颜色
      axisLine: {
        lineStyle: {
          color: '#D2DBE6;',
          width: 1 // x轴线的宽度
        }
      },
    },
    yAxis: {
      type: 'value'
    },
    // 数据
    series: [
      { 
        "name": "邮件", 
        "type": "line", 
        "symbol": "rect",
        "connectNulls": true,
        "showAllSymbol": true, 
        // 让每一条折线拥有数据自己的时间
        "data": [ 
          [ "2023-12-04 09:50:07", "0.137"],
          [ "2023-12-04 09:55:07", "0.147"],
          [ "2023-12-04 10:00:07", "0.137"],
          [ "2023-12-04 10:05:07", "0.163"],
          [ "2023-12-04 10:10:07", "0.150"], 
          [ "2023-12-04 10:15:07", "0.143"], 
          [ "2023-12-04 10:20:07", "0.133"],
          [ "2023-12-04 10:25:07", "0.147"], 
          [ "2023-12-04 10:30:07", "0.147"],
          [ "2023-12-04 10:35:07", "0.143"],
          [ "2023-12-04 10:40:07", "0.140"], 
          [ "2023-12-04 10:45:07", "0.150"], 
          [ "2023-12-04 10:50:07", "0.143"],
        ], 
        "unit": "%", 
        "markPoint": { 
          "symbol": "rect",
          "symbolSize": "12",
          "label": { "show": false },
          "tooltip": { "triggerOn": "click", "trigger": "item" }, 
        }
      },
      { 
        "name": "短信", 
        "type": "line", 
        "symbol": "rect", 
        "connectNulls": true, 
        "showAllSymbol": true, 
          "data": [ 
            [ "2023-12-04 09:50:07", "0.8"],
            [ "2023-12-04 09:52:07", "1.23"],
            [ "2023-12-04 10:41:07", "0.140"], 
            [ "2023-12-04 10:42:07", "0.140"], 
            [ "2023-12-04 10:45:07", "0.140"], 
            [ "2023-12-04 10:49:07", "0.150"], 
            [ "2023-12-04 10:50:07", "0.143"],
          ], 
          "unit": "%", 
          "markPoint": { 
            "symbol": "circle",
            "symbolSize": "12", 
            "label": { "show": false } 
          } 
      } 
    ]
  };
  myChart.setOption(option);
</script>
</html>
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解