网站的收费系统怎么做,怎么用视频做网站首页,写网站的教程,长春火车站人工电话目录 Echarts中的地图组件地图组件初体验下载地图数据准备Echarts的基本结构导入地图数据并注册展示地图数据结合visualMap展示地图数据 Echarts中的地图组件
Echarts中的地图组件是一种用于展示地理数据的可视化组件。它可以显示全国、各省市和各城市的地图#xff0c;并支持… 目录 Echarts中的地图组件地图组件初体验下载地图数据准备Echarts的基本结构导入地图数据并注册展示地图数据结合visualMap展示地图数据 Echarts中的地图组件
Echarts中的地图组件是一种用于展示地理数据的可视化组件。它可以显示全国、各省市和各城市的地图并支持自定义地图展示。地图组件提供了丰富的配置项包括地图的颜色、标注、图例、缩放、拖拽等可以满足不同需求的数据可视化展示。在地图组件中可以通过数据标记、热力图、散点图等方式展示数据同时支持地图事件的监听和触发如点击、鼠标移入移出等事件。
在Echarts中使用地图组件需要引入地图数据Echarts提供了全国、各省市和各城市的地图数据同时也支持自定义地图展示。自定义地图需要提供地图的json数据包括地图的各个区域的名称、坐标等信息。通过配置项中的geo属性可以设置地图的名称、标注、颜色、缩放等属性。通过配置项中的series属性可以设置地图数据的展示方式如数据标记、热力图、散点图等。同时地图组件还支持地图事件的监听和触发如点击、鼠标移入移出等事件。
地图组件初体验
下载地图数据
在使用地图组件之前需要先下载相应的地图数据。地图数据可以到下面的网址进行下载https://datav.aliyun.com/portal/school/atlas/area_selector
准备Echarts的基本结构
新建MapChart.vue组件引入Echarts并在组件中新建div组织Echarts的基本结构
templatediv refchart stylewidth: 100%;height: 600px;/div
/template
script setup
import * as echarts from echarts
import { ref, onMounted, reactive } from vue
const chart ref(null)onMounted(() {const myChart echarts.init(chart.value)const option {}myChart.setOption(option)
})
/script导入地图数据并注册
在MapChart.vue中导入我们上面下载的地图组件
import cmap from ../assets/china.json使用echarts.registerMap()方法注册地图地图数据通过该方法我们可以将自定义的地图数据注册到Echarts中以便在地图组件中使用。该方法的语法如下
echarts.registerMap(mapName, geoJson, specialAreas?)其中参数说明如下
mapName地图名称用于在地图组件中引用地图数据。geoJson地图数据可以是GeoJSON格式的字符串或对象也可以是包含多个GeoJSON格式的数组。specialAreas可选特别地区的配置项用于在地图中标注特别的区域例如港澳台地区等。 使用该方法注册地图数据后我们就可以在Echarts中使用该地图了
templatediv refchart stylewidth: 100%;height: 600px;/div
/template
script setup
import * as echarts from echarts
import { ref, onMounted } from vue
import cmap from ../assets/china.json
const chart ref(null)
// 注册中国地图数据
echarts.registerMap(china, cmap)
onMounted(() {const myChart echarts.init(chart.value)// 使用中国地图数据const option {series: [{type: map,map: china}]};myChart.setOption(option)
}) 上述代码中我们首先使用echarts.registerMap()方法注册了中国地图数据然后在地图系列中使用map属性指定了地图名称为china。这样就可以在地图组件中展示中国地图了。
**注意**我们在注册地图数据时定义的地图名称必须要和series中的map配置项的名称一致。 配置第三个参数 specialAreas可选特别地区配置项的示例
// 注册中国地图数据
echarts.registerMap(china, chinaGeoJson, {南海诸岛: { // 地区名称left: 123, // 地区位置可以是数字、字符串或百分比top: 23,width: 10, // 地区大小可以是数字或百分比height: 10}
});上述代码中我们在使用echarts.registerMap()方法注册中国地图数据时还传入了一个特别地区的配置项。其中南海诸岛 表示特别地区的名称left和top表示特别地区在地图中的位置width和height表示特别地区的大小。配置完成后效果如下图所示 在实际使用中我们可以根据需要自定义特别地区的配置项。
展示地图数据
经过上面的配置将地图加载成功后就需要根据我们的业务逻辑将实际需要展示的数据展示到地图上了这里我们随机给一些数据同时在series中配置roam属性为true开启鼠标滚轮放大缩小功能配置label使地图显示文字标签
series: [{type: map,map: china, roam: true,//滚轮放大缩小label: {//显示文字标签show: true},data: [{ name: 北京, value: Math.round(Math.random() * 1000) },{ name: 天津, value: Math.round(Math.random() * 1000) },{ name: 上海, value: Math.round(Math.random() * 1000) },{ name: 重庆, value: Math.round(Math.random() * 1000) },{ name: 河北, value: Math.round(Math.random() * 1000) },{ name: 河南, value: Math.round(Math.random() * 1000) },{ name: 云南, value: Math.round(Math.random() * 1000) },{ name: 辽宁, value: Math.round(Math.random() * 1000) },{ name: 黑龙江, value: Math.round(Math.random() * 1000) },{ name: 湖南, value: Math.round(Math.random() * 1000) },{ name: 安徽, value: Math.round(Math.random() * 1000) },{ name: 山东, value: Math.round(Math.random() * 1000) },{ name: 新疆, value: Math.round(Math.random() * 1000) },{ name: 江苏, value: Math.round(Math.random() * 1000) },{ name: 浙江, value: Math.round(Math.random() * 1000) },{ name: 江西, value: Math.round(Math.random() * 1000) },{ name: 湖北, value: Math.round(Math.random() * 1000) },{ name: 广西, value: Math.round(Math.random() * 1000) },{ name: 甘肃, value: Math.round(Math.random() * 1000) },{ name: 山西, value: Math.round(Math.random() * 1000) },{ name: 内蒙古, value: Math.round(Math.random() * 1000) },{ name: 陕西, value: Math.round(Math.random() * 1000) },{ name: 吉林, value: Math.round(Math.random() * 1000) },{ name: 福建, value: Math.round(Math.random() * 1000) },{ name: 贵州, value: Math.round(Math.random() * 1000) },{ name: 广东, value: Math.round(Math.random() * 1000) },{ name: 青海, value: Math.round(Math.random() * 1000) },{ name: 西藏, value: Math.round(Math.random() * 1000) },{ name: 四川, value: Math.round(Math.random() * 1000) },{ name: 宁夏, value: Math.round(Math.random() * 1000) },{ name: 海南, value: Math.round(Math.random() * 1000) },{ name: 台湾, value: Math.round(Math.random() * 1000) },{ name: 香港, value: Math.round(Math.random() * 1000) },{ name: 澳门, value: Math.round(Math.random() * 1000) }]}]这样定义完成后文字标签和鼠标的滚轮效果已经可以看到了但是我们添加的数据还没有看到这时我们可以添加tooltip配置项使其在鼠标经过是弹出提示框
tooltip: {trigger: item,formatter: {b}br/{c}亿元
},刷新浏览器可以看到数据已经在提示框中显示了
结合visualMap展示地图数据
在实际的开发中我们往往会结合visualMap来展示地图数据的层级视觉映射组件 visualMap可以将数据的大小和颜色映射到地图上从而实现地图的数据可视化。在上面的代码中添加visualMap配置项代码如下 visualMap: {min: 0,max: 2000,left: left,top: bottom,text: [高, 低],calculable: true,inRange: {color: [#e0ffff, #006edd]}},在上面的代码中我使用了 visualMap 组件来将数据的大小映射到地图上同时设置了 inRange 属性来定义数据映射的颜色范围。
可以看到地图根据我们上面的数据大小显示了不同的颜色层级 OK今天时间太晚了关于Echarts中地图的使用方法就先聊到这里下次咱们接着聊喜欢的小伙伴点赞关注加收藏哦
