请问 Echarts可以做到下图这个效果吗?
就是当 hover 柱子的时候,显示出了时间范围跨度是 3 months 21 days,并且标注出了起始时间和结束时间,起始时间在右侧显示,结束时间在左侧显示(这一点也很重要,因为一般较长的时间会很容易在 echarts 中越出图的边界)。
echarts 显示的时间范围
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
关注 - 你可以看下这个问题的回答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效果展示问题的解决。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 dir815漏洞反弹shell失败
- ¥15 支付宝小程序云函数登录获取user_id失败
- ¥50 python for 循环速度慢
- ¥15 CubeMX生成的代码用keil编译有报错
- ¥15 Stata链式中介效应代码修改
- ¥15 pip安装PyAV报错
- ¥15 latex投稿显示click download
- ¥15 请问读取环境变量文件失败是什么原因?
- ¥15 在若依框架下实现人脸识别
- ¥15 添加组件无法加载页面,某块加载卡住