ECharts的map的常用配置

4,039 阅读1分钟

ECharts的map的一些常见配置

基础配置(主要地图上画样式)

{
    "series": [
        {
            "type": "map",
            "mapType": "cityJson",
            "label": {
                "normal": {
                    "show": true,
                    "color": "#EEE",
                    "position": "inside",
                    "fontSize": 14
                }
            },
            "itemStyle": {
                "borderColor": "#A9D3FF",
                "borderWidth": 1,
                "shadowBlur": 2,
                "shadowColor": "#7bdaee",
                "areaColor": "#0A2552"
            },
            "emphasis": {
                "itemStyle": {
                    "areaColor": "#1E88E5"
                }
            },
            "data": [
                {
                    "name": "徐州",
                    "label": {
                        "formatter": "{name|{b}}\n{img|  }\n{temp|15℃-28℃}",
                        "rich": {
                            "name": {
                                "color": "#FFFFFF",
                                "fontSize": 14,
                                "align": "left",
                                "fontWeight": "bold",
                                "padding": [
                                    10,
                                    0,
                                    0,
                                    20
                                ]
                            },
                            "temp": {
                                "color": "#FFFFFF",
                                "fontSize": 14,
                                "align": "left",
                                "padding": [
                                    10,
                                    0,
                                    10,
                                    0
                                ]
                            },
                            "img": {
                                "width": 40,
                                "height": 40,
                                "backgroundColor": {
                                    "image": "img/01.png"
                                }
                            }
                        }
                    },
                    "itemStyle": {
                        "areaColor": "#406FEA"
                    }
                },
            ]
        }
    ]
}

常用的工具

ECharts官网 url:echarts.apache.org/zh/index.ht…

地图编辑工具,可以合并地图区域 url:mapshaper.org/
(参考:segmentfault.com/q/101000001…

地图选择器,可以获取区县的GeoJson url:datav.aliyun.com/tools/atlas…

最后类似这样: