问题:
echarts.connect
链接结果-图形断开连接。
工作示例:
http://twitterwatcher.com- 尝试隐藏负面推文,并观察其余图表的行为。
用于复制的简化代码:
在echarts 4.2.1上测试
/**
* example showing the issue with connect and legend
*/
let initGraphs = () => {
let x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let y1 = [],
y2 = [],
y3 = [],
y4 = [],
y5 = [],
y6 = [];
let max = 2;
let min = -2;
for (i = 0; i <= 10; i++) {
y1.push(Math.random() * (+max - +min) + +min)
y2.push(Math.random() * (+max - +min) + +min)
y3.push(Math.random() * (+max - +min) + +min)
y4.push(Math.random() * (+max - +min) + +min)
y5.push(Math.random() * (+max - +min) + +min)
y6.push(Math.random() * (+max - +min) + +min)
}
let options = {
legend: {
data: ["A", "B", "C"],
top: '17%',
},
xAxis: {
type: 'value',
data: x
},
yAxis: {
type: 'value'
},
series: [{
name: "A",
data: y1,
type: 'line',
smooth: true
},
{
name: "B",
data: y2,
type: 'line',
smooth: true
}, {
name: "C",
data: y3,
type: 'line',
smooth: true
},
],
tooltip: {
trigger: "axis",
showDelay: 0,
}
}
let options2 = {
xAxis: {
type: 'value',
data: x
},
yAxis: {
type: 'value'
},
series: [{
name: "C",
data: y3,
type: 'line',
smooth: true
}],
tooltip: {
trigger: "axis",
showDelay: 0,
}
}
let options3 = {
legend: {
data: ["E", "F"],
top: '17%',
},
xAxis: {
type: 'value',
data: x
},
yAxis: {
type: 'value'
},
series: [{
name: "E",
data: y5,
type: 'line',
smooth: true
},
{
name: "F",
data: y6,
type: 'line',
smooth: true
}
],
tooltip: {
trigger: "axis",
showDelay: 0,
}
}
let chart1 = echarts.init(document.getElementById("graph1"));
chart1.setOption(options);
let chart2 = echarts.init(document.getElementById("graph2"));
chart2.setOption(options2);
let chart3 = echarts.init(document.getElementById("graph3"));
chart3.setOption(options3);
echarts.connect([chart1, chart2, chart3])
}
initGraphs();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<div>
<div class="graph graph1" id="graph1" style="width: 500px; height: 300px;"></div>
<div class="graph graph2" id="graph2" style="width: 500px; height: 300px;"></div>
<div class="graph graph3" id="graph3" style="width: 500px; height: 300px;"></div>
</div>