vchart地图

echart

echart版本：4.04

json包

echarts.registerMap('shanghai', geoJson);
//注册json地图
let myMap = echarts.init(document.getElementById('myMap'));
//初始化
var types=echarts.getMap('shanghai').geoJson.features;
//重要，否则不显示

其它：https://blog.csdn.net/shaxiaozilove/article/details/79274772

百度地图扩展

可以在百度地图上展现可视化。

<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak="></script>

require('echarts');
require('echarts/extension/bmap/bmap');
option = {
    // 加载 bmap 组件
    bmap: {
        // 百度地图中心经纬度
        center: [120.13066322374, 30.240018034923],
        // 百度地图缩放
        zoom: 14,
        // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
        roam: true,
        // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
        mapStyle: {}
    },
    series: [{
        type: 'scatter',
        // 使用百度地图坐标系
        coordinateSystem: 'bmap',
        // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
        data: [ [120, 30, 1] ]
    }]
}
// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());

页面引入百度地图api时

• chrome控制台报出问题

A Parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517145936, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.

页面渲染完成后使用了document.write()
这是不被允许的， 根据上面的提示，把api引用url改成了

http://api.map.baidu.com/getscript?v=2.0&ak=XXXXXXXXXXXXXXXXXXXXXXXXX&services=&t=XXXXXXXXXXXXXXXX

• 百度未授权使用地图API

可能是因为您提供的密钥不是有效的百度LBS开放平台密钥，或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥：http://lbsyun.baidu.com/apiconsole/key#。

解决方法：

调用百度地图时，需要提供 访问应用（AK）。对于个人测试，可以登录百度开发平台（http://lbsyun.baidu.com/），注册个人开发版的账号。然后创建“浏览器端”的应用（如下图），勾选相应服务，设置白名单，创建完成后，则看到AK密钥。

相关工具

自定义地图代码：http://api.map.baidu.com/lbsapi/createmap/index.html
vue Map：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

模拟迁徙

线特效的配置：http://echarts.baidu.com/option.html#series-lines.effect
姓氏迁徙图：http://gallery.echartsjs.com/editor.html?c=xHJr-qVeWl

所有带有尾迹特效的图表需要单独放在一个层，也就是需要单独设置 zlevel，同时建议关闭该层的动画（animation: false）。不然位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。

长春市公交图：http://gallery.echartsjs.com/editor.html?c=xS170NCrSZ

• 官网案例：

  小飞机：var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

  路径换成你想要的图片路径

var path=‘image：//你的图片路径’ 
effect：
{ symbol：path }

http://www.w3school.com.cn/svg/index.asp
- 飞机次数

 effect: { 
 show: true, 
 period: 6, 
 trailLength: 0.7, 
 color: '#fff', 
 symbolSize: 3,// 设置动态线的粗细 
 loop: false, // 设置只飞行一次 
 trailLength: 0.3 // 设置尾巴长度 }

• 问题：当拖动百度地图时，在基础echars实例中配置的title，legend，visualmap都会出现剧烈的抖动现象（唯一的发现是如果地图上加载了大量的点，或是动画，它们就不会抖了），在ie浏览器上更是会出现连scatter和custom都抖动的情况。
  方案：https://tieba.baidu.com/p/5284980126?pid=110910466062&cid=0&red_tag=2785998948#110910466062
  迁徙图和视觉组件是分别实例化的。这是那个可以拖动的视觉映射组件minScale、maxScale你得提前算出来

var rangeChart = echarts.init(document.getElementById("mapRange"));
rangeChart.setOption(option = {
visualMap: {
type: 'continuous',
min: minScale,
max: maxScale,
realtime: false,
calculable: true,
color: ['rgba(7,253,25,1)', 'rgba(7,253,25,0.9)', 'rgba(7,253,25,0.8)',
'rgba(7,253,25,0.7)', 'rgba(7,253,25,0.6)', 'rgba(7,253,25,0.5)',
'rgba(7,253,25,0.4)', 'rgba(7,253,25,0.1)'],
textStyle: {visualMap: {
min: 0,
max: 100,
calculable: true,
color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
textStyle: {
color: '#fff'
}
},
color: '#fff'
}
}, formatter: function (v) {
console.log(v);
return v + "%";
}, series: [{
type: 'lines',
data: [],
large: true,
largeThreshold: 100
}]
});
//手柄选择完毕事件
rangeChart.on("datarangeselected", function (params) {
minScale = params.selected[0];
maxScale = params.selected[1];
drowCityMap("cityMap");//重新渲染地图上的数据
});