Question

ECharts强制布局。

期望

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

截屏包括chrome dev

问题描述

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

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

我使用Chart.setOption(option)来刷新链接，但似乎出错了

有人可以帮助我吗？

有也许两种方法可以解决此问题，

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

代码

主要设置

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);

event.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);
});

单击选定的事件图例后如何刷新ECharts

0 个答案: