Echarts 实现图表自动轮播功能

59 阅读 0 评论 39 点赞

我是靠谱客的博主谨慎台灯，最近开发中收集的这篇文章主要介绍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);