shanehou/China Map

## China Map
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 来自百度CDN -->
</head>
<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

<!--Step:1 Import echarts-plain.js or echarts-plain-map.js-->
<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
<script src="./js/echarts-plain-map.js"></script>
<script type="text/javascript">
    // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
    // Step:3 echarts和zrender被echarts-plain.js写入为全局接口


    // --- 地图 ---
    var mapData = [
        {name: '北京',value: Math.round(Math.random()*1000)},
        {name: '天津',value: Math.round(Math.random()*1000)},
        {name: '上海',value: Math.round(Math.random()*1000)},
        {name: '重庆',value: Math.round(Math.random()*1000)},
        {name: '河北',value: Math.round(Math.random()*1000)},
        {name: '河南',value: Math.round(Math.random()*1000)},
        {name: '云南',value: Math.round(Math.random()*1000)},
        {name: '辽宁',value: Math.round(Math.random()*1000)},
        {name: '黑龙江',value: Math.round(Math.random()*1000)},
        {name: '湖南',value: Math.round(Math.random()*1000)},
        {name: '安徽',value: Math.round(Math.random()*1000)},
        {name: '山东',value: Math.round(Math.random()*1000)},
        {name: '新疆',value: Math.round(Math.random()*1000)},
        {name: '江苏',value: Math.round(Math.random()*1000)},
        {name: '浙江',value: Math.round(Math.random()*1000)},
        {name: '江西',value: Math.round(Math.random()*1000)},
        {name: '湖北',value: Math.round(Math.random()*1000)},
        {name: '广西',value: Math.round(Math.random()*1000)},
        {name: '甘肃',value: Math.round(Math.random()*1000)},
        {name: '山西',value: Math.round(Math.random()*1000)},
        {name: '内蒙古',value: Math.round(Math.random()*1000)},
        {name: '陕西',value: Math.round(Math.random()*1000)},
        {name: '吉林',value: Math.round(Math.random()*1000)},
        {name: '福建',value: Math.round(Math.random()*1000)},
        {name: '贵州',value: Math.round(Math.random()*1000)},
        {name: '广东',value: Math.round(Math.random()*1000)},
        {name: '青海',value: Math.round(Math.random()*1000)},
        {name: '西藏',value: Math.round(Math.random()*1000)},
        {name: '四川',value: Math.round(Math.random()*1000)},
        {name: '宁夏',value: Math.round(Math.random()*1000)},
        {name: '海南',value: Math.round(Math.random()*1000)},
        {name: '台湾',value: Math.round(Math.random()*1000)},
        {name: '香港',value: Math.round(Math.random()*1000)},
        {name: '澳门',value: Math.round(Math.random()*1000)}
    ];
    var myChart1 = echarts.init(document.getElementById('mainMap'));
    myChart1.setOption({
        tooltip : {
                trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            x:'left',
            data:['Population']
        },
        dataRange: {
            min: 0,
            max: 2500,
            text:['高','低'],           // 文本，默认为数值文本
            calculable : true
        },
        toolbox: {
            show : true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data: mapData
            }
        ]
    });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>ECharts</title>
	<!-- 来自百度CDN -->
	</head>
	<body>
	<!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
	<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

	<!--Step:1 Import echarts-plain.js or echarts-plain-map.js-->
	<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
	<script src="./js/echarts-plain-map.js"></script>
	<script type="text/javascript">
	// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
	// Step:3 echarts和zrender被echarts-plain.js写入为全局接口


	// --- 地图 ---
	var mapData = [
	{name: '北京',value: Math.round(Math.random()*1000)},
	{name: '天津',value: Math.round(Math.random()*1000)},
	{name: '上海',value: Math.round(Math.random()*1000)},
	{name: '重庆',value: Math.round(Math.random()*1000)},
	{name: '河北',value: Math.round(Math.random()*1000)},
	{name: '河南',value: Math.round(Math.random()*1000)},
	{name: '云南',value: Math.round(Math.random()*1000)},
	{name: '辽宁',value: Math.round(Math.random()*1000)},
	{name: '黑龙江',value: Math.round(Math.random()*1000)},
	{name: '湖南',value: Math.round(Math.random()*1000)},
	{name: '安徽',value: Math.round(Math.random()*1000)},
	{name: '山东',value: Math.round(Math.random()*1000)},
	{name: '新疆',value: Math.round(Math.random()*1000)},
	{name: '江苏',value: Math.round(Math.random()*1000)},
	{name: '浙江',value: Math.round(Math.random()*1000)},
	{name: '江西',value: Math.round(Math.random()*1000)},
	{name: '湖北',value: Math.round(Math.random()*1000)},
	{name: '广西',value: Math.round(Math.random()*1000)},
	{name: '甘肃',value: Math.round(Math.random()*1000)},
	{name: '山西',value: Math.round(Math.random()*1000)},
	{name: '内蒙古',value: Math.round(Math.random()*1000)},
	{name: '陕西',value: Math.round(Math.random()*1000)},
	{name: '吉林',value: Math.round(Math.random()*1000)},
	{name: '福建',value: Math.round(Math.random()*1000)},
	{name: '贵州',value: Math.round(Math.random()*1000)},
	{name: '广东',value: Math.round(Math.random()*1000)},
	{name: '青海',value: Math.round(Math.random()*1000)},
	{name: '西藏',value: Math.round(Math.random()*1000)},
	{name: '四川',value: Math.round(Math.random()*1000)},
	{name: '宁夏',value: Math.round(Math.random()*1000)},
	{name: '海南',value: Math.round(Math.random()*1000)},
	{name: '台湾',value: Math.round(Math.random()*1000)},
	{name: '香港',value: Math.round(Math.random()*1000)},
	{name: '澳门',value: Math.round(Math.random()*1000)}
	];
	var myChart1 = echarts.init(document.getElementById('mainMap'));
	myChart1.setOption({
	tooltip : {
	trigger: 'item',
	},
	legend: {
	orient: 'vertical',
	x:'left',
	data:['Population']
	},
	dataRange: {
	min: 0,
	max: 2500,
	text:['高','低'], // 文本，默认为数值文本
	calculable : true
	},
	toolbox: {
	show : true,
	orient : 'vertical',
	x: 'right',
	y: 'center',
	feature : {
	mark : {show: true},
	dataView : {show: true, readOnly: false},
	restore : {show: true},
	saveAsImage : {show: true}
	}
	},
	series : [
	{
	name: '中国',
	type: 'map',
	mapType: 'china',
	itemStyle:{
	normal:{label:{show:true}},
	emphasis:{label:{show:true}}
	},
	data: mapData
	}
	]
	});
	</script>
	</body>
	</html>