Echarts 实现图表自动轮播功能

22 篇文章 0 订阅
2 篇文章 0 订阅
html部分:
<div id="lunbo" style="width:480px;height:280px;"></div>

js部分:

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

var option = {
    // color: ['#1e33ff', '#008fff', '#552de1', '#4f1577', '#50befe', '#c95be9', '#1221b4'],
    tooltip: {
        trigger: 'item',
        backgroundColor: 'none',
        textStyle: {
            fontSize: 12,
            fontFamily: 'Microsoft YaHei'
        },
        position: function (point, params, dom, rect, size) {
            $(dom).html('<div class="tip">\n' +
                '        <span class="name">' + params.name + '</span>\n' +
                '        <div class="num">' + params.value + '<span class="name">家</span></div>\n' +
                '    </div>');

            return 'inside'
        }
    },
    series: [
        {
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            label: {
                normal: {
                    show: false
                }
            },
            hoverOffset: 20,
            startAngle: 90,
            data: [
                {value: 335, name: '小型企业'},
                {value: 310, name: '一般工业企业'},
                {value: 234, name: '第三产业'},
                {value: 135, name: '建筑施工'},
                {value: 1548, name: '畜禽养殖业'},
                {value: 580, name: '污水处理厂'},
                {value: 400, name: '固废处置单位'}
            ]
        }
    ]
};
myChart.setOption(option);

//轮播展示
var currentIndex = -1;
setInterval(function() {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0, //表示series中的第几个data数据循环展示
        dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
}, 2000);
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
实现 ECharts 中 Tooltip 的自动轮播展示效果,可以通过设置 Tooltip 的 `trigger` 为 `'none'`,然后在 `formatter` 中自定义 Tooltip 的内容,并使用 JavaScript 的 `setInterval` 定时更新 Tooltip 的内容即可。 具体步骤如下: 1. 设置 `tooltip.trigger` 为 `'none'`,这样 Tooltip 不会跟随鼠标移动,而是需要手动触发。 ``` tooltip: { trigger: 'none', formatter: function(params) { // 定义 Tooltip 显示的内容 const tooltipList = [ `Tooltip 1: ${params[0].value}`, `Tooltip 2: ${params[1].value}`, `Tooltip 3: ${params[2].value}` ]; // 使用全局变量记录当前显示的 Tooltip 索引 if (typeof window.tooltipIndex === 'undefined') { window.tooltipIndex = 0; } else { window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length; } // 返回当前 Tooltip 的内容 return tooltipList[window.tooltipIndex]; } } ``` 2. 在 ECharts 初始化完成后,使用 JavaScript 的 `setInterval` 函数定时触发 Tooltip 显示,并使用 `dispatchAction` 方法更新 Tooltip 的内容。 ``` // 在 ECharts 初始化完成后,定时触发 Tooltip 显示 const chart = echarts.init(document.getElementById('chart')); chart.setOption(option); setInterval(() => { chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: window.tooltipIndex }); window.tooltipIndex = (window.tooltipIndex + 1) % option.series[0].data.length; }, 2000); ``` 需要注意的是,由于 Tooltip 的内容是通过 JavaScript 的定时器更新的,因此在配置 ECharts 图表时需要将 `tooltip.show` 设置为 `false`,避免默认的 Tooltip 显示与自定义的 Tooltip 冲突。 完整的 ECharts 配置代码如下: ``` option = { tooltip: { show: false, trigger: 'none', formatter: function(params) { const tooltipList = [ `Tooltip 1: ${params[0].value}`, `Tooltip 2: ${params[1].value}`, `Tooltip 3: ${params[2].value}` ]; if (typeof window.tooltipIndex === 'undefined') { window.tooltipIndex = 0; } else { window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length; } return tooltipList[window.tooltipIndex]; } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Value', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 在 ECharts 初始化完成后,定时触发 Tooltip 显示 const chart = echarts.init(document.getElementById('chart')); chart.setOption(option); setInterval(() => { chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: window.tooltipIndex }); window.tooltipIndex = (window.tooltipIndex + 1) % option.series[0].data.length; }, 2000); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qaakd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值