javascript - 点击事件 legendselectchanged 时如何刷新 ECharts

Question

ECharts 强制布局。

期待

我想添加一个新功能。当我切换画布顶部的类别按钮时，链接的选定名称将消失/出现。

截图包括 chrome dev

问题描述

我已经在互联网上检查了 echarts 文档和整个示例，顶部的类别按钮似乎只支持节点，而不支持强制布局中的链接。

所以我想也许我只能在单击按钮时更改链接数据。现在我得到了我想要更改的数据并且必须刷新画布（而不是刷新页面！）

我曾经Chart.setOption(option)想刷新链接，但似乎出错了

谁能帮我？

可能有两种方法可以解决这个问题，

1. 更改数据并刷新画布。
2. 也许类别按钮实际上可以切换链接消失或出现只是我不知道该怎么做。

代码

主要设置

var jdata; // ! api.js variable
const Version = 0.1;
const Version_string = `Version ${Version}`

// jQuery ajax data from back-end
const api_url = API_generator(2207, 56, 54, 1000);
GetJSON(api_url);

// init HTML dom
const Chart = echarts.init(document.getElementById('main'));
const backup_data = data_format(jdata);
const data = backup_data;
console.log(data);

var option = {
title: {
    text: 'lorem', // this field will connect to the book name
    subtext: Version_string,
    textStyle: {
        fontSize: 32,
        fontWeight: 'bolder'
    }, 
    subtextStyle : {
        fontSize : 15, 
        fontWeight : 'bolder'
    }

},
tooltip: {},
toolbox: {
    show: true,
    feature: {
        saveAsImage: {
            show: true,
            title: 'save image',
            type: 'png'
        },
        // ! dataView still have to fix
        dataView: {
            show: true,
            title: 'data',
            readOnly: false,
            lang: ['Detail Data Information', 'Close', 'refresh'],
            // TODO :  rewrite optionToContent
            // optionToContent: function(opt){
            //     var table = `<table class="dataViewTable">
            //                     <tbody>
            //                         <tr class="dataViewTr">
            //                             <td class="dataViewHead">123</td>
            //                         </tr>
            //                     </tbody>
            //                 </table>`;
            //     return table;
            // }
        }
    }
},
legend: {
    data :data.category
},
series: [{
    type: 'graph',
    layout: 'force',
    name: 'test',
    categories: data.category,
    nodes: data.nodes,
    links: data.links,
    itemStyle: {
        normal: {
            label: {
                show: true,
                textStyle: {
                    color: 'white'
                }
            }
        }
    },
    draggable: true,
    symbolSize: 40,
    roam: true,
    focusNodeAdjacency: true,
    force: {
        repulsion: 600,
        edgeLength: 180
    },
    // lineStyle: {
    //     normal: {
    //         opacity: 1,
    //         width: 1,
    //         curveness: 0.5,
    //         length: 500
    //     }
    // },
    edgeSymbol: ['arrow'],
    edgeLabel: {
        normal: {
            show: true,
            textStyle: {
                fontSize: 15
            },
            formatter: "{c}"
        }
    },
}]
}

// ! setup all option
Chart.setOption(option);

事件.js

Chart.on('legendselectchanged', (category_element) => {
const refresh_Chart = echarts.init(document.getElementById('main'));

var temp = data.links.filter(link => {
    for(category_element_selected_element of Object.entries(category_element.selected)){
        if(category_element_selected_element[0] === link.value && category_element_selected_element[1] == true){
            return link;
        }
        continue;
    }
})
console.log(temp);
});

标签： javascriptdata-visualizationecharts