html5 canvas山东省地图分布颜色标记



167 666 223



特效描述:html5 canvas 山东省地图 分布颜色标记,鼠标经过每个城市时,颜色改变。

代码结构

1. 引入JS

<script src="www/js/jquery.min.js"></script>
<script src="www/js/echarts.js"></script>
<script src="www/js/codemirror.js"></script>
<script src="www/js/echartsExample.js"></script>

2. HTML代码

    <div class="container-fluid">
            <div id="sidebar-code" class="col-md-4">
                <div class="well sidebar-nav" style="display: none;">
                    <textarea id="code" name="code">
						option = {
						    title: {
						        text : '山东省',
						        subtext : '全省17个市'
						    },
						    dataRange: {
						        min: 0,
						        max: 1000,
						        color:['orange','yellow'],
						        text:['高','低'],           // 文本,默认为数值文本
						        calculable : true
						    },
						    series : [
						        {
						            name: '随机数据',
						            type: 'map',
						            mapType: '山东',
						            selectedMode : 'single',
						            itemStyle:{
						                normal:{label:{show:true}},
						                emphasis:{label:{show:true}}
						            },
						            data:[
						                {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)},
						            ]
						        }
						    ]
						};
                    </textarea>
              </div>
            </div>
            <div id="graphic" class="col-md-8">
                <div id="main" class="main" style="height: 320px;"></div>
                <div style="display: none;"><p id="theme-select"></p></div>                
            </div><!--/span-->
       </div><!--/row-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 滑动星星打分 其他 图片拖动 图片拖拽 地图 中国地图 世界地图 鼠标滑过 鼠标悬停 跟随鼠标移动 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到