当我点击图例的时候,我只是想单纯的显示或者隐藏该系列的图形,而图表不用动态的响应刷新,不希望重新生成图表,不希望坐标有任何的变化
配置项如下
var data = [
[1, 1, 2.5, 2.5],
[2.5, 2.5, 3, 3],
[3, 3, 4, 4],
[4, 4, 5, 5],
[5, 5, 15, 15]
];
var data3 = [
[4, 4, 5, 5],
[5, 5, 15, 15]
];
var data1 = [
[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]
]
function renderItem(params, api) {
//debugger;
var categoryIndex = api.value(0);
var start = api.coord([api.value(0), api.value(1)]);
var end = api.coord([api.value(2), api.value(3)]);
var height = api.size([0, 1])[1] * 0.6;
return {
type: 'rect',
// shape: echarts.graphic.clipRectByRect({
// x: start[0],
// y: 160,
// //width: end[0] - start[0],
// width: 5,
// height: height
// }, {
// x: params.coordSys.x,
// y: params.coordSys.y,
// width: params.coordSys.width,
// height: params.coordSys.height
// }),
shape: {
x: start[0],
y: 160,
//width: end[0] - start[0],
width: 5,
height: height
},
style: api.style()
};
}
function renderItem1(params, api) {
//debugger;
var categoryIndex = api.value(0);
var start = api.coord([api.value(0), api.value(1)]);
var end = api.coord([api.value(2), api.value(3)]);
var width = api.size([0, 1])[0];
return {
type: 'rect',
// shape: echarts.graphic.clipRectByRect({
// x: start[0],
// y: start[1],
// width: end[0] - start[0],
// //width: width,
// height: 5
// }, {
// x: params.coordSys.x,
// y: params.coordSys.y,
// width: params.coordSys.width,
// height: params.coordSys.height
// }),
shape: {
x: start[0],
y: start[1],
width: end[0] - start[0],
//width: width,
height: 5
},
style: api.style()
};
}
function renderItem2(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(0), api.value(1)]);
var end = api.coord([api.value(2), api.value(3)]);
var width = api.size([0, 1])[0];
//debugger;
return {
type: 'rect',
// shape: echarts.graphic.clipRectByRect({
// x: start[0] + Math.abs(end[0] - start[0]),
// y: start[1] - Math.abs(end[1] - start[1]),
// width: 3,
// height: Math.abs(end[1] - start[1]) + 5
// }, {
// x: params.coordSys.x,
// y: params.coordSys.y,
// width: params.coordSys.width,
// height: params.coordSys.height
// }),
shape: {
x: start[0] + Math.abs(end[0] - start[0]),
y: start[1] - Math.abs(end[1] - start[1]),
width: 3,
height: Math.abs(end[1] - start[1]) + 5
},
style: api.style()
};
}
function renderItem3(params, api) {
//debugger;
var categoryIndex = api.value(0);
var start = api.coord([api.value(0), api.value(1)]);
var width = api.size([0, 1])[0];
return {
type: 'circle',
// shape: echarts.graphic.clipRectByRect({
// cx: start[0],
// cy: start[1],
// r: 100
// }, {
// x: params.coordSys.x,
// y: params.coordSys.y,
// width: params.coordSys.width,
// height: params.coordSys.height
// }),
shape: {
cx: start[0],
cy: start[1],
r: 10
},
style: api.style()
};
}
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['管架', '闸阀']
},
grid: {
height: 300
},
xAxis: {
type: 'value'
//data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
},
yAxis: {
type: 'value'
},
series: [{
type: 'custom',
name: '管架',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: 3,
y: 3
},
data: data3
}, {
type: 'custom',
renderItem: renderItem1,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: 3,
y: 3
},
data: data
}, {
type: 'custom',
renderItem: renderItem2,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: 3,
y: 3
},
data: data
}, {
type: 'custom',
name: '闸阀',
renderItem: renderItem3,
itemStyle: {
normal: {
opacity: 0.8
}
},
data: data1
}
// , {
// type: 'scatter',
// name: '闸阀',
// data: data1
// }
]
};