要提前准备一个xinyang.json文件
可以在这个网站下载
DataV.GeoAtlas地理小工具系列 (aliyun.com)
代码结构
总框架代码：
<template><div><div class="center"><center-left /><center-map /><center-right /></div><div class="bottom"></div></div>
</template><script>
import centerLeft from "./components/centerLeft.vue";
import centerRight from "./components/centerRight.vue";
import centerMap from "./components/centerMap.vue";
export default {components: { centerMap, centerLeft, centerRight },
};
</script><style lang="scss" scoped>
.center {display: flex;justify-content: space-between;
}
.bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 30px;
}
</style>
中心map，2D地图
模板部分（<template>）：
- 整体布局使用了一个
div元素class="content"作为容器。 - 容器内包含一个
heat-map-echarts组件，设置了高度为580px，宽度为680px。 - 接着是一个包含子元素的
div，其中有一个自定义的dv-border-box-7组件，内部包含一个标题h2和一个Echart组件。
脚本部分（<script>）：
- 导入了两个组件：
Echart和heatMapEcharts。 data函数中定义了一个名为options1的对象，用于配置Echart组件的选项。xAxis配置了轴的类型和最大值。yAxis配置了轴的类型、数据、反转、动画时长和显示的最大条数。series配置了图表的类型为柱状图，数据、实时排序、标签等相关属性。- 还配置了图例、动画时长、缓动效果等。
- 在
components中注册了导入的两个组件。
样式部分（<style scoped>）：
- 为
.content类设置了 Flex 布局，使其内容在垂直和水平方向上居中。 - 为
.title类设置了上下边距。
总体来说，这段代码是一个 Vue 组件的模板、脚本和样式的组合，主要用于展示一个热图组件和一个柱状图组件，并对其进行了相应的配置和布局设置。
中心map
<template><div class="content"> <!-- 定义一个名为 content 的 div 容器 --><heat-map-echarts height="580px" width="680px" /> <!-- 引入 heat-map-echarts 组件，并设置高度和宽度 --><div> <!-- 内部的另一个 div --><dv-border-box-7> <!-- 引入自定义的 dv-border-box-7 组件 --><h2 class="title">人口排名前五的地区</h2> <!-- 标题元素，显示文本 --><Echart :options="options1" height="350px" width="680px" /> <!-- 引入 Echart 组件，并传递 options1 配置，设置高度和宽度 --></dv-border-box-7></div></div>
</template><script>
import Echart from "@/common/echart/index.vue"; // 导入 Echart 组件
import heatMapEcharts from "./echarts/heatMapEcharts.vue"; // 导入 heatMapEcharts 组件export default {data() { // 定义组件的数据return {options1: { // 定义 Echart 的配置选项对象 options1xAxis: { // x 轴的配置type: "value", // x 轴类型为数值型max: "dataMax", // x 轴的最大值设置为 "dataMax"},yAxis: { // y 轴的配置type: "category", // y 轴类型为分类data: ["平桥区", "浉河区区", "光山县", "罗山县", "新县", "固始县"], // y 轴的数据inverse: true, // 是否反转animationDuration: 300, // 动画持续时间animationDurationUpdate: 300, // 更新动画的持续时间max: 4, // 只显示最大的 4 个条},series: [ // 系列配置{realtimeSort: true, // 实时排序// name: '人口数', // 注释掉的系列名称type: "bar", // 图表类型为柱状图// data: [156, 48, 111, 58, 92, 219], // 注释掉的数据data: ["156", "48", "111", "58", "92", "219"], // 系列的数据label: { // 标签配置show: true, // 显示标签position: "right", // 标签位置在右侧valueAnimation: true, // 标签值的动画效果},},],legend: { // 图例配置show: true, // 显示图例},animationDuration: 1000, // 动画持续时间animationDurationUpdate: 1000, // 更新动画的持续时间animationEasing: "linear", // 动画缓动效果为线性animationEasingUpdate: "linear", // 更新动画的缓动效果为线性},};},components: { // 注册组件Echart, // 注册 Echart 组件heatMapEcharts, // 注册 heatMapEcharts 组件},
};
</script><style scoped>
.content { // 为 content 类设置样式display: flex; // 启用 Flex 布局flex-direction: column; // 主轴方向为列align-items: center; // 水平居中justify-content: center; // 垂直居中
}
.title { // 为 title 类设置样式margin-top: 20px; // 顶部外边距 20 像素margin-bottom: -30px; // 底部外边距 -30 像素
}
</style>引入代码heatMapEcharts.vue
<template><div :id="id" :class="className" :style="{ height: height, width: width }" />
</template><script>
import geoJson from "@/common/map/xinyang.json";
import tdTheme from "@/common/echart/theme.json"; // 引入默认主题
export default {name: "echart",props: {className: {type: String,default: "chart",},id: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "2.5rem",},},data() {return {chart: null,options: {title: {text: "信阳市人口密度图 （2024）",},tooltip: {trigger: "item",formatter: "{b}<br/>{c} (p / km2)",},toolbox: {show: true,orient: "vertical",left: "right",top: "center",feature: {dataView: { readOnly: false },restore: {},saveAsImage: {},},},visualMap: {min: 800,max: 50000,text: ["High", "Low"],realtime: false,calculable: true,inRange: {color: ["lightskyblue", "yellow", "orangered"],},},series: [{name: "信阳市人口密度",type: "map",map: "CQ",label: {show: true,},data: [{ name: "平桥区", value: 20057.34 },{ name: "浉河区", value: 15477.48 },{ name: "罗山县", value: 31686.1 },{ name: "息县", value: 6992.6 },{ name: "光山县", value: 44045.49 },{ name: "新县", value: 40689.64 },{ name: "潢川县", value: 37659.78 },{ name: "淮滨县", value: 45180.97 },{ name: "商城县", value: 55204.26 },{ name: "固始县", value: 21900.9 }],// 自定义名称映射nameMap: {},},],},};},watch: {options: {handler(options) {// 设置true清空echart缓存this.chart.setOption(options, true);},deep: true,},},mounted() {this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题this.initChart();},beforeDestroy() {this.chart.dispose();this.chart = null;},methods: {initChart() {// 初始化echartthis.chart = this.$echarts.init(this.$el, "tdTheme");this.$echarts.registerMap("CQ", geoJson);this.chart.setOption(this.options, true);},},
};
</script><style></style>
左边left
<template><div> <!-- 最外层的 div 容器 --><dv-border-box-6 style="padding-top: 20px"> <!-- 自定义的 dv-border-box-6 组件，并设置顶部内边距为 20 像素 --><h2 class="title">2010-2024 年信阳市常住人口及增量</h2> <!-- 标题 1 --><Echart :options="options1" height="500px" width="600px" /> <!-- 引入 Echart 组件 1，并传递 options1 配置，设置高度和宽度 --><h2 class="title">2015-2024 年信阳市人口出生率、死亡率和自然增长率</h2> <!-- 标题 2 --><Echart :options="options2" height="350px" width="600px" /> <!-- 引入 Echart 组件 2，并传递 options2 配置，设置高度和宽度 --></dv-border-box-6></div>
</template><script>
import Echart from "@/common/echart/index.vue"; // 导入 Echart 组件export default {data() { // 定义组件的数据return {options1: { // 第一个 Echart 的配置选项对象 options1tooltip: { // 提示框配置trigger: "axis", // 触发类型为坐标轴axisPointer: { // 坐标轴指示器配置type: "cross", // 类型为十字准线crossStyle: { // 十字准线样式color: "#999", // 颜色为 #999},},},toolbox: { // 工具栏配置feature: { // 工具栏功能配置dataView: { show: true, readOnly: false }, // 数据视图，可显示和编辑magicType: { show: true, type: ["line", "bar"] }, // 图表类型切换restore: { show: true }, // 还原配置saveAsImage: { show: true }, // 保存为图片},},legend: { // 图例配置data: ["人口", "人口增长率"], // 图例数据},xAxis: [ // x 轴配置{type: "category", // 类型为分类data: [ // x 轴数据"2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024",],axisPointer: { // 坐标轴指示器配置type: "shadow", // 类型为阴影},},],yAxis: [ // y 轴配置{type: "value", // 数值类型name: "万人", // y 轴名称min: 2700, // 最小值max: 3300, // 最大值interval: 100, // 间隔axisLabel: { // y 轴标签配置formatter: "{value}", // 格式化函数},},{type: "value", // 数值类型name: "万人", // y 轴名称min: 0, // 最小值max: 70, // 最大值interval: 10, // 间隔axisLabel: { // y 轴标签配置formatter: "{value}", // 格式化函数},},],series: [ // 系列配置{name: "人口", // 系列名称type: "bar", // 图表类型为柱状图tooltip: { // 提示框配置valueFormatter: function (value) { // 值格式化函数return value + " 万"; // 返回值加上单位 "万"},},data: [ // 数据2920, 2950, 2970, 3010, 3040, 3070, 3110, 3150, 3160, 3190, 3210,3220, 3250,],},{name: "人口增长率", // 系列名称type: "line", // 图表类型为折线图yAxisIndex: 1, // 使用第二个 y 轴tooltip: { // 提示框配置valueFormatter: function (value) { // 值格式化函数return value + " 万人"; // 返回值加上单位 "万人"},},data: [ // 数据40.21, 59.81, 30.45, 36.15, 32.45, 26.54, 39.94, 33.55, 19.63,24.7, 21.09, 3.5, 4.21,],},],},options2: { // 第二个 Echart 的配置选项对象 options2tooltip: { // 提示框配置trigger: "axis", // 触发类型为坐标轴},legend: { // 图例配置data: ["出生率", "死亡率", "自然增长率"], // 图例数据},grid: { // 网格配置left: "3%", // 左边距right: "4%", // 右边距bottom: "3%", // 下边距containLabel: true, // 包含标签},toolbox: { // 工具栏配置feature: { // 工具栏功能配置saveAsImage: {}, // 保存为图片},},xAxis: { // x 轴配置type: "category", // 类型为分类boundaryGap: false, // 两端不留空白data: [ // x 轴数据"2017","2018","2019","2020","2021","2022","2023","2024",],},yAxis: { // y 轴配置type: "value", // 数值类型min: -4, // 最小值max: 14, // 最大值interval: 2, // 间隔},series: [ // 系列配置{name: "出生率", // 系列名称type: "line", // 图表类型为折线图data: [10.8, 11.9, 11.6, 11.5, 10.5, 7.8, 6.5, 6.0], // 数据},{name: "死亡率", // 系列名称type: "line", // 图表类型为折线图data: [7.3, 7.3, 7.4, 7.8, 7.9, 7.9, 8.1, 8.2], // 数据},{name: "自然增长率", // 系列名称type: "line", // 图表类型为折线图data: [4, 4.4, 4, 3.8, 3.1, -1, -1.6, -2], // 数据},],},};},components: { // 注册组件Echart, // 注册 Echart 组件},
};
</script><style>
.title { // 标题的样式display: flex; // 启用 Flex 布局justify-content: center; // 水平居中margin-bottom: 10px; // 底部外边距 10 像素
}
</style>
右边right
<template><div> <!-- 最外层的 div 容器 --><dv-border-box-6 style="padding-top: 20px"> <!-- 自定义组件 dv-border-box-6，并设置顶部内边距为 20 像素 --><h2 class="title">2010 - 2024 年信阳市常住人口及增量</h2> <!-- 第一个标题 --><Echart :options="options1" height="500px" width="600px" /> <!-- 引入 Echart 组件 1，并绑定 options1 配置，设置高度和宽度 --><h2 class="title">2015 - 2024 年信阳市人口出生率、死亡率和自然增长率</h2> <!-- 第二个标题 --><Echart :options="options2" height="350px" width="600px" /> <!-- 引入 Echart 组件 2，并绑定 options2 配置，设置高度和宽度 --></dv-border-box-6></div>
</template><script>
import Echart from "@/common/echart/index.vue"; // 导入 Echart 组件export default {data() { // 定义组件的数据return {options1: { // 第一个 Echart 的配置对象tooltip: { // 提示框配置trigger: "axis", // 触发方式为坐标轴axisPointer: { // 坐标轴指针配置type: "cross", // 指针类型为十字线crossStyle: { // 十字线样式color: "#999", // 颜色为 #999},},},toolbox: { // 工具栏配置feature: { // 工具栏功能配置dataView: { show: true, readOnly: false }, // 数据视图功能，可显示且可编辑magicType: { show: true, type: ["line", "bar"] }, // 图表类型切换功能，可切换为折线图和柱状图restore: { show: true }, // 恢复功能saveAsImage: { show: true }, // 保存为图片功能},},legend: { // 图例配置data: ["人口", "人口增长率"], // 图例数据},xAxis: [ // x 轴配置{type: "category", // 类型为分类data: [ // x 轴数据"2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024",],axisPointer: { // 坐标轴指针配置type: "shadow", // 类型为阴影},},],yAxis: [ // y 轴配置{type: "value", // 数值类型name: "万人", // y 轴名称min: 2700, // 最小值max: 3300, // 最大值interval: 100, // 间隔axisLabel: { // y 轴标签配置formatter: "{value}", // 格式化函数},},{type: "value", // 数值类型name: "万人", // y 轴名称min: 0, // 最小值max: 70, // 最大值interval: 10, // 间隔axisLabel: { // y 轴标签配置formatter: "{value}", // 格式化函数},},],series: [ // 系列配置{name: "人口", // 系列名称type: "bar", // 图表类型为柱状图tooltip: { // 提示框配置valueFormatter: function (value) { // 值格式化函数return value + " 万"; // 返回值加上 " 万" 单位},},data: [ // 数据2920, 2950, 2970, 3010, 3040, 3070, 3110, 3150, 3160, 3190, 3210,3220, 3250,],},{name: "人口增长率", // 系列名称type: "line", // 图表类型为折线图yAxisIndex: 1, // 使用第二个 y 轴tooltip: { // 提示框配置valueFormatter: function (value) { // 值格式化函数return value + " 万人"; // 返回值加上 " 万人" 单位},},data: [ // 数据40.21, 59.81, 30.45, 36.15, 32.45, 26.54, 39.94, 33.55, 19.63,24.7, 21.09, 3.5, 4.21,],},],},options2: { // 第二个 Echart 的配置对象tooltip: { // 提示框配置trigger: "axis", // 触发方式为坐标轴},legend: { // 图例配置data: ["出生率", "死亡率", "自然增长率"], // 图例数据},grid: { // 网格配置left: "3%", // 左边距为 3%right: "4%", // 右边距为 4%bottom: "3%", // 下边距为 3%containLabel: true, // 包含标签},toolbox: { // 工具栏配置feature: { // 工具栏功能配置saveAsImage: {}, // 保存为图片功能},},xAxis: { // x 轴配置type: "category", // 类型为分类boundaryGap: false, // 两端不留空白data: [ // x 轴数据"2017","2018","2019","2020","2021","2022","2023","2024",],},yAxis: { // y 轴配置type: "value", // 数值类型min: -4, // 最小值max: 14, // 最大值interval: 2, // 间隔},series: [ // 系列配置{name: "出生率", // 系列名称type: "line", // 图表类型为折线图data: [10.8, 11.9, 11.6, 11.5, 10.5, 7.8, 6.5, 6.0], // 数据},{name: "死亡率", // 系列名称type: "line", // 图表类型为折线图data: [7.3, 7.3, 7.4, 7.8, 7.9, 7.9, 8.1, 8.2], // 数据},{name: "自然增长率", // 系列名称type: "line", // 图表类型为折线图data: [4, 4.4, 4, 3.8, 3.1, -1, -1.6, -2], // 数据},],},};},components: { // 注册组件Echart, // 注册 Echart 组件},
};
</script><style>
.title { // 标题的样式display: flex; // 使用 Flex 布局justify-content: center; // 水平居中margin-bottom: 10px; // 底部外边距 10 像素
}
</style>
最后运行主代码就可以了：
