DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化模板三title>
<link rel="stylesheet" href="./style.css">
head>
<body>
<div id="test1">div>
body>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
<script src="./script.js">script>
html>
body{
background-color: #f5f2e9;
}
#test1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
width: 100vw;
}
echarts.init
初始化了一个 ECharts 图表。getGeoJson
方法获取了所有地理坐标的 GeoJSON 数据和中国的 GeoJSON 数据。initEcharts
方法初始化 ECharts 图表。let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/';
async function initChart() {
let chart = echarts.init(document.getElementById('test1'));
//使用 await 等待获取地理坐标数据
let alladcode = await getGeoJson('all.json')
let chinaGeoJson = await getGeoJson('100000_full.json')
initEcharts(chinaGeoJson, '唐朝历史人物分布', chart, alladcode)
}
initChart();
async function
是 ECMAScript 2017(ES8)引入的语法特性之一,用于简化异步操作的处理。async function
,可以方便地编写和管理异步代码,并且可以使用 await
关键字轻松地处理 Promise 对象。async function myAsyncFunction() {
// 异步操作逻辑
}
await
关键字等待一个 Promise 对象的解析,并将其结果返回。await
关键字只能在声明为 async 的函数中使用,它让 JavaScript 引擎暂停该函数的执行,直到 Promise 对象状态变为 resolved(已完成)或 rejected(已拒绝)时再继续执行函数。$.get
方法来发起异步请求获取地图数据。$.get(publicUrl + jsonName)
返回的是一个 Promise 对象,使用 await 关键字等待 Promise 对象的解析。//获取地图json数据
async function getGeoJson(jsonName) {
return await $.get(publicUrl + jsonName)
}
let mapData = [
{
name: "河南省",
value: 14827
},
{
name: "陕西省",
value: 10333
},
...
]
function initEcharts(geoJson, name, chart, alladcode)
:geoJson
:地理信息数据的 GeoJSON 对象,包含了地图的地理信息数据,如各地区的边界坐标等。name
:地图的名称或标题,用于在图表中显示地图的名称。chart
:ECharts 图表实例,用于初始化和展示地理信息可视化图表。alladcode
:地理坐标数据,可能包含了各地区的经纬度信息。以下细说initEcharts
函数框架
echarts.registerMap
方法注册地图,将地图名称和地理信息关联起来。myChart.setOption
将配置项应用到echarts实例。myChart.resize
以便让图表自适应新的窗口大小,确保图表在不同尺寸的屏幕上能够正确显示。//生成地理坐标映射表
let geoCoordMap = {};
let mapFeatures = geoJson.features;
mapFeatures.forEach(function (v, i) {
let name = v.properties.name;
if (name) {
geoCoordMap[name] = v.properties.center;
}
});
//注册地图
echarts.registerMap(name, geoJson);
//定义图表配置项
var option = {...};
//将配置项应用到echarts实例
if (option && typeof option === 'object') {
chart.setOption(option);
}
//以让图表自适应新的窗口大小
window.addEventListener('resize', chart.resize);
title: {
text: name, // 设置标题文本为函数参数中所传递的地图名称
left: 'center', // 标题水平居中
top: '6%', // 标题距离顶部的距离为6%
textStyle: {
fontSize: 34, // 标题文字大小为34
fontFamily: 'KaiTi, serif' // 标题文字字体为楷体或Serif字体
}
},
tooltip: {
triggerOn: "mousemove", // 触发方式为鼠标移动触发
formatter: function (params) { // 自定义提示框的格式化函数
if (isNaN(params.value)) { // 如果数值为非数字,将其设置为0
params.value = 0
}
var html = '' + params.name + ':
' // 构造提示框的HTML内容,包括地区名称
html += '值:' + params.value + '
' // 添加数值信息
return html // 返回HTML内容作为提示框的显示内容
},
backgroundColor: 'rgba(29, 38, 71)', // 设置提示框背景颜色
extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)', // 为提示框添加额外的阴影效果
}
label标签设置
及itemStyle地图基础样式设置
(这里的itemStyle主要是颜色设置,指的是不考虑热力色块的地图初始颜色)。normal
普通状态及emphasis
高亮状态。roam: false
:关闭鼠标缩放和平移漫游操作,否则可通过鼠标拖动或滑轮滚动改变地图大小及位置。geo: {
show: true, // 设置地图显示为可见
top: '10%', // 设置地图距离顶部的距离为10%
map: name, // 指定使用的地图名称
label: {
normal: {
show: false // 普通状态下地图标签不显示
},
emphasis: {
show: true, // 高亮状态下地图标签显示
color: "#31322c", // 高亮状态下地图标签的颜色
}
},
roam: false, // 关闭鼠标缩放和平移漫游操作
itemStyle: {
normal: {
areaColor: '#fff', // 地图区域的普通状态的背景颜色
borderColor: '#686a67', // 地图区域的普通状态的边框颜色
},
emphasis: {
areaColor: '#00828B', // 地图区域的高亮状态的背景颜色
}
},
}
geoIndex
可以指定当前系列要使用的地理组件的索引,从而将该系列与指定的地理组件进行关联,确保数据能够正确显示在指定的地图上。类似于yAxisIndex:指定对应的y轴(有时候可以是双y轴)
。animation: true
时,表示开启了系列的动画。在图表加载或数据更新时,系列会以动画的形式进行显示,这种动态效果能够吸引用户的注意力,使数据更加生动和直观。series: [
{
type: 'map',
geoIndex: 0,
//设置地图长宽比
aspectScale: 0.75,
animation: true,
data: mapData
},
]
visualMap: {
min: 0,
max: 15000,
// 设置颜色标注,区分颜色范围,完成颜色映射
pieces: [
{gt: 12000, color: '#b0112f'},
{gt: 10000, lte: 12000, color: '#c34654'},
{gt: 4000, lte: 10000, color: '#ca5860'},
{gt: 2000, lte: 4000, color: '#df928a'},
{gt: 1000, lte: 2000, color: '#e3a89a'},
{gt: 600, lte: 1000, color: '#eabdaa'},
{gt: 300, lte: 600, color: '#f3dabc'},
{gt: 50, lte: 300, color: '#f8ecd1'},
{gt: 1, lte: 50, color: '#fcf9e5'}
],
// 显示图例
show: true,
// 以下是图例框设置
right: '65%',
bottom: '12%',
// 显示标签(图例的text)
showLabel: true,
text: ['High', 'Low'],
textStyle: {
fontSize: 24,
color: '#333'
},
//同上geoIndex: 0
seriesIndex: [0],
// 图例色块的宽高
itemHeight: 20,
itemWidth: 20,
// 图例垂直排列且自动调整
orient: 'vertical',
align: 'auto',
borderWidth: 2,
borderColor: '#ccc',
}