echarts地图实现部分地区高亮

想要实现地图,首先要引入china.js文件,如果有引入就直接调过本步骤去下方看代码,没有引入可以点击下方链接自行Ctrl c + Ctrl v
china.js

import "../../plugins/china.js";
import echarts from 'echarts';

引入之后只需要在代码中地图的配置项中添加你需要改变颜色的省份名字即可,名字需要和china.js保持一致

let option = {
      geo: {
          map: "china",
          label: {
            emphasis: {
              show: true,
              color: "#fff",
            },
            roam: true,
            zoom: this.zoom,
          },
          regions: [ //这个地方是关键,通过设置regions,可以实现不同的省份边界线配置不同的颜色,
                  {
                   name: '江苏', //这个名字要和china.js保持一致
                    itemStyle: {
                        normal: {
                            borderColor: "#fff", 
                            borderWidth: 5, 
                        },
                    },
                 },
                   {
                   name: '上海', 
                    itemStyle: {
                        normal: {
                            borderColor: "red", 
                            borderWidth: 5, 
                        },
                    },
                 }
           
            ],
        }  
}

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Echarts实现地图部分区域的高亮显示,你可以使用 Echarts 提供的地图组件和相关配置项来实现。下面是一个简单的示例代码: 首先,确保你已经引入了 EchartsJavaScript 文件。然后,创建一个包含地图的容器,例如一个 `<div>` 元素,并为其设置一个固定的宽度和高度。 ```html <div id="map" style="width: 600px; height: 400px;"></div> ``` 接下来,使用 JavaScript 代码来初始化 Echarts 并配置地图的数据和样式。 ```javascript // 初始化 Echarts var myChart = echarts.init(document.getElementById('map')); // 地图数据配置 var option = { series: [{ type: 'map', map: 'china', // 使用中国地图 itemStyle: { normal: { // 设置默认状态下的地图区域样式 areaColor: '#ccc', borderColor: '#fff', borderWidth: 1 }, emphasis: { // 设置鼠标悬停时的高亮样式 areaColor: '#ff0000', borderColor: '#fff', borderWidth: 1 } }, data: [ {name: '北京', value: 100}, {name: '上海', value: 200}, {name: '广州', value: 300}, // 其他省份的数据... ] }] }; // 将配置项设置给 Echarts 实例 myChart.setOption(option); ``` 在上面的代码中,通过设置 `itemStyle` 中的 `normal` 和 `emphasis` 分别配置了默认状态和高亮状态下的地图区域样式。你可以根据自己的需求来调整这些样式。 最后,使用 `setOption` 方法将配置项设置给 Echarts 实例,即可在页面上显示出地图实现区域高亮效果。 请注意,上面的示例中使用的是中国地图,你可以根据需要更换为其他地图数据。此外,你还可以根据自己的需求对其他 Echarts 地图配置项进行进一步的调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值