react echarts 关系图每隔四秒钟切换数据

最新推荐文章于 2024-03-12 15:22:05 发布

新宇最优秀

最新推荐文章于 2024-03-12 15:22:05 发布

阅读量480

点赞数

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/tendernessxy/article/details/111633324

版权

本文介绍如何在React应用中使用ECharts库创建关系图，并每隔四秒钟自动切换图表数据，虽然力导向图的样式未能完美展示。

摘要由CSDN通过智能技术生成

实现效果：
在这里插入图片描述

// 双多边关系图谱
// 定义数据
const configs = {
   
    0: {
   
        data: [{
   
            name: '巴基斯坦',
            draggable: true,
            //  centerralPoint为引入的图片名称 我这里没有引入过来
            // symbol: 'image://' + centralPoint,
            itemStyle: {
   
                color: "yellow"
            }
        }, {
   
            name: '阿富汗',
            draggable: true,
        }, {
   
            name: '哈萨克斯坦',
            draggable: true,
        }, {
   
            name: '吉尔吉斯斯坦',
            draggable: true,
        }, {
   
            name: '乌兹别克斯坦',
            draggable: true,
        }, {
   
            name: '印度',
            draggable: true,
        }, {
   
            name: '伊朗',
            draggable: true,
        }, {
   
            name: '土耳其',
            draggable: true,
        }, {
   
            name: '中国',
            draggable: true,
        }, {
   
            name: '苏丹',
            draggable: true
        }, {
   
            name: '新加坡',
            draggable: true
        }, {
   
            name: '南非',
            draggable: true,
        }],
        links: [{
   
            source: '巴基斯坦',
            target: '阿富汗',
            value: '巴士服务协议'
        }, {
   
            source: '巴基斯坦',
            target: '哈萨克斯坦',
            value: '四边协定'
        }, {
   
            source: '巴基斯坦',
            target: '吉尔吉斯斯坦',
            value: '四边协定'
        }, {
   
            source: '巴基斯坦',
            target: '乌兹别克斯坦',
            value: '公路运输双边协定'
        }, {
   
            source: '巴基斯坦',
            target: '印度',
            value: '巴士服务协议'
        }