echarts 高亮轮廓的中国地图

在这里插入图片描述

src\pages\chinaMap\index.vue

<template>
  <div class="mapBox">
    <ChinaMap />
  </div>
</template>

<script>
import ChinaMap from "@/components/charts/chinaMap/chinaMap.vue";
export default {
  components: {
    ChinaMap,
  },
};
</script>

<style scoped>
.mapBox {
  background: #020933;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  box-sizing: border-boxs;
}
</style>

src\components\charts\chinaMap\chinaMap.vue

<template>
  <div style="height: 100%;width: 100%" ref="myChart"></div>
</template>

<script>
import echarts from "echarts";
import "./chinaMapOutline.js";
import "./china.js";

export default {
  methods: {
    initEchartMap() {
      let myChart = echarts.init(this.$refs.myChart);

      let options = {
        series: [
          // 中国地图-外轮廓
          {
            type: "map",
            map: "chinaMapOutline",
            // 不响应鼠标交互
            silent: true,
            //调整以下3个配置项与页面地图重合
            aspectScale: 0.75, // 地图的长宽比
            center: [104.2, 35.9], //设置可见中心坐标,以此坐标来放大和缩小
            zoom: 1.13, //放大级别
            itemStyle: {
              normal: {
                // 地图底色
                areaColor: "#112B9B",
                // 高亮边缘+阴影样式
                borderWidth: 3,
                borderColor: "#36E5FE",
                shadowBlur: 6,
                shadowColor: "#3484F5",
                shadowOffsetX: -3,
                shadowOffsetY: 4,
              },
            },
          },
          // 中国地图
          {
            type: "map",
            map: "china",
            zoom: 1.2,
            aspectScale: 0.75,
            label: {
              // 默认文本标签样式
              normal: {
                color: "white",
                show: true,
              },
              // 高亮文本标签样式
              emphasis: {
                color: "yellow",
                fontSize: 22,
                fontWeight: "bold",
              },
            },
            itemStyle: {
              // 默认区域样式
              normal: {
                // 区域背景透明
                areaColor: "transparent",
                borderColor: "rgba(39,211,233, 1)",
                borderWidth: 1,
              },
              // 高亮区域样式
              emphasis: {
                // 高亮区域背景色
                areaColor: "#01ADF2",
              },
            },
          },
        ],
      };

      myChart.setOption(options);

      // 添加窗口大小改变监听事件,当窗口大小改变时,图表会重新绘制,自适应窗口大小
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initEchartMap();
    });
  },
};
</script>

下载chinaMapOutline.js和china.js

百度网盘下载链接:
https://pan.baidu.com/s/1K0wlmb3Yt223XAykMXpALA
提取码:w160

文件在项目中的地址(与chinaMap.vue同目录)

  • src\components\charts\chinaMap\china.js
  • src\components\charts\chinaMap\chinaMapOutline.js
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值