请教如何用echart3.0把迁移地图做出echart2的效果
echarts吧
全部回复
仅看楼主
level 1
YCIPL 楼主
http://echarts.baidu.com/echarts2/doc/example/map11.html 这个是echart2地图的效果,比起echarts3的迁移地图(http://echarts.baidu.com/demo.html#geo-lines),echarts2的其中一个优点就是地图的点和线能够根据value的大小变成不同的颜色。我看了下,echarts2的实现方法就是加入了dataRange,但是我在echart3加入dataRange的时候发现只有对应的点变了颜色,线的颜色还是老样子。我猜是因为echart3的线的data部分没有和value对应上,但是我不知道如何才能对应上?求教?
2017年03月28日 02点03分 1
level 1
YCIPL 楼主
我知道怎么做了。现在问题就是echart3的迁移地图能不能实现echart2的的炫光特效?
2017年03月28日 02点03分 2
level 1
楼主怎么做的?
2017年03月28日 10点03分 3
看四楼!
2017年03月28日 14点03分
如果是炫光效果,貌似echarts3.0不好做,我现在没找到方法能做的像echarts2那么炫光。
2017年03月28日 14点03分
level 1
YCIPL 楼主
把我发的echarts3的第159行的那个函数改成下面的(其实就只是加了个value属性而已)
var convertData = function (data) { //这里的data是上面3个数组
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]; //dataItem是上面数组的一项 比如 [{name:'衡水'},{name:'福州',value:95}]
var fromCoord = geoCoordMap[dataItem[0].name]; //dataItem[0]是{name:'衡水'}
var toCoord = geoCoordMap[dataItem[1].name]; //dataItem[1]是{name:'福州',value:95}
//fromCoord和toCoord分别是起点,终点的经纬度
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord
}, {
coord: toCoord,
value: dataItem[1].value
}
]);
}
}
return res;
/*
res = [
[{coord: fromCoord},{coord: toCoord, value: 人口流出量}],
......
......
];
*/
};
还有一个就是我后来发现echart3虽然兼容echarts2版本的dataRange,但是最好还是使用visualMap来实现。
把echart2的dataRange改成下面部分,可以加入echart3的option里面
visualMap: {
type: 'continuous',
min: 0,
max: 100,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
}
},
2017年03月28日 14点03分 4
level 1
而且感觉3为了精简把2里有些图形带的功能给干了
2017年03月29日 07点03分 6
1