借花献佛ECharts Gallery

20:11:45图表已生成
代码
var option_force = {
    tooltip: {
        show: true,
        trigger: 'item',
        "formatter": function(params) {
            if (params.dataType === 'edge') {
                return '';
            }
            return params.name + '<br>' + '目录数：' + params.value;
        },
        position: ['10%', '70%'],
        padding: 0,
        backgroundColor: 'rgba(2,133,255,0.6)'
    },
    series: [{
        type: 'graph',
        symbolSize: 40,
        itemStyle: {
            color: '#038dcb'
        },
        roam: true,
        layout: 'force',
        label: {
            normal: {
                show: true,
                position: 'outside',
                formatter: '{b}',
                color: '#fff'
            },
            emphasis: {
                show: true,
                formatter: '{b}',
                fontSize: 16
            }
        },
        emphasis: {
            itemStyle: {
                color: '#80d5fb',
                borderColor: 'rgba(255, 255, 255, 0.3)',
                borderWidth: 1,
                shadowColor: 'rgba(255, 255, 255, 0.8)',
                shadowBlur: 40
            },
            symbolSize: 60,
        },
        data: [{
            name: 'myMe',
            value: 10,
            symbolSize: [100, 167],
            label: {
                show: false,
                color: '#e9ea2c',
                position: 'bottom',
            },
            symbol: 'image://img/tianjin.png'
        }, {
            name: '工商部',
            value: 101
        }, {
            name: '教育部',
            value: 141
        }, {
            name: '卫计委',
            value: 114
        }, {
            name: '食药总局',
            value: 10
        }, {
            name: '省工商局',
            value: 18
        }, {
            name: '标准化院',
            value: 20
        }, {
            name: '省国税局',
            value: 21
        }, {
            name: '省高法',
            value: 28
        }, {
            name: '省食药监局',
            value: 10
        }, {
            name: '省水利厅',
            value: 65
        }, {
            name: '省人社',
            value: 57
        }, {
            name: '省住建厅',
            value: 96
        }, {
            name: '省编办',
            value: 25
        }, {
            name: '省质监局',
            value: 63
        }, {
            name: '省水利厅1',
            value: 10
        }, {
            name: '省人社1',
            value: 20
        }, {
            name: '省住建厅1',
            value: 40
        }, {
            name: '省编办1',
            value: 10
        }, {
            name: '省质监局1',
            value: 25
        }, {
            name: '省水利厅2',
            value: 63
        }, {
            name: '省人社2',
            value: 46
        }, {
            name: '省住建厅2',
            value: 10
        }, {
            name: '省编办2',
            value: 75
        }, {
            name: '省质监局2',
            value: 10
        }, {
            name: '工商部1',
            value: 29
        }, {
            name: '教育部1',
            value: 10
        }, {
            name: '卫计委1',
            value: 46
        }, {
            name: '食药总局1',
            value: 49
        }, {
            name: '省工商局1',
            value: 10
        }],
        force: {
            // initLayout: 'circular'
            // gravity: 0
            repulsion: 170,
            edgeLength: 180
        },
        links: [{
            source: 'myMe',
            target: '工商部'
        }, {
            source: 'myMe',
            target: '教育部'
        }, {
            source: 'myMe',
            target: '卫计委'
        }, {
            source: 'myMe',
            target: '食药总局'
        }, {
            source: 'myMe',
            target: '省工商局'
        }, {
            source: 'myMe',
            target: '标准化院'
        }, {
            source: 'myMe',
            target: '省国税局'
        }, {
            source: 'myMe',
            target: '省高法'
        }, {
            source: 'myMe',
            target: '省食药监局'
        }, {
            source: 'myMe',
            target: '省水利厅'
        }, {
            source: 'myMe',
            target: '省人社'
        }, {
            source: 'myMe',
            target: '省住建厅'
        }, {
            source: 'myMe',
            target: '省编办'
        }, {
            source: 'myMe',
            target: '省质监局'
        }, {
            source: 'myMe',
            target: '省水利厅1'
        }, {
            source: 'myMe',
            target: '省人社1'
        }, {
            source: 'myMe',
            target: '省住建厅1'
        }, {
            source: 'myMe',
            target: '省编办1'
        }, {
            source: 'myMe',
            target: '省质监局1'
        }, {
            source: 'myMe',
            target: '省水利厅2'
        }, {
            source: 'myMe',
            target: '省人社2'
        }, {
            source: 'myMe',
            target: '省住建厅2'
        }, {
            source: 'myMe',
            target: '省编办2'
        }, {
            source: 'myMe',
            target: '省质监局2'
        }, {
            source: 'myMe',
            target: '工商部1'
        }, {
            source: 'myMe',
            target: '教育部1'
        }, {
            source: 'myMe',
            target: '卫计委1'
        }, {
            source: 'myMe',
            target: '食药总局1'
        }, {
            source: 'myMe',
            target: '省工商局1'
        }]

    }]
};
myChart.setOption(option_force);
currentIndex = -1;
var time = setInterval(function() {
    var dataLen = option_force.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
}, 1000);
myChart.on('mouseover', function(params) {
    clearInterval(time);
});
myChart.on('mouseout', function(params) {
    time && clearInterval(time);
    time = setInterval(function() {
        var dataLen = option_force.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
    }, 1000);
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
