大家好，又见面了，我是你们的朋友全栈君。
中国地图china.js
一、简介
中国地图china是基于echarts.js和china.js绘制图像。
官方已不支持china.js下载
下载地址在文章最后【已更新】
二、配置项
// china.js的配置项与echarts基本图形配置项相通
// 关于echarts基本图形配置参考：https://echarts.apache.org/v4/zh/option.html
// 其中china地图主要配置不同处在series
series: [
{
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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/162133.html原文链接：https://javaforall.net
