散点图有重复value的情况下，datazoom使用中异常echarts scatter配置项内容和展示
效果上问题已经解决了，代码中注释的2行加上也就是保证没有重复点的话是正常的，但是注释掉2行的话，运行后移动或者缩放会出现多余的点；另外之前用nodes.push([ data[result[i].ID]!=undefined ? data[result[i].ID][0] : x[result[i].CENGJI]++, data[result[i].ID]!=undefined ? data[result[i].ID][1] : -result[i].CENGJI, result[i].ID, result[i].FID, result[i].CENGJI ]);这种形式也是正常的，后来需求要用value这种方式，想问具体是不是数据的问题，为什么用value这种会异常，根源问题是啥呢？
配置项如下
var result = [{id:"3014001",cengji:1,fid:""},{id:"232962",cengji:2,fid:"3014001"},{id:"232961",cengji:2,fid:"3014001"},{id:"564851",cengji:2,fid:"3014001"},{id:"1235511",cengji:2,fid:"3014001"},{id:"122711",cengji:2,fid:"3014001"},{id:"179620",cengji:3,fid:"5648111"},{id:"12355",cengji:2,fid:"122711"},{id:"12355",cengji:2,fid:"12356"},{id:"179620",cengji:3,fid:"122711"},{id:"12356",cengji:3,fid:"122711"},{id:"123555",cengji:3,fid:"122711"},{id:"5648111",cengji:3,fid:"122711"},{id:"124111",cengji:3,fid:"122711"},{id:"12355",cengji:3,fid:"122711"},{id:"122701",cengji:3,fid:"122711"},{id:"123561",cengji:3,fid:"122711"},{id:"1227111",cengji:3,fid:"122711"},{id:"122121",cengji:3,fid:"122711"},{id:"564881",cengji:3,fid:"122711"},{id:"564871",cengji:3,fid:"122711"},{id:"564891",cengji:3,fid:"122711"},{id:"2329611",cengji:3,fid:"122711"},{id:"123551",cengji:3,fid:"122711"},{id:"564861",cengji:3,fid:"122711"},{id:"564821",cengji:3,fid:"122711"},{id:"564891",cengji:3,fid:"564861"},{id:"564821",cengji:3,fid:"123551"},{id:"123551",cengji:3,fid:"2329611"},{id:"5648111",cengji:3,fid:"122711"},{id:"124111",cengji:3,fid:"123561"},{id:"12355",cengji:3,fid:"1227111"},{id:"122121",cengji:3,fid:"564891"},{id:"564881",cengji:3,fid:"2329611"},{id:"564871",cengji:3,fid:"123551"},{id:"301402",cengji:4,fid:"179620"},{id:"301400",cengji:4,fid:"179620"},{id:"12270",cengji:4,fid:"12356"},{id:"12271",cengji:4,fid:"12356"},{id:"56481",cengji:4,fid:"12356"},{id:"232964",cengji:4,fid:"12356"},{id:"232963",cengji:4,fid:"2329611"},{id:"56486",cengji:4,fid:"2329611"},{id:"232963",cengji:4,fid:"56486"},{id:"12270",cengji:4,fid:"12271"},{id:"12271",cengji:4,fid:"1796201"},{id:"301402",cengji:4,fid:"301400"},{id:"1",cengji:4,fid:"5648111"},{id:"2",cengji:4,fid:"5648111"},{id:"3",cengji:4,fid:"5648111"},{id:"4",cengji:4,fid:"5648111"},{id:"5",cengji:4,fid:"5648111"},{id:"6",cengji:4,fid:"5648111"},{id:"7",cengji:4,fid:"5648111"},{id:"8",cengji:4,fid:"5648111"},{id:"9",cengji:4,fid:"5648111"},{id:"10",cengji:4,fid:"5648111"},{id:"11",cengji:4,fid:"5648111"},{id:"12",cengji:4,fid:"5648111"},{id:"13",cengji:4,fid:"5648111"},{id:"14",cengji:4,fid:"5648111"},{id:"15",cengji:4,fid:"5648111"},{id:"16",cengji:4,fid:"2329611"},{id:"17",cengji:4,fid:"5648111"},{id:"18",cengji:4,fid:"5648111"},{id:"19",cengji:4,fid:"5648111"},{id:"20",cengji:4,fid:"5648111"},{id:"21",cengji:4,fid:"5648111"},{id:"22",cengji:4,fid:"5648111"},{id:"23",cengji:4,fid:"5648111"},{id:"24",cengji:4,fid:"5648111"},{id:"25",cengji:4,fid:"5648111"},{id:"26",cengji:4,fid:"5648111"},{id:"27",cengji:4,fid:"5648111"},{id:"28",cengji:4,fid:"5648111"},{id:"29",cengji:4,fid:"5648111"},{id:"30",cengji:4,fid:"5648111"},{id:"31",cengji:4,fid:"5648111"},{id:"32",cengji:4,fid:"2329611"},{id:"33",cengji:4,fid:"2329611"},{id:"34",cengji:4,fid:"56483"},{id:"35",cengji:4,fid:"56483"},{id:"36",cengji:4,fid:"56483"},{id:"37",cengji:4,fid:"56483"},{id:"38",cengji:4,fid:"56483"},{id:"39",cengji:4,fid:"56483"},{id:"40",cengji:4,fid:"56483"},{id:"41",cengji:4,fid:"56483"},{id:"42",cengji:4,fid:"56483"},{id:"43",cengji:4,fid:"56483"},{id:"44",cengji:4,fid:"56483"},{id:"45",cengji:4,fid:"56483"},{id:"46",cengji:4,fid:"56483"},{id:"47",cengji:4,fid:"56483"},{id:"48",cengji:4,fid:"56483"},{id:"49",cengji:4,fid:"56483"},{id:"50",cengji:4,fid:"56483"},{id:"51",cengji:4,fid:"56483"},{id:"52",cengji:4,fid:"56483"},{id:"53",cengji:4,fid:"56483"},{id:"54",cengji:4,fid:"56483"},{id:"55",cengji:4,fid:"56483"},{id:"56",cengji:4,fid:"56483"},{id:"57",cengji:4,fid:"56483"},{id:"56483",cengji:3,fid:"122711"},{id:"12355",cengji:2,fid:"3014001"},{id:"1796201",cengji:3,fid:"122711"}];
var nodes=[];
var x=[0,0,0,0,0];
var data=[];
for(var i = 0; i < result.length; i++){
//if(data[result[i].id]===undefined){
nodes.push({
value:[data[result[i].id]!==undefined ? data[result[i].id].value[0] : x[result[i].cengji]++,
data[result[i].id]!==undefined ? data[result[i].id].value[1] : -result[i].cengji],
label: {},
itemStyle:{},
id:result[i].id,
fid:result[i].fid,
cengji:result[i].cengji
})
data[result[i].id]=nodes[nodes.length-1];
//}
}
var color = ['#a6c84c', '#ffa022', '#46bee9'];
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}]),
title: {
text: '1990 与 2015 年各国家人均寿命与 GDP'
},
legend: {
right: 10,
data: ['1990', '2015']
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
start: 100,
end: 0
},
{
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 100
},
{
type: 'inside',
yAxisIndex: [0],
start: 100,
end: 0
}
],
tooltip:{
trigger: 'item',
formatter: function(e){
return e.id;
}
},
animation:false,
series: [{
name: '1990',
data: nodes,
type: 'scatter',
symbolSize:20,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: false,
position: 'right',
formatter: function(e){
console.log(e);
return e.id;
}
}
},
itemStyle: {
normal: {
color: color[1]
}
},
},{
coordinateSystem :'cartesian2d',
name: ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[1],
width: 2,
curveness: 0.1,//0.2
}
},
data:
[{
coords: [[2,2], [4,4]]
}]
}]
};
截图如下
