echarts 中国地图分地区:华中 华北 华南 华东 等

地图分地区展示

代码下载地址:map_area地图分地区展示

<!DOCTYPE html>
<html style="height: 100%">
<head>
   <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
   <div id="container" style="height: 100%"></div>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
   <script type="text/javascript" src="china.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
   <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    function randomData() {
        return Math.round(Math.random()*1000);
    }

    option = {
        title: {
            text: '总数:1565476',
            subtext: '',
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:['车辆']
        },
        visualMap: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本,默认为数值文本
            calculable: true
        },
        dataRange: {
            x: '-1000px',//图例横轴位置
            y: '-1000px',//图例纵轴位置
            orient: 'horizontal',
            min: 0,
            max: 55000,
            text: ['高', '低'],           // 文本,默认为数值文本
            splitList: [
                {start: 1, end: 1, color: '#225a69'},
                {start: 2, end: 2, color: '#368299'},
                {start: 3, end: 3, color: '#507c83'},
                {start: 4, end: 4, color: '#98cae0'},
                {start: 5, end: 5, color: '#b8dcea'},
                {start: 6, end: 6, color: '#dfeef3'},
                {start: 7, end: 7, color: '#c0bebf'},
                {start: 8, end: 8, color: '#f2f5f6'},
                {start: 9, end: 9, color: '#f2f5f6'},
                {start: 10, end: 10, color: '#f2f5f6'},
            ],
            splitNumber: 0
        },
        series: [
            {
                name: '车辆',
                type: 'map',
                mapType: 'china',
                showLegendSymbol : false,
                roam: false,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: { 
                    normal: {
                        lineStyle: { type: 'solid', color:'#000' },
                        label: { 
                            fontSize:16,
                            lineHeght:16,
                            height:16,
                            color:'#000',
                            show: true,
                            formatter:function(params){
                                if(params.name == '台湾' || params.name == '澳门' || params.name == '香港' ){
                                  return '';
                                }
                                params.name = params.name.substring(0,2);
                                return params.name+":"+params.data.percent//+"\r\n"+params.data.val+"\r\n"+"Top"+params.value;
                            }, 
                        }
                    } 
                    
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data:[
                    {name: '华东地区',value: 1,val:561,percent:'35.85%'  },
                    {name: '华北地区',value: 2,val:306,percent:'19.60%' },
                    {name: '华南地区',value: 3,val:274,percent:'17.55%'  },
                    {name: '华中地区',value: 4,val:241,percent:'15.40%'  },
                    {name: '西南地区',value: 5,val:108,percent:'6.91%'  },
                    {name: '西北地区',value: 6,val:53,percent:'3.41%'},
                    {name: '东北地区',value: 7,val:19,percent:'1.27%'  },
                    {name: '台湾', value: 8,percent:'' },
                    {name: '香港', value: 9,percent:'' },
                    {name: '澳门', value: 10,percent:'' },
                ]
            }
        ]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    </script>
</body>
</html>

echarts 地图分区的demo很多,希望能对小伙伴有帮助

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容