echart中国地图

Posted 2020-12-08 xhrr

<div class="chinaMap" id="chinaMap"></div>

    <script src="./china.js"></script>

　　http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4下载中国地图json文件

function chinaMap(){
        
            var data = [
                {name: ‘江西‘,selected: true,value:10},
                {name: ‘浙江‘,selected: true,value:10},
            ];
            
            var option = {
                tooltip: {
                    trigger: ‘item‘,
                    formatter: ‘{b}{c}‘,
                },
                series: [{
                    name: ‘中国‘,
                    type: ‘map‘,
                    mapType: ‘china‘,
                    selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: ‘#fff‘,
                            background: ‘#f00‘,
                            areaColor: ‘#E6E6E6‘,
                            color: ‘#163592‘,
                            label: {
                                show: false
                            }
                        },
                        emphasis: { // 也是选中样式
                            borderWidth: 2,
                            borderColor: ‘#fff‘,
                            areaColor: ‘#238DEC‘,
                            label: {
                                show: true,
                                textStyle: {
                                    color: ‘#fff‘
                                }
                            }
                        }
                    },
                    //此为加载的数据
                    data: data
                }]
            };

        
        var myChart4 = echarts.init(document.getElementById(‘chinaMap‘));
        myChart4.setOption(option);
    }