echarts 显示的时间范围

Question

请问 Echarts可以做到下图这个效果吗？
就是当 hover 柱子的时候，显示出了时间范围跨度是 3 months 21 days，并且标注出了起始时间和结束时间，起始时间在右侧显示，结束时间在左侧显示（这一点也很重要，因为一般较长的时间会很容易在 echarts 中越出图的边界）。

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7624298
• 这篇博客也不错, 你可以看下echarts饼图实现自动轮播效果，鼠标覆盖时停止轮播，鼠标移出时继续轮播
• 除此之外, 这篇博客: 2020年，令人惊叹的Echarts！中的 echarts体验 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
  
  使用步骤（5大步骤）：
  1.引入echarts 插件文件到html页面中
  2.准备一个具备大小的DOM容器

  <div id="main" style="width: 600px;height:400px;"></div>
  

  3.初始化echarts实例对象

  var myChart = echarts.init(document.getElementById('main'));
  

  4.指定配置项和数据(option)

  var option = {
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
      }]
  };
  

  5.将配置项设置给echarts实例对象

  myChart.setOption(option);
  

• 以下回答由chatgpt基于相关博客总结生成:

  回答： 在Echarts中，通过hover鼠标悬浮在柱子上可以展示时间范围跨度。可以在series的itemStyle中设置label的formatter属性来实现，代码如下：

  series: [{
      type: 'bar',
      data: [{
              name: '柱子1',
              value: 100,
              startTime: '2022-01-01',
              endTime: '2022-01-10'
          },
          {
              name: '柱子2',
              value: 200,
              startTime: '2022-02-01',
              endTime: '2022-02-10'
          },
          {
              name: '柱子3',
              value: 300,
              startTime: '2022-03-01',
              endTime: '2022-03-10'
          }
      ],
      itemStyle: {
          normal: {
              label: {
                  show: true,
                  formatter: function(params) {
                      return params.name + '<br/>' + '起始时间：' + params.data.startTime + '<br/>' + '结束时间：' + params.data.endTime;
                  }
              }
          }
      }
  }]
  

  其中，通过在data中为每个柱子设置起始时间和结束时间，并在label的formatter属性中调用来展示时间范围跨度。注意，要在params.data中取出柱子数据的相关信息。

  另外，因为时间可能会超出图表边界，所以可以在formatter中根据鼠标悬浮位置来判断时间范围是否超出边界，在参数中加入坐标轴信息，判断悬浮位置并动态展示时间范围，代码如下：

  itemStyle: {
      normal: {
          label: {
              show: true,
              formatter: function(params) {
                  let xAxis = params[0].axisValue; // 鼠标所在柱子的x轴坐标
                  let data = params[0].data; // 鼠标所在柱子的数据
                  let startTime = data.startTime;
                  let endTime = data.endTime;
  
                  let divWidth = document.getElementById('chart').offsetWidth; // 图表容器宽度
                  let padding = 80; // 图表容器的padding
                  let interval = params[1].axis.axis.getInterval(); // x轴每个坐标的间距
                  let barWidth = interval * 0.7; // 柱子宽度为间距的70%
                  let maxNum = Math.floor((divWidth - padding) / interval); // 最多显示的柱子数
  
                  let index = params[0].dataIndex; // 当前鼠标所在柱子的索引
                  let start = index - Math.floor(maxNum / 2); // 确定起始柱子的索引
                  let end = start + maxNum - 1; // 确定终止柱子的索引
  
                  if (index < start) {
                      start = index;
                      end = start + maxNum - 1;
                      if (end >= params[0].axis.series[0].data.length) {
                          end = params[0].axis.series[0].data.length - 1;
                      }
                  } else if (index > end) {
                      end = index;
                      start = end - maxNum + 1;
                      if (start < 0) {
                          start = 0;
                      }
                  }
  
                  let content = params[0].name + '<br/>'; // 标签内容
  
                  let flag = false; // 是否超出边界的标志
                  let firstX = start * interval + padding + interval / 2 - barWidth / 2; // 第一个柱子的x坐标
                  let lastX = end * interval + padding + interval / 2 + barWidth / 2; // 最后一个柱子的x坐标
                  if (xAxis < firstX) { // 超过最左边的柱子
                      content += '起始时间：' + params[0].axis.series[0].data[start].startTime + '<br/>';
                      flag = true;
                  } else if (xAxis > lastX) { // 超过最右边的柱子
                      content += '结束时间：' + params[0].axis.series[0].data[end].endTime + '<br/>';
                      flag = true;
                  } else { // 在边界内，直接展示起始时间和结束时间
                      content += '起始时间：' + startTime + '<br/>' + '结束时间：' + endTime;
                  }
  
                  if (flag) { // 超出边界，则展示“时间范围”两个字
                      content += '<span style="color:#999;font-size:12px;">时间范围</span>';
                  }
  
                  return content;
              }
          }
      }
  }
  

  其中，通过获取图表容器宽度、padding值、x轴每个坐标的间距来计算最多显示的柱子数，以及展示起始时间和结束时间的位置，判断鼠标悬浮位置是否超出边界，如超出则展示“时间范围”两个字。可以根据需求来调整展示的格式和样式。

  值得注意的是，因为鼠标悬浮位置的计算和展示的逻辑比较复杂，所以建议封装成一个单独的方法来调用。最后调用echarts.init方法初始化图表并传入以上配置即可完成hover效果展示问题的解决。