weiyong
/
201912G11


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>地图页面</title>
		<link rel="stylesheet" href="css/map2d.css" />
		<link rel="stylesheet" href="css/common.css" />
		<script type="text/javascript" src="js/echarts.js" ></script>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/china.js" ></script>
	</head>
	<body id="investmentRisk">
<div id="container">
   <script type="text/javascript" src="js/common.js" ></script>
    <header></header>
    <nav>
        <a href="index.html">回首页</a>
        
        <a href="study.html">可视化动态数据</a>
    </nav>

    <main>
        <!--样式里的l,m,r,t,b分别代表左，中，右，上，下-->
        <div class="l">
            <div class="chart-wrap">
                <h3>中国地图</h3>
              
              <div id="box" style="width:500px;height:500px" ></div>
<script>
    var myChart = echarts.init(document.getElementById('box'));

    function randomData() {
        return Math.round(Math.random()*500);
    }

   var  option = {
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',//图例的排列方向
            textStyle: {color:'#fff'},
            x:'left',//图例的位置
            y:'20',

            data:['全国数据']
        },

        visualMap: {//颜色的设置  dataRange
            textStyle: {color:'#fff'},
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 1500},{start: 900, end: 1500},
                {start: 310, end: 1000},{start: 200, end: 300},
                {start: 50, end: 200},{start: 0, end: 50},
            ],
            // text:['高','低'],// 文本，默认为数值文本
            // color: ['#65A2D9', '#E09107', '#A3E00B']
            color: ['#5475f5', '#9feaa5', '#3FA7FF','#66E0E3', '#FFDC5E', '#9fb5ea']
        },
        // roamController: {//控制地图的上下左右放大缩小
        //     show: true,
        //     x: 'right',
        //     mapTypeControl: {
        //         'china': true
        //     }
        // },
        series : [
            {
                name: '全国数据',
                type: 'map',
                mapType: 'china',
                zoom: 1.1,
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle:{//地图区域的多边形 图形样式
                    normal:{//是图形在默认状态下的样式
                        label:{
                            show: true,
                            textStyle: {color: "rgb(249, 249, 249)"}
                        }
                    },
                    emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label:{show:true},
                    }
                },
                top:"100",//组件距离容器的距离
                data:[
                    {name: '北京',value: '100' },{name: '天津',value: randomData() },
                    {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
                    {name: '河北',value: randomData() },{name: '河南',value: randomData() },
                    {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
                    {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
                    {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
                    {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
                    {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
                    {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
                    {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
                    {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
                    {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
                    {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
                    {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
                    {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
                    {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
                    {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
                ]
            }
        ]
    };

    myChart.setOption(option);

</script>
                   
            </div>
        </div>

         <div class="r">
            <div class="r-t">
                <div class="chart-wrap">
                    <h3>生日测一测<!--<button class="more">更多…</button>--></h3>
                    <div class="input-group">
                        <label>你的生日月份(农历)：
                            <input type="number" id="spouseDirection_input_m" min="1" max="12" value="1"> 月<br />
                            <br />
                                                                                    你的生日日期(农历)：
                            <input type="number" id="spouseDirection_input_d" min="1" max="30" value="1"> 日<br />
                            <br />
                        </label>
                        <button id="spouseDirection_submit">测一测</button>
                    </div>
                    <div class="chart" id="ec02_pie_spouseDirection"></div>
                    <div class="text">
                       
                    </div>
                </div>
            </div>
            <div class="r-b">
                <div class="chart-wrap c04_bestLocation">
                    <h3>方位测一测</h3>
                    <div class="chart" id="c04_bestLocation">
                        <div class="blocks">
                            <div id="block1">东南</div>
                            <div id="block2">南</div>
                            <div id="block3">西南</div>
                            <div id="block4">东</div>
                            <div id="block5">中央</div>
                            <div id="block6">西</div>
                            <div id="block7">东北</div>
                            <div id="block8">北</div>
                            <div id="block9">西北</div>
                        </div>
                        <form>
                            <div class="input-group">
                                <label>楼层：<input id="floorNumber" type="number" value=""></label>
                            </div>
                            <div class="input-group">
                                <label><span id="direct">住宅</span>门口朝向(出门时面向哪边，若开偏门也以正门为准)：</label><br>
                                <label><input type="radio" name="direct" value="7">东</label>
                                <label><input type="radio" name="direct" value="6">东南</label>
                                <label><input type="radio" name="direct" value="1">南</label>
                                <label><input type="radio" name="direct" value="8">西南</label><br>
                                <label><input type="radio" name="direct" value="3">西</label>
                                <label><input type="radio" name="direct" value="4">西北</label>
                                <label><input type="radio" name="direct" value="9">北</label>
                                <label><input type="radio" name="direct" value="2">东北</label>
                            </div>
                            <div class="input-group">

                                <label>出生季节(立春到立夏之间为春季，余类推)：</label><br>
                                <label><input type="radio" name="season" value="6">春</label>
                                <label><input type="radio" name="season" value="1">夏</label>
                                <label><input type="radio" name="season" value="4">秋</label>
                                <label><input type="radio" name="season" value="9">冬</label>
                            </div>
                            <div class="input-group">
                                <button id="bestLocation_submit" type="button">测一测</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<aside></aside>
<script>
    if (notebookOptim) {
        $(`.ec04_pie_life .input-group>label,
			.r-t .text,
			.r-t .chart,
			.r-b .text,
			#blessings_input,
			#startTime_input,
			.blessings-input-wrap .label2

			`).addClass('notebook');
    }
</script>
<script type="text/javascript" src="js/echarts-4.2.0.min.js" ></script>
<script type="text/javascript" src="js/chartsCom.js" ></script>
<script type="text/javascript" src="js/map2d.js" ></script>
</body>
</html>