wujing278/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>
</body>
<!--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 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:[
                    //{name:'广东',selected:true}

                {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)}
                ]
            }
        ]
    });
    </script>
</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>
	</body>
	<!--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 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:[
	//{name:'广东',selected:true}

	{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)}
	]
	}
	]
	});
	</script>
	</html>