echarts地图根据数据动态显示不同区域颜色

最新推荐文章于 2025-03-14 09:38:34 发布

会加速的蜗牛

最新推荐文章于 2025-03-14 09:38:34 发布

阅读量4k

点赞数 1

分类专栏： vue 前端文章标签： echarts 前端 javascript vue

本文链接：https://blog.csdn.net/qq_23244029/article/details/134411754

版权

文章介绍了如何在Vue3项目中，根据`regions`属性对地图区域进行不同样式的处理，通过计算`count`值来决定区域颜色，如绿色（0.164-0.239）、蓝色（0.164以上）和橙色（0.239以上）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说先上图

主要根据regions这个属性，对区域做不同的样式处理

核心代码：options.geo.regions

开始上代码：

首先设置地图的数据，从接口获取或者本地静态设置都可，这里我用的是vue3的语法
地图json数据
配置options

// 地图数据
const mapData = ref([
  { name: '温州市(本级)', value: [120.65523, 28.01469], count: 0.1 },
  { name: '乐清市', value: [120.98338, 28.11289], count: 0 },
  { name: '瑞安市', value: [120.45518, 27.87838], count: 0.15 },
  { name: '龙港市', value: [120.596024, 27.561398], count: 0.2 },
  { name: '永嘉县', value: [120.651152, 28.20921], count: 0.25 },
  { name: '苍南县', value: [120.478435, 27.416398], count: 0.3 },
  { name: '平