Foreword:

Everyone knows that in general, if you want to use the front-end to set up a map of China , you need to use the canvas to write it. Not only is there a lot of code, but the logic processing is troublesome. Today, we will use a plug-in to make various maps easily.

What is Echarts plugin

echars is a tree.
Whether the icon is simple or complex depends on how many branches you draw on the tree. The
tree is the dom container, initialized, mounted on the dom container, and the branches are configured
in the example. , there are configurations in the specific code, check the specific effect in the document

Finished product display of China map

insert image description here

step:

1. First download the Echarts plug-in and download the required version. I am using version 4.9.0 here (the latest version generally has some bugs)

cnpm install [email protected] --save

1. Introduce the Echarts plug-in (in vue, it is generally introduced into the main.js component)

import echarts from 'echarts'

// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

1. Steps to use in js:

The address of introducing the map of China is under the [email protected]@echarts\map\json folder

1. 先设置一个显示的标签
<div id="main" style="width: 600px;height:400px;"></div>
2. 引入中国地图代码
import geoJson from "echarts/map/json/china";
3. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
4. 注册地图
this.$echarts.registerMap("china", geoJson);
5. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
6. 将配置和数据添加到实例中
myChart.setOption(option);

The registered map is a map of China, which can only be used when the geo component or mep icon type is included.
Maps are divided into: world map, China map, province map, urban map

For the meaning of the following code, you can jump to the official website to view it

Complete China map code

<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script>
import geoJson from "echarts/map/json/china";
export default {
  data() {
    return {};
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("main"));
    // 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
    // 地图：世界地图，中国地图，省份地图，市区地图
    this.$echarts.registerMap("china", geoJson);
    myChart.setOption({
      // 背景色
      backgroundColor: "rgb(121,145,200)",
      // 配置项(组件)
      geo: {
        map: "china",
        // 地图的长宽比例
        aspectScale: 0.75,
        // 图层
        zoom: 1.1,
        // 样式
        itemStyle: {
          // 标准
          normal: {
            // 地图区域的颜色
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              // 颜色的步骤
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c",
                },
                {
                  offset: 1,
                  color: "#274d68",
                },
              ],
              // 延长作用域
              globalCoord: true,
            },
            // 盒子的阴影
            shadowColor: "rgb(58,115,192)",
            // 偏移
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          },
        },
        region: [
          {
            name: "南海诸岛",
            itemStyle: {
              opacity: 0,
            },
          },
        ],
      },
      series: [
        // 配置地图相关的数据参数
        {
          type: "map",
          label: {
            normal: {
              // 显示文字
              show: true,
              textStyle: {
                color: "#1DE9B6",
              },
            },
            emphasis: {
              textStyle: {
                color: "rgb(183,185,14)",
              },
            },
          },
          // 图层
          zoom: 1.1,
          map: "china",
          itemStyle: {
            normal: {
              // 背景色
              backgroundColor: "rgb(147,235,248)",
              // 边框
              borderWidth: 1,
              // 区域颜色
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                // 文档
                r: 0.8,
                colorStops: [
                  { offset: 0, color: "rgb(34,54,150)" },
                  { offset: 1, color: "rgb(89,128,142)" },
                ],
                // 全局生效
                globalCoord: true,
              },
            },
            // 高亮效果
            emphasis: {
              areaColor: "rgb(46,229,206)",
              borderWidth: 0.1,
            },
          },
        },
      ],
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
  }
}
</style>

Summarize:

The above is that vue is based on the Echarts plug-in to realize the function of China map. If you don’t understand it, you can ask me in the comment area or chat with me privately. Some new functions will be released in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog

Use the Echarts plug-in to complete the map of China

Table of contents