echarts大屏可视化，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图

echarts加载全国、或某一省市（安徽省）（各个省市县）地图：
全国地图大屏demo实例下载
安徽省地图大屏demo实例下载

先看一下效果图

1.地图的生成：
mapJson.json的生成。访问网址http://datav.aliyun.com/portal/school/atlas/area_selector
根据自己想要加载的范围选择，如安徽省


然后点击右侧的网址复制到浏览器访问


得到地图json，保存为mapJson.json供调用。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
   echarts.registerMap('anhui', ../common/mapJson.json);
}));

2.地图加载html的地图窗口写好，然后用javascript调用即可：

function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map_1'));
var data = [
    {name: '安庆市', value: dataValue1[0].安庆市},
	{name: '亳州市', value: dataValue1[0].亳州市},
	{name: '蚌埠市', value: dataValue1[0].蚌埠市},
	{name: '滁州市', value: dataValue1[0].滁州市},
	{name: '池州市', value: dataValue1[0].池州市},
	{name: '阜阳市', value: dataValue1[0].阜阳市},
	{name: '淮南市', value: dataValue1[0].淮南市}, 
	{name: '淮北市', value: dataValue1[0].淮北市},
	{name: '黄山市', value: dataValue1[0].黄山市},
	{name: '合肥市', value: dataValue1[0].合肥市},
	{name: '六安市', value: dataValue1[0].六安市},
	{name: '马鞍山市', value: dataValue1[0].马鞍山市},
	{name: '宿州市', value: dataValue1[0].宿州市},
	{name: '铜陵市', value: dataValue1[0].铜陵市},
	{name: '芜湖市', value: dataValue1[0].芜湖市},
	{name: '宣城市', value: dataValue1[0].宣城市}, 
    {name: '砀山县', value: dataValue1[0].砀山县},
	{name: '广德市', value: dataValue1[0].广德市}
];
var geoCoordMap = {
    '安庆市':[117.043551,30.50883],
    '亳州市':[115.782939,33.869338],
	'蚌埠市':[117.363228,32.939667],
    '滁州市':[118.316264,32.303627],
	'池州市':[117.489157,30.656037],
    '阜阳市':[115.819729,32.896969],
	'淮南市':[117.018329,32.647574],
    '淮北市':[116.794664,33.971707],
	'黄山市':[118.317325,29.709239],
	'合肥市':[117.283042,31.86119],
    '六安市':[116.507676,31.752889],
	'马鞍山市':[118.507906,31.689362],
    '宿州市':[116.984084,33.633891],
	'铜陵市':[117.816576,30.929935],
    '芜湖市':[118.376451,31.326319],
	'宣城市':[118.757995,30.945667],
	'砀山县':[116.351113,34.426247],
    '广德市':[119.417521,30.893116]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
   // backgroundColor: '#404a59',
    tooltip : {
        trigger: 'item',
		formatter: function (params) {
              if(typeof(params.value)[2] == "undefined"){
              	return params.name + ' : ' + params.value;
              }else{
              	return params.name + ' : ' + params.value[2];
              }
            }
    },
  
    geo: {
        map: 'anhui',
        label: {
            emphasis: {
                show: true
            }
        },
        roam: false, //放大缩小
        itemStyle: {
            normal: {
                areaColor: '#2E9AFE',
                borderColor: '#002097'
            },
            emphasis: {
                areaColor: '#293fff'
            }
        }
    },
    series : [
        {
            name: '景数',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 30;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ffeb7b'
                }
            }
        }
    ]
};
		
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

上图中的各个地市（省、县）的中心坐标可在json中获取，用来标注圆形数值的位置。
你学会了吗？