echarts自动轮播并且高亮,如下是柱状图的演示例子,鼠标移入移除清除计时器,已封装好方法

文章介绍了如何在ECharts图表中实现自动轮播提示功能,包括参数设定、事件处理和滚动条控制,以及在Vue项目中的使用示例。

在这里插入图片描述

下面是js文件,直接引入后使用 – 使用方法在后面~

/**
 *  echarts tooltip 自动轮播
 *  @param dom     // 图表的dom
 *  @param myChart  // 初始化echarts的实例
 *  @param option   // 指定图表的配置项和数据
 *  @param length      // 类目数量(原因:循环时达到最大值后,使其从头开始循环), x轴有几项就填几
 *  @param pageSize      // 一页显示的数据数目
 *  @param timeObj     // 轮播定时器记录
 *  @param time     // 轮播间隔时长
 */
// 比如length是12,一页显示9个数据 == pageSize
export function autoHover(dom, myChart, option, length, pageSize, timeObj, time) {
  function circleHandler() {
    count = count % length;
    let center = Math.floor(pageSize / 2);  // 4
    if (pageSize < length) {  // 因为一页显示不满 所以才显示滚动条
      // 如果当前下标在中间值后面 则 滚动条不动
      if (count <= center) {
        console.log("count <= center", count)
        // 先滚动条走到最刚开始 再高亮
        option.dataZoom[0].endValue = pageSize - 1;
        option.dataZoom[0].startValue = 0;
        myChart.setOption(option);
        setHighLight(myChart, count);
      } else if (count > center && option.dataZoom[0].endValue != (length - 1)) {  // 如果当前小标大于中间值并且滚动条还没到最后,走滚动条
      	option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        myChart.setOption(option);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0, //serieIndex的索引值   可以触发多个
          dataIndex: count-1
        });
        setHighLight(myChart, count);
      } else if (count < (length - 1) && option.dataZoom[0].endValue == (length - 1)) {  // 如果滚动条到最后
        option.dataZoom[0].endValue = (length - 1);
        option.dataZoom[0].startValue = (length -1) - (pageSize - 1) ;
        myChart.setOption(option);
        setHighLight(myChart, count);
      } else if (count == (length - 1)) {  // 下标结束了
        setHighLight(myChart, count);
      }
    } else {
      setHighLight(myChart, count);
    }
    count++;
    if (count >= length) {
      count = 0
    }
  }
  var count = 0;
  timeObj.timeTicket && clearInterval(timeObj.timeTicket);
  timeObj.timeTicket = null;
  timeObj.timeTicket = setInterval(circleHandler, time);
  // 设置移入移除
  dom.addEventListener("mouseover", () => {
    console.log("dom==mouseover")
    timeObj.timeTicket && clearInterval(timeObj.timeTicket);
  })
  dom.addEventListener("mouseout", () => {
    console.log("dom==mouseout")
    timeObj.timeTicket && clearInterval(timeObj.timeTicket);
    timeObj.timeTicket = setInterval(circleHandler, time);
  })
}
function setHighLight(myChart, count) {
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0, //serieIndex的索引值   可以触发多个
    dataIndex: count
  });
  myChart.dispatchActio
ECharts是一个基于JavaScript的强大数据可视化库,它支持创建各种图表类型,包括柱状图。在柱状图中,如果你希望实现标签提示信息的自动轮播以及鼠标悬停效果,可以利用ECharts提供的交互功能。 - **标签提示信息自动轮播**:ECharts的`label`组件允许自定义展示内容,你可以设置`formatter`函数来自定义显示哪些信息。通过定时器或者事件驱动的方式,当鼠标移动到某根柱子上时,可以动态切换或更新相关的标签提示内容,达到轮播的效果。 - **鼠标移入移出效果**:ECharts的`emphasis`属性可用于高亮选中的柱子,当鼠标移入时,对应的柱子会变大、颜色加深等视觉增强;鼠标移出则恢复原样。你可以通过配置`emphasis`部分来定制这个效果,比如改变颜色、调整透明度等。 为了实现这些效果,你需要了解一些基本的ECharts API,如`echarts.setOption`用于更新配置项,`event.on`绑定鼠标事件监听器,以及`formatter`回调函数的使用。下面是一个简单的示例代码: ```javascript var myChart = echarts.init(document.getElementById('main')); // 示例配置 var option = { // ...其他配置 series: [{ name: '销售', type: 'bar', data: [50, 20, 36, 10], label: { formatter: function (params) { return params.name + '<br>' + params.value; }, show: true, position: 'right' }, emphasis: { itemStyle: { color: 'red' } } }], //... 其他选项 }; myChart.setOption(option); // 模拟鼠标移入移出和标签轮播的简单例子 myChart.on('mouseover', function (params) { // 更新标签提示信息 }); myChart.on('mouseout', function () { // 移除标签提示信息的轮播 }); // 定义一个定时器模拟轮播 setInterval(function() { if (/* 条件判断当前是否应该切换标签 */){ // 更新label的formatter或切换标签 } }, 3000); // 例如每3秒轮播一次 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值