echarts 高亮轮廓的中国地图

原创

朝阳39 2022-07-12 17:24:32 ©著作权

文章标签 echarts javascript vue.js 高亮窗口大小 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者朝阳39的原创作品，请联系作者获取转载授权，否则将追究法律责任

echarts 高亮轮廓的中国地图_vue.js

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>