Echarts graph图表节点重复不显示问题

昨天在做数据可视化的时候遇到一个Echarts的问题,这里特别记录一下。

像柱状图,折线图,地图等这些图表,Legend选项是和Series的name属性进行绑定的。这样的话我们就可以在图表中点击图例来筛选不同系列的数据。

但是在图谱(graph)中不是这样来实现的。假如我想实现下面这样的效果:

 

点击Java工程师会相应的显示或者隐藏Java相关的关键词,应该怎么做呢?

1、在Legend属性中添加Java工程师

    legend: [{
        data: ['Java工程师', 'Python工程师', 'Web工程师'],
    }],

2、在Series中添加categories:

    categories: [{
            name: 'Java工程师'
        },
        {
            name: 'Python工程师'
        },
        {
            name: 'Web工程师'
        }
    ]

3、在Series中的data属性中通过category属性进行绑定:

data: [{
    id: 0,
    name: '设计模式',
    category: 'Java工程师',
    symbolSize: 80,
    draggable: true
}]

根据我的经验,正常情况下,不需要id属性也可以正常显示。但是当节点数量大于12个的时候,不加id属性就会报错。

如果想要预览效果的话,可以访问Echarts Gallery,这里我先给出完整代码:

option = {
    legend: [{
        data: ['Java工程师', 'Python工程师', 'Web工程师'],
        top: '40px'
    }],
    series: [{
        type: 'graph',
        tooltip: {
           show: false
        },
        animationDurationUpdate: function(idx) {
            // 越往后的数据延迟越大
            return idx * 100;
        },
        animationEasingUpdate: 'bounceIn',

        categories: [{
                name: 'Java工程师'
            },
            {
                name: 'Python工程师'
            },
            {
                name: 'Web工程师'
            }
        ],

    layout: 'force',
    force: {
        repulsion: 200,
        edgeLength: 10
    },
    label: {
        normal: {
             show: true
        }
    },

    data: [{
            id: 0,
            name: '设计模式',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 1,
            name: 'spring',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 2,
            name: '框架',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 3,
            name: 'mysql',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 4,
            name: 'mongodb',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 5,
            name: 'ajax',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 6,
            name: 'python',
            category: 'Python工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 7,
            name: 'linux',
            category: 'Python工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 8,
            name: 'flask',
            category: 'Python工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 9,
            name: 'django',
            category: 'Python工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 10,
            name: 'mongodb',
            category: 'Python工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 11,
            name: 'mysql',
            category: 'Python工程师',
            symbolSize: 80,
            draggable: true
        },
       {
            id: 12,
            name: 'html',
            category: 'Web工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 13,
            name: 'web前端',
            category: 'Web工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 14,
            name: 'css',
            category: 'Web工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 15,
            name: 'javascript',
            category: 'Web工程师',
            symbolSize: 80,
            draggable: true
        },
        {
            id: 16,
            name: 'java',
            category: 'Java工程师',
            symbolSize: 80,
            draggable: true
        },
    ]
}]

        };

点个赞呗:程序员虾说 » Echarts graph图表节点重复不显示问题

赞 (2) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

请作者喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏