【DataV/echarts】vue中使用,修改地图和鼠标点击部分的背景色

引入:使用 DataV 引入地图的教程是参考别人的,主要介绍修改地图相关的样式;
引入地图

是参考别人的,这里自己再整理一遍,注意需要安装 5 版本以上的 echarts

DataV 网址:https://datav.aliyun.com/portal/school/atlas/area_selector

选中你需要的地图区域,点复制:

然后再组件中:

html 复制代码
<template>
  <div class="hello">
    <div style="width: 800px;height: 600px;" ref="aaa"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import getShanXiMap from '../api/getShanXiMap'

export default {
  name: 'HelloWorld',
  mounted() {
    // 初始化统计图对象
    var myChart = echarts.init(this.$refs["aaa"]);

    // 获取移入的每一个省份的配置信息
    myChart.on('mouseover', function (params) {
      console.log(params);
    })

    // 显示 loading 动画
    myChart.showLoading();
    // 再得到数据的基础上,进行地图绘制
    getShanXiMap.then(res => {
      // 得到结果后,关闭动画
      myChart.hideLoading();
      // 注册地图,数据放在axios返回对象的data中
      echarts.registerMap('SX', res.data);

      var option = {
        series: [
          {
            name: '陕西地图',
            type: 'map',
            map: 'SX', // 这是上面注册时的名字
            label: {
              show: true,
              // 地图上显示的文字颜色
              color: '#0A4788'
            },
            // 重点,更改地图的颜色和当前激活部分的颜色
            itemStyle: {
              // 正常预览的状态下,更改背景色和边框线颜色
              normal: {
                areaColor: '#D9EBFE',
                borderColor: '#FFFFFF',
              },
              // 选中的状态下,更改背景色
              emphasis: {
                areaColor: '#75B6F6',
                label: {
                  show: true,
                  color: '#fff'
                }
              },
            },
            // 鼠标点击后
            select: {
              // 标签文本的样式设置
              label: {
                show: true,
                color: "#fff"
              },
              // 地图区域的样式设置
              itemStyle: {
                // 被点击后的背景颜色
                areaColor: "#75B6F6",
              },
            },
          }
        ]
      };
      myChart.setOption(option);

    })
  }

}
</script>

<style scoped lang="less">
.hello {
  width: 800px;
  height: 2000px;
  background-color: skyblue;
}
</style>

更改样式的主要是这一部分,要注意写的位置,是在series里面:

js 复制代码
// 重点,更改地图的颜色和当前移入部分的颜色
itemStyle: {
  // 正常预览的状态下
  normal: {
  	// 更改背景色和边框线颜色
    areaColor: '#D9EBFE',
    borderColor: '#FFFFFF'
  },
  // 悬浮区域
  emphasis: {
  	// 更改背景颜色
    areaColor: '#75B6F6'
  }
},

// 鼠标点击后
select: {
  // 标签文本的样式设置
  label: {
    show: true,
    color: "#fff"
  },
  // 地图区域的样式设置
  itemStyle: {
    // 被点击后的背景颜色
    areaColor: "#75B6F6",
  },
},

预览效果:

补充:

相关推荐
wordbaby9 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
卿·静15 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia29 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia31 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub34 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw37 分钟前
hippy的主要原理
前端
子兮曰40 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068840 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97643 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖43 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript