中国地图china.js
生活随笔
收集整理的這篇文章主要介紹了
中国地图china.js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
中國地圖china.js
一、簡介
中國地圖china是基于echarts.js和china.js繪制圖像。
官方已不支持china.js下載
下載地址在文章最后【已更新】
二、配置項
// china.js的配置項與echarts基本圖形配置項相通 // 關于echarts基本圖形配置參考：https://echarts.apache.org/v4/zh/option.html // 其中china地圖主要配置不同處在seriesseries: [{name: 'china', // name:名稱，可是自己設置任意值type: 'map', // type:'map' 固定值mapType: 'china',// mapType: 'china' 固定值itemStyle: {normal: { label: { show: true } },//顯示省份標簽emphasis: { label: { show: true } }//鼠標懸浮效果},data: [['name1',value1],['name2',value2],['name3',value3]...]//傳入一個列表格式[[name,value]]} ] //如果這樣配置是沒有顏色變化的，使用需要配置dataRange dataRange: {min: 0,max: list_value_max//Math.max.apply(null, data_value_list),x: 'left',y: 'bottom',text: ['高', '低'], // 文本，默認為數值文本calculable: true,//inRange: {// color: ['#FFFFFF','#0000FF'],// symbolSize: [10, 100]//} }三、Demo
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="echarts.js"></script><script src="china.js"></script> </head><body><div id="main" style="width: 800px;height: 600px;"></div><script>const data_list = [{name:'江蘇',value:192836},{name:'安徽',value:118491},{name:'湖北',value:117036},{name:'湖南',value:110666},{name:'廣東',value:109915},{name:'浙江',value:69540},{name:'福建',value:45146},{name:'山東',value:42753},{name:'河南',value:31141},{name:'四川',value:30287},{name:'河北',value:29890},{name:'江西',value:23649},{name:'黑龍江',value:20475},{name:'陜西',value:17942},{name:'貴州',value:16019},{name:'吉林',value:15441},{name:'廣西',value:11875},{name:'山西',value:11077},{name:'云南',value:9238},{name:'遼寧',value:6538},{name:'甘肅',value:6128},{name:'重慶',value:5883},{name:'內蒙古',value:5605},{name:'海南',value:4596},{name:'天津',value:4244},{name:'新疆',value:4125},{name:'上海',value:3429},{name:'寧夏',value:3225},{name:'青海',value:1833},{name:'北京',value:1765}]const data_value_list= [192836,118491,117036,110666,109915,69540,45146,42753,31141,30287,29890,23649,20475,17942,16019,15441,11875,11077,9238,6538,6128,5883,5605,4596,4244,4125,3429,3225,1833,1765,0,]const option = {title: {text: '全國工作招聘數量',subtext: '數據源：前程無憂',x: 'center'},tooltip: {trigger: 'item',formatter: '名稱：{a}<br/>省份：<br/>數值：{c}'},dataRange: {min: 0,max: Math.max.apply(null, data_value_list),x: 'left',y: 'bottom',text: ['高', '低'], // 文本，默認為數值文本calculable: true,//inRange: {// color: ['#FFFFFF','#0000FF'],// symbolSize: [10, 100]//}},series: [{name: '數據',type: 'map',mapType: 'china',roam: false,itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: data_list}]};ec_map = echarts.init(document.getElementById('main'));ec_map.setOption(option)</script> </body> </html>四、圖片
- China.js鏈接：https://pan.baidu.com/s/1QLnaI0UZAi1WI9TRZuTSbw?pwd=2000
提取碼：2000
總結
以上是生活随笔為你收集整理的中国地图china.js的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【调剂】华北电力大学（保定）2022年硕
- 下一篇： 光场相机 标定微透镜阵列