IcsKb/web2/NFine.Web/Content/Cust017/js/area_echarts.js

function echarts_map() {
var myChart = echarts.init(document.getElementById('map_1'));
var guangdong = "js/44.json";
$.get(guangdong, function(tjJson) {
    echarts.registerMap('guangdong', tjJson);
    myChart.setOption({
        series: [{
            type: 'map',
            map: 'guangdong'
        }]
    });

    var geoCoordMap = {
			'珠海市': [113.353986,21.924979]
            ,'广州市':[113.480637,23.125178]
            ,'湛江市':[110.264977,21.274898]
            ,'茂名市':[110.919229,21.659751]
            ,'阳江市':[111.825107,21.859222]
            ,'云浮市':[112.044439,22.629801]
            ,'肇庆市':[112.472529,23.051546]
            ,'江门市':[112.894942,22.090431]
            ,'中山市':[113.382391,22.321113]
            ,'佛山市':[113.022717,22.828762]
            ,'清远市':[113.051227,23.685022]
            ,'韶关市':[113.601224,24.820603]
            ,'河源市':[114.897802,23.746266]
            ,'梅州市':[116.117582,24.099112]
            ,'潮州市':[116.692301,23.661701]
            ,'揭阳市':[116.255733,23.143778]
            ,'汕头市':[116.708463,22.87102]
            ,'汕尾市':[115.364238,22.774485]
            ,'深圳市':[114.085947,22.347]
            ,'东莞市':[113.746262,22.746237]
            ,'惠州市':[114.412599,23.079404]
    };
    var goData = [{
            name: '河源市',
            value: 32
        },{
            name: '湛江市',
            value: 24
        },{
            name: '韶关市',
            value: 20
        },{
            name: '汕尾市',
            value: 18
        },{
            name: '揭阳市',
            value: 18
        }
    ];
    var goTotal=0;//计算总人数
    goData.forEach(function(item,i){
        goTotal+=item.value;
    })

    var planePath = 'arrow';

    var convertData = function(name, data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var fromCoord = geoCoordMap[name];
            var toCoord = geoCoordMap[data[i].name];
            if (fromCoord && toCoord) {
                res.push({
                    //对换即可调整方向
                    coords: [fromCoord, toCoord]
                });
            }
        }
        return res;
    };
    var series = [];
    [
        ['广州市', goData],
       // ['徐州', backData],

    ].forEach(function(item, i) {
        series.push({
            name: item[0],
            type: 'lines',
            zlevel: 2,
            //线特效配置
            effect: {
                show: true,
                period: 6,
                trailLength: 0.1,
                symbol: planePath, //标记类型
                symbolSize: 10
            },
            lineStyle: {
                normal: {
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2, //弧线角度
                    color: 'rgba(255,255,255,.1)'
                }
            },
            data: convertData(item[0], item[1])
        }, {  //终点
            name: item[0],
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            label: {
                normal: {
                    show: true,
                     color: 'rgba(255,255,255,.5)',
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbol: 'circle',
            //圆点大小
            symbolSize: function(val) {
                return val[2]*50 / goTotal;
            },
            itemStyle: {
                normal: {
                    show: true
                }
            },
            data: item[1].map(function(dataItem) {
                console.log(dataItem)
                return {
                    name: dataItem.name,
                    value: geoCoordMap[dataItem.name].concat([dataItem.value])
                };
            })

        }, {//起点
            name: 'item[0]',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function(val) {
                return 15;
            },
            symbol: 'circle',

            itemStyle: {
                normal: {
                    show: true
                }
            },
            data: [{
                name: item[0],
                value: geoCoordMap[item[0]].concat([100])
            }]

        })

    });


    option = {
      //  backgroundColor: '#FDF7F2',
        title: {
       text: '业务覆盖',
       subtext: '2016-2018年数据',
        left: 'center',
		top:'0',
        textStyle: {
            color: '#fff',
			fontSize:24,
            }
        },
       
        tooltip: {
            trigger: 'item',
            formatter: "{b}"
        },
        //线颜色及飞行轨道颜色
        visualMap: {
            show: false,
            min: 0,
            max: 100,
            color: ['#fff']
        },
        //地图相关设置
        geo: {
            map: 'guangdong',
            //视角缩放比例
            zoom: 1,
            //显示文本样式
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            //鼠标缩放和平移
            roam: false,
            itemStyle: {
            normal: {
                areaColor: '#4256ff',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2539f5'
            }
        }
        },
        series: series
    };
	 
         myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
})

      
        // 使用刚指定的配置项和数据显示图表。
      
    }
		




 $(window).load(function(){
echarts_map()
 })  
// })