redburning 2023-04-21 14:25 采纳率: 50%
浏览 23
已结题

echarts 显示的时间范围

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

img

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-04-21 19:39
    关注
    • 你可以看下这个问题的回答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效果展示问题的解决。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月1日
  • 已采纳回答 4月23日
  • 创建了问题 4月21日

悬赏问题

  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路