中国地图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/>省份：{b}<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相关推荐

免费下载中国地图china.js，在VUE使用echarts-map全国地图的方法和源码
记得有次需要用到中国地图,在官网找了没有,找了很多地方提供的下载都是需要注册或消费点什么,在这里免费分享中国地图china.js插件,使用前记得安装或者引入echarts噢... china.js下载 ...
echarts中国地图china.js下载
上次想写一个中国地图,发现需要一个china.js 然后百度搜了搜,发现都是收费或者需要积分的后来找朋友要了一个,今天给大家分享一下,china.js.echarts-gl 链接: https:// ...
【echarts】中国地图 china.js 在线引用地址
官网链接 https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045 假如失效如何查找? 假如旧版本的 china.js ...
JS + Echarts实现中国地图 China.js
China.js文件现在已经下载不到了 China.js文件已经放到末尾了 China.json以及各个省市json可以私效果图: 1.创建容器我在CSS里给过了宽高所以没写复制的时候一定 ...
echarts 中国地图china.js下载
china. js,世界,各个省份下载地址 Githud地址: https://github.com/apache/incubator-echarts/tree/master/test/data/ma ...
轻松下载echarts的中国地图的js文件
https://github.com/apache/incubator-echarts/tree/4.7.0/map/js进入链接,找到相应的中国地图的js文件,复制到你需要的目录中,保存成js文件就 ...
Echarts地图china.js
在做公司数据可视化时,使用了Echarts 使用Echarts进行地图绘制展示的时候,需要china.js的引入但是官网貌似已经停止了china.js的下载,官方建议使用百度地图代替当时觉得麻烦, ...
echarts全国地图china.js
1.链接:https://pan.baidu.com/s/1pmM2roAKg7gw7-sEyt8fNw 2.提取码:kdmr
vue echarts 中国地图实现用户分布
效果如图所示 vue中echarts@4.9版本,地图的使用, 避免进坑,亲测4.9版本正常,5.0版本不支持因为官方移除了地图数据和map文件夹china.js 1.安装echarts@4.9版本 ...

中国地图china.js

中国地图china.js

一、简介

二、配置项

三、Demo

四、图片

中国地图china.js相关推荐

最新文章

热门文章