Echarts 实现图表自动轮播功能

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);
### ECharts 实现图表自动轮播效果 要实现基于 ECharts图表自动轮播功能,可以通过定时更新数据并重新渲染图表来完成。以下是具体方法以及示例代码: #### 初始化图表 首先初始化 ECharts 图表实例,并绑定窗口大小调整事件以确保响应式布局。 ```javascript // 假设 dom 是一个 HTML 元素的选择器 var myChart = echarts.init(document.getElementById('main')); window.onresize = function () { myChart.resize(); // 当浏览器窗口尺寸变化时重绘图表 }; ``` 此部分逻辑来源于站内引用[^2]。 #### 配置初始选项 定义一组用于展示的数据集,并设置默认的图表配置项。 ```javascript var dataSets = [ { name: '类别A', value: 10 }, { name: '类别B', value: 20 }, { name: '类别C', value: 30 } ]; var currentIndex = 0; // 轮播索引计数器 function updateData() { var option = { title: { text: '动态轮播示例', subtext: '当前显示第' + (currentIndex + 1) + '组数据' }, tooltip: {}, legend: [], series: [{ type: 'pie', radius: ['50%', '70%'], // 设置内外半径比例形成圆环图 label: { formatter: '{b}: {@value} ({d}%)' // 使用自定义标签格式化内容[^3] }, data: dataSets[currentIndex % dataSets.length], }] }; myChart.setOption(option); } ``` 上述代码片段中的 `formatter` 属性来自站内引用,它允许我们灵活控制饼图上的文字样式和位置。 #### 启动轮播机制 通过 JavaScript 的 `setInterval()` 方法创建周期性的回调函数,在每次调用中切换至下一组数据源。 ```javascript updateData(); setInterval(function () { currentIndex++; updateData(); }, 2000); // 每隔两秒更换一次数据显示 ``` 以上脚本实现了基本的功能需求——即每隔固定时间间隔改变所呈现的内容集合,从而达到视觉上连续播放的效果。 #### 总结说明 整个过程涉及到了几个核心概念和技术要点: - **ECharts API**: 如何正确初始化图表组件及其基础操作; - **DOM Resize Handling**: 动态适配不同屏幕分辨率下的视图表现; - **Dynamic Data Binding & Redraw Logic**: 数据驱动型界面设计原则的实际应用案例分析; 最终形成的解决方案不仅满足了原问题的要求,还兼顾了一定程度上的用户体验优化考量。 ---
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

qaakd

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

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

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

打赏作者

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

抵扣说明:

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

余额充值