echarts 时间线

echarts 时间线（下面附有完整示例）

在这里插入图片描述

实现思路

1、先分析图片是由一根y轴线和每个小节点组成；
2、可以看出时间线是没有轴的，所以将“ xAxis ”属性隐藏；
3、y轴是没有分割线的所以隐层“ yAxis ”中的“ splitLine ”区域中的分隔线；
4、同时也要隐藏y轴刻度“ yAxis ”中的“ axisTick ”隐藏；
5、可以看出时间线实在中间，设置“ grid ”属性中“ left ”和“ right ”个50%；
6、series采用line折线图类型来加载
6、在就是改变时间线上的颜色就可以了；

完整示例

1.1 index.html


<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 10px">
  <div id="container" style="width: 50%;height: 70%;margin-top: 10px"></div>

  <script type="text/javascript" src="./echarts.min.js"></script>

  <script type="text/javascript">
    
    // 存储数据
    var list = [];
    // 存储经过处理的series数据值
    var seriesList = [];
    // 存储y轴数据
    var yarr = [];
    // 设置渐变颜色
    var color1 = "#3fff00"; // 红色
    var color2 = "#00f3ff"; // 蓝色
    var colors;
    // 获取数据
    fetch('./data.json')
      .then(response => response.json()) // 将响应转换为JSON
      .then(data => {
        list = data;
        // 计算颜色
        colors = generateColorsBetween(color1, color2, list.length).reverse();
        map();
        initChsrt();
      })
    // 梳理数据
    function map() {
      list.map((item, index) => {
        seriesList.push({
          time: item.time, //时间
          title: item.title, //标题
          value: 0,
          label: {
            show: true,
            lineHeight: 20,
            align: index % 2 == 0 ? "left" : "right",
            padding: 20,
            position: index % 2 == 0 ? "left" : "right",
            formatter: function (params) {
              return `{bolder|${params.data.time}}\n{b|${params.data.title}}`;
            },
            rich: {
              bolder: {
                fontWeight: 700,
                color:colors[index],
              },
              b:{
                color:colors[index],
              }
            },
          },
        });
        yarr.push(`${item.time}`);
      });
    }
    // 加载时间线
    function initChsrt() {
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var option = {
        backgroundColor:"#000",
        animation:true,
        grid: {
          top: "5%",
          left: "50%",
          right: "30%",
          bottom: "5%",
        },
        legend: {
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            padding: [2, 0, 0, 0],
          },
        },
        xAxis: { // 隐藏x轴
          show: false,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false },
          min: 0,
          max: 0,
        },
        yAxis: { //设置y样式
          type: "category", //使用类目轴
          axisLine: {
            show: true,
            lineStyle: {
              width: 10, //修改Y轴线宽
              color: { // 线颜色设置为线性渐变
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: color1 // 0% 处的颜色
                }, {
                  offset: 1, color: color2 // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
            },
            symbol: ['none', 'arrow'],//设置箭头线
            symbolSize: [20, 20], //修改箭头大小
            symbolOffset: [0, 10] // 调整箭头位置
          },
          // 隐层坐标轴刻度
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          // 隐层grid 区域中的分隔线
          splitLine: {
            show: false,
          },
          // 隐藏坐标轴刻度标签
          axisLabel: {
            show: false,
          },
          data:[...yarr,'']
        },
        series: [
          {
            type: "line", 
            symbol: 'arrow', //设置箭头
            symbolSize: 10, //节点样式大小
            itemStyle: { //修改节点样式颜色
              color: function (vlaue, params) {
                return colors[vlaue.dataIndex]
              },
            },
            // 设置箭头朝向
            symbolRotate: function (value, params) {
              if (params.data.label && params.data.label.align == 'left') {
                return 270
              } else {
                return 90
              }
            },
            // 设置箭头偏移位置（不设置会全部跑到线中间）
            symbolOffset: function (value, params) {
              if (params.data.label && params.data.label.align == 'left') {
                return [12, 0]
              } else {
                return [-12, 0]
              }
            },
            hoverAnimation: false,
            legendHoverLink: false,
            data: [...seriesList, { value: -0, symbol: "none" }],//结束都加个空值
            lineStyle: {
              opacity: 0 //节点之间连线设置透明
            },
            tooltip:{
              formatter:function(params) {
                console.log(params)
              }
            }
          },
        ],
      };

      myChart.setOption(option);

      window.addEventListener('resize', myChart.resize);
    }

    // 计算颜色
    function generateColorsBetween(color1, color2, count) {
      let colors = [];
      let rgb1 = hexToRgb(color1);
      let rgb2 = hexToRgb(color2);
      let stepR = (rgb2.r - rgb1.r) / (count - 1);
      let stepG = (rgb2.g - rgb1.g) / (count - 1);
      let stepB = (rgb2.b - rgb1.b) / (count - 1);

      for (let i = 0; i < count; i++) {
        let r = Math.round(rgb1.r + stepR * i);
        let g = Math.round(rgb1.g + stepG * i);
        let b = Math.round(rgb1.b + stepB * i);
        colors.push(rgbToHex(r, g, b));
      }

      return colors;
    }

    function hexToRgb(hex) {
      let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }

    function rgbToHex(r, g, b) {
      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

  </script>
</body>

</html>

1.2 data.json

[
    {
      "time": "2024-01-11",
      "title": "这是标题这是标题"
    },
    {
      "time": "2024-01-31",
      "title": "这是标题这是标题这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-02-22",
      "title": "这是标题这是标题这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-03-06",
      "title": "这是标题这是标题这是标题"
    },
    {
      "time": "2024-03-09",
      "title": "这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-03-18",
      "title": "这是标题这是标题这是标题"
    },
    {
      "time": "2024-04-26",
      "title": "这是标题这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-04-29",
      "title": "这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-05-09",
      "title": "这是标题"
    },
    {
      "time": "2024-05-15",
      "title":
        "这是标题这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-05-30",
      "title":
        "这是标题这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-06-30",
      "title": "这是标题这是标题这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-07-24",
      "title": "这是标题这是标题这是标题这是标题"
    },
    {
      "time": "2024-08-01",
      "title": "这是标题这是标题"
    },
    {
      "time": "2024-08-17",
      "title": "这是标题这是标题这是标题这是标题这是标"
    },
    {
      "time": "2024-08-30",
      "title": "这是标题这是标题这是标题这是标题这是标题"
    }
  ]