我在实际使用中需要实现点选或者框选然后与其他图表互动的效果(有复杂的映射关系,需要后台处理,不能简单使用echart的group),点选通过设置高亮的方法在散点图上可以实现,但是treemap的画面不响应手动控制高亮,请问有什么解决方法?
配置项如下
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
},
{
type: 'treemap',
data: [{
name: 'nodeA', // First tree
value: 10,
children: [{
name: 'nodeAa', // First leaf of first tree
value: 4
}, {
name: 'nodeAb', // Second leaf of first tree
value: 6
}]
}, {
name: 'nodeB', // Second tree
value: 20,
children: [{
name: 'nodeBa', // Son of first tree
value: 20,
children: [{
name: 'nodeBa1', // Granson of first tree
value: 20
}]
}]
}],
nodeClick: false
}]
};
var lastMouseOverIndex = null;
myChart.on('click', params => {
if (this.lastMouseOverIndex !== null) {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.lastMouseOverIndex
});
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 1,
dataIndex: this.lastMouseOverIndex
});
}
this.lastMouseOverIndex = this.lastMouseOverIndex == params.dataIndex ? null : params.dataIndex;
});
myChart.on('mouseout', params => {
if (this.lastMouseOverIndex !== null) {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: this.lastMouseOverIndex
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: this.lastMouseOverIndex
});
}
});