html5 canvas山東省地圖分布顏色標記



177 705 236



特效描述: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

加群請備注:從官網了解到

老夫子电子