ECharts 地图实现

ECharts 地图实现

　　var myChart = echarts.init(document.getElementById('jyyddt_echarts'));
    myChart.showLoading();

　　//$.get第一个参数，引入json文件
    $.get('../../statics/jslib/echarts/json/jilin.json', function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap('jilin', geoJson);
        myChart.setOption(option = {
            title: {
                text: '吉林各地市州',
                subtext: '副标题',
                textStyle: {//主标题文本样式
                    fontSize: 40
                },
                subtextStyle: {//副标题文本样式
                    fontSize: 20
                }
            },
            geo: {
                map: 'jilin',
                // roam: true, //是否支持拖动
                itemStyle: {
                    normal: {
                        borderColor: '#4b9b9c',
                        borderWidth: 6 //设置外层边框
                    }
                }
            },
            series: [
                {
                    type: 'map',
                    // roam: true,  //是否支持拖动
                    mapType: 'jilin',
                    geoIndex: 1,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 22,
                                color: '#333'
                            }
                        },
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle: {
                                fontSize: 30,
                                color: "#333"
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            borderWidth: 1
                        }
                    },
                    data: [
                        {
                            name: '长春市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#3496c2',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '吉林市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#65a16f',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '四平市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#3496c2',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '辽源市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#3496c2',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '通化市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#65a16f',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '白山市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#65a16f',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '松原市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#3496c2',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '白城市',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#3496c2',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        },
                        {
                            name: '延边朝鲜族自治州',
                            itemStyle: {
                                normal: {
                                    // areaColor: 'rgba(0,0,0,0)',
                                    borderColor: '#65a16f',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    areaColor: 'rgba(0,0,0,0)',
                                    borderWidth: 3
                                }
                            }
                        }
                    ]
                }
            ]
        });
    });