使用echarts3 做出类似迁徙图的效果如下:
但是点击图例的时候,并没有将图例所对应的系列隐藏,该系列对应的线还存在,只是该系列对应的effect特效静止不动了。
核心代码如下:
internal.bigHieChart = echarts.init($("#bigHie")[0]);
var option = {
tooltip: {
trigger: "item",
formatter: "{b}"
},
geo: {
map: "xiamen",
label: {
normal: {
show: true,
color: "#c1bfbf"
},
emphasis: {
show: true,
color: "#c1bfbf"
}
},
selectedMode: "single",
roam: true,
itemStyle: {
normal: {
areaColor: "#003874",
borderColor: "#111",
borderWidth: "1.4"
},
emphasis: {
areaColor: "#0157af",
borderWidth: "1.5",
fontSize : 14
}
}
},
legend : {
left:10,
selectedMode : true,
textStyle : {
color : "#bbe7ff",
fontFamily : "微软雅黑",
fontWeight : "lighter"
},
data : [
{ name : "上转" },
{ name : "下转" }
]
},
series: [{
name : "上转",
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 6,
symbol: "pin",
symbolSize: 7,
//trailLength: 0
},
lineStyle: {
normal: {
color: "#00cb95",
width: 1,
opacity: 0.4,
curveness: 0.5
}
},
data: flowData.hosFlowList
},
{
name : "下转",
type: "lines",
zlevel: 3,
effect: {
show: true,
period: 6,
symbol: "pin",
symbolSize: 7,
// trailLength: 0
},
lineStyle: {
normal: {
color: "#F58158",
width: 1,
opacity: 0.4,
curveness: 0.3
}
},
data: flowData.phipFlowList
},
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 4,
rippleEffect: {
period: 0,
scale:0,
brushType: "stroke" //stroke fill
},
symbolSize: 3,
label: {
normal: {
show: false,
position: "right",
formatter: "{b}"
}
},
symbol: "circle",
itemStyle: {
normal: {
color: "#c8efef",
borderColor: "#c8efef"
}
},
data: flowData.orgList
}
]
};
internal.bigHieChart.setOption(option);
internal.bigHieChart.on("click", function (params) {
if (typeof params.region == "object") {
if (params.region.selected) {
internal.bigHieChart.dispatchAction({
type: "geoSelect",
name: params.name
});
} else {
internal.bigHieChart.dispatchAction({
type: "geoUnSelect",
name: params.name
});
}
}
});
internal.bigHieChart.on("geoselected", function (params) {
req.getHieAmount(params.name, internal.setHieAmount);
});
internal.bigHieChart.on("geounselected", function (params) {
req.getHieAmount("", internal.setHieAmount);
});
},
我将图例相关代码拷贝在
http://gallery.echartsjs.com/editor.html?c=xr1XLo-V5g
这个上面尝试图例的点击事件一切正常。
不清楚为什么自己写的就会报错。
求教各位,谢谢
换成最新版本的echarts就可以了。。