echarts非表示リレーショナルマップ内のノードのクラス
以前echartsでリレーショナルマップを実装した後、ボタンをクリックしてデータの種類を隠すことができるかどうかを考えていました.もともとlegendで実現したいと思っていましたが、公式サイトの例を見ると、彼らはlegendを使うのが便利ですが、私のニーズとは少し違うので、自分でこのような機能を実現する方法を考えました.アイデアは以下の通りです:複数の配列を定義して、それらを使ってある種類のデータを詰めて、私達がこの種類のデータを隠す必要がある時これらのデータを全体のデータの中からこのデータを詰めるための配列の中に移動して、しかし私達はデータを回復する必要がある時このパケットのデータを全体のデータの中に移動することができます.総じてdataを修正して、図を描き直して、少し空間と時間を浪費します...次は例です.
PS:category値を使用し、category値で削除するかどうかを判断します.これは単純なdemoにすぎず、必要に応じて機能を修正したり追加したりすることができます.上のコードを直接コピーすれば走り出すことができます.
個人学習の心得は,大物の指導を歓迎する.
Title
var datas=[];//
var links=[];//
var cage0=[];//cage 0
var cage1=[];//cage 1
var cage2=[];//cage 2
datas.push({
name: ' ',
symbolSize: 120,
draggable: true,
category: 0,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 6,
shadowBlur: 20,
shadowColor: '#04f2a7',
color: '#001c43',
}
}
},
{
name: ' ',
symbolSize: 100,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
category: 1,
},
{
name: ' ',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#04f2a7',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: ' ',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: ' ',
symbolSize: 80,
category: 1,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: ' ',
symbolSize:100,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43',
}
},
},
{
name: ' ',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#b457ff',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#b457ff',
color: '#001c43'
}
},
},
{
name: ' ',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
category: 2,
},
{
name: ' ',
symbolSize:80,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
category: 2,
},
{
name: ' ',
symbolSize:80,
category: 2,
itemStyle: {
normal: {
borderColor: '#82dffe',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#04f2a7',
color: '#001c43'
}
},
});
links.push({
source: ' ',
target: ' '
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
},
{
source: ' ',
target: ' ',
value: 'DNA',
},{
source: ' ',
target: ' '
});
$(function () {
var myChart = echarts.init(document.getElementById('OdfMes'));
option = {
backgroundColor: '#1a4377',
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
color:['#83e0ff','#45f5ce','#b158ff'],
series: [
{
type: 'graph',
layout: 'force',
force:{
repulsion:1000,
edgeLength:50
},
roam: true,
label: {
normal: {
show: true
}
},
data: datas,
links: links,
lineStyle: {
normal: {
opacity: 0.9,
width: 5,
curveness: 0
}
},
categories:[
{name: '0'},
{name: '1'},
{name: '2'}
]
}
]
}
myChart.setOption(option);
//
//
//
myChart.on('click', function (params) {
if(params.name==" "){
for(var i=0;i<datas.length;i++){
if(datas[i].category==2){
//alert(datas[i].name);
cage2.push(datas[i]);
datas.splice(i,1);
i=i-1;//ps， datas.splice(i,1) ， category=2
// delete datas[i];
}
}
//
myChart.setOption({
series: [{
data: datas,
links: links
}]
});
}
if(params.name==" "){
datas.push.apply(datas,cage2);
cage2.length=0;// ，
//
myChart.setOption({
series: [{
data: datas,
links: links
}]
});
}
})
})
PS:category値を使用し、category値で削除するかどうかを判断します.これは単純なdemoにすぎず、必要に応じて機能を修正したり追加したりすることができます.上のコードを直接コピーすれば走り出すことができます.
個人学習の心得は,大物の指導を歓迎する.