ECharts学习—实现中国地图
Posted 乘风破浪的程序媛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts学习—实现中国地图相关的知识，希望对你有一定的参考价值。
【ECharts学习】—实现中国地图
使用Echarts进行地图绘制展示的时候，需要china.js的引入，我把它放在百度网盘里了，需要的自取
点我跳转到百度网盘
提取码：clby
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='js/echarts.min.js'></script>
<script src='js/china.js'></script>
<style>
#china_chart {
width: 1000px;
height: 800px;
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="china_chart"></div>
<script>
var china_chart = echarts.init(document.getElementById('china_chart'));
//数据纯属虚构 [{城市:数据,...}]
var data = [{
name: '江苏',
value: 1
}, {
name: '北京',
value: 34
}, {
name: '上海',
value: 68
}, {
name: '重庆',
value: 23
}, {
name: '河北',
value: 34
}, {
name: '河南',
value: 3.2
}, {
name: '云南',
value: 1.6
}, {
name: '辽宁',
value: 4.3
}, {
name: '黑龙江',
value: 4.1
}, {
name: '湖南',
value: 2.4
}, {
name: '安徽',
value: 33
}, {
name: '山东',
value: 54
}, {
name: '新疆',
value: 1
}, {
name: '浙江',
value: 44
}, {
name: '江西',
value: 22
}, {
name: '湖北',
value: 2.1
}, {
name: '广西',
value: 3.0
}, {
name: '甘肃',
value: 1.2
}, {
name: '山西',
value: 3.2
}, {
name: '内蒙古',
value: 3.5
}, {
name: '陕西',
value: 2.5
}, {
name: '吉林',
value: 4.5
}, {
name: '福建',
value: 2.8
}, {
name: '贵州',
value: 1.8
}, {
name: '广东',
value: 3.7
}, {
name: '青海',
value: 0.6
}, {
name: '西藏',
value: 0.4
}, {
name: '四川',
value: 3.3
}, {
name: '宁夏',
value: 0.8
}, {
name: '海南',
value: 1.9
}, {
name: '台湾',
value: 0.1
}, {
name: '香港',
value: 0.1
}, {
name: '澳门',
value: 0.1
}];
var option = {
title: {
show: true,
text: '排名情况',
},
tooltip: { //悬浮弹框
show: true,
// formatter: function(params) {//data series里面数据 =[{name:'',value:''},{}]
// return params.name + '：' + params.value + '人';
// },
formatter: '{a}-{b}:{c}人',
},
visualMap: [{ //visualMap 是视觉映射组件，用于进行『视觉编码 visualMap：图注样式定制，其中包括color范围，文字提示
// type:'continuous',//连续型视觉映射组件 type: 'piecewise',//类型为连续型
type: 'piecewise', //分段型视觉映射组件
// orient: 'horizontal',//如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
// itemWidth: 40,
// itemHeight: 20,
// text: ['高', '低'],
// min: 1,//最小值区域 小于1 显示的green
// max: 60,//大于4显示 red 剩余是中间区域blue 左右叠色
// inRange: {
// color: ['green','red','yellow']
// },
// bottom: 30,
// left: 'left',
}],
geo: { //地理坐标系组件 geo:定义地图为china 常用zoom
map: 'china', //地图类型。ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积 map/js/china.js
// zoom:1,//视角缩放比例
label: {
show: true
},
emphasis: { //高亮
label: { //地图的标签名字
show: true
},
itemStyle: { //区域样式 hover样式
areaColor: 'pink'
}
}
},
series: [{
name: '地图',
type: 'map', //地图
geoIndex: 0, //映射visualMap 颜色配置
data: data
}]
};
china_chart.setOption(option);
</script>
</body>
</html>
以上是关于ECharts学习—实现中国地图的主要内容，如果未能解决你的问题，请参考以下文章
React 17 + Vite + ECharts 实现疫情数据可视化「06 完成疫情地图绘制」