苏州ECharts Gallery

20:11:45图表已生成
代码
//var jiangsu = "/asset/get/s/data-1545717074162-HoS4KynOn.json";
var jiangsu = "/asset/get/s/data-1557368914117-YDdLgQCLJ.json";
// $(function() {
// var myChart = echarts.init(document.getElementById('echar'));
$.get(jiangsu, function(tjJson) {
    echarts.registerMap('jiangsu', tjJson);


    var geoCoordMap = {
       '': [120.61562, 31.349619],

        '吴中区': [120.3971099, 31.232765],
        '相城区': [120.601043, 31.4802088],
        '姑苏区': [120.602416, 31.3043684],
        '工业园区': [120.75347, 31.36770],
        '高新区': [120.3840637, 31.3723991],
        '吴江区': [120.605850, 30.9787865],
        '常熟市': [120.74852, 31.658156],
        '张家港市': [120.6216430, 31.9195301],
        '昆山市': [120.958137, 31.381925],
        '太仓市': [121.184692, 31.5949131],
    };

    var goData = [{
            name: '',
            value: 10
        },{
            name: '吴中区',
            value: 9
        },{
            name: '相城区',
            value: 8
        },{
            name: '姑苏区',
            value: 7
        },{
            name: '工业园区',
            value: 6
        },{
            name: '高新区',
            value: 5
        },{
            name: '吴江区',
            value: 4
        },{
            name: '常熟市',
            value: 3
        },{
            name: '张家港市',
            value: 2
        },
        {
            name: '昆山市',
            value: 1
        },
        {
            name: '太仓市',
            value: 1
        }
    ];
    var goTotal=0;//计算总人数
    goData.forEach(function(item,i){
        goTotal+=item.value;
    })
    //值控制圆点大小
    var backData = [{
        name: '常熟市',
        value: 75
    }, {
        name: '昆山市',
        value: 95
    }];

    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: 2,
                    opacity: 0.4,
                    curveness: 0.2, //弧线角度
                    color: '#00eaff'
                }
            },
            data: convertData(item[0], item[1])
        },  {
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: { //涟漪特效
					period: 4, //动画时间，值越小速度越快
					brushType: 'stroke', //波纹绘制方式 stroke, fill
					scale: 4 //波纹圆环最大限制，值越大波纹越大
				},
				label: {
					normal: {
						show: false,
						position: 'right', //显示位置
						offset: [10, 110], //偏移设置
						formatter: function(params){//圆环显示文字
							return params.data.name;
						},
						fontSize: 13
					},
					emphasis: {
						show: true
					}
				},
				symbol: 'circle',
				symbolSize: function(val) {
					return 5; //圆环大小
				},
				itemStyle: {
					normal: {
						show: false,
						color: '#00eaff'
					}
				},
			      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,
                    color: '#fff',
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbol: 'circle',
            //圆点大小
            symbolSize: function(val) {
                return 5;
            },
            itemStyle: {
                normal: {
                    show: true,
                     color:'#00eaff'
                }
            },
            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 25;
            },
           	"symbol": 'path://M512 39.384615l169.353846 295.384615 342.646154 63.015385-240.246154 248.123077L827.076923 984.615385l-315.076923-145.723077L196.923077 984.615385l43.323077-334.769231L0 401.723077l342.646154-63.015385L512 39.384615', 
				

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

        })

    });
var type = {
            type: 'map',
            map: 'jiangsu',
              geoIndex: 0,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        data:goData,
        };
 series.unshift(type);
    option = {
        backgroundColor: '#050b29',
     
    
        tooltip: {
            trigger: 'item',
            formatter: "{b}"
        },
       visualMap: {
                show: false,
                min: 0,
				max: 10,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [0],
                textStyle: {
                    fontSize: '25'
                },
                inRange: {
                //   color: ['#91639b', '#a677a4', '#8a637b', '#a677a4', '#91639b',
                //     '#7e58c5',
                //     '#a54aa5', '#EE82EE', '#aa53c5', '#9400D3',
                //     '#eb3600'
                // ]
				    color: ['#5193ff', '#5193ff', '#5193ff', '#5193ff', '#5193ff',
                    '#7B68EE',
                    '#4682B4', '#07e9fd','#7ac6f5',  '#7e58c5',
                    '#eb3600'
                ]


                }
            },
      //地图相关设置
            geo: {
        map: 'jiangsu',
        zoom: 1.2,
    
        roam: true,
           label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#fbfbfb',
                borderColor: '#b9b4b7'

            },
            emphasis: {
                areaColor: '#05ff09'
            }
        }
    },
        series: series
    };
    myChart.setOption(option);
})
// })
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
