Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Said in the previous

🎈 is currently working on their own blog site. They want to add 📈, a map of the number of visitors by region, to their management page. They originally planned to use pie charts, but they chose 🌎, a better map, to display it. Here is a summary of this function, but also to share the use of echarts map in VUE, and how to achieve provinces and cities drilling linkage 📝

experience

Jyeontu. Xyz/JDemo / # / chi…

The introduction of echarts

NPM download

npm install echarts
Copy the code

Introduced the CDN

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
></script>
Copy the code

– Introduced China map china.js

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"
></script>
Copy the code

Configure China map

Define a DIV as the map’s carrier

render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "main",},style: {
        height: "450px".width:'600px'.margin: 'auto'}}); },Copy the code

Sets the value for each province

  • Defining provincial data
data() {
    return {
      dataList: [{name: "South Sea Islands" },
        { ename: "beijing".name: "Beijing"},
        { ename: "tianjin".name: "Tianjin" },
        { ename: "shanghai".name: "Shanghai" },
        { ename: "chongqing".name: "Chongqing" },
        { ename: "hebei".name: "Hebei" },
        { ename: "henan".name: "Henan"},
        { ename: "yunnan".name: "Yunnan" },
        { ename: "liaoning".name: "Liaoning" },
        { ename: "heilongjiang".name: "Heilongjiang" },
        { ename: "hunan".name: "Hunan"},
        { ename: "anhui".name: "Anhui province" },
        { ename: "shandong".name: "Shandong" },
        { ename: "xinjiang".name: "Xinjiang" },
        { ename: "jiangsu".name: "Jiangsu" },
        { ename: "zhejiang".name: "Zhejiang" },
        { ename: "jiangxi".name: "Jiangxi" },
        { ename: "hubei".name: "Hubei" },
        { ename: "guangxi".name: "Guangxi"},
        { ename: "gansu".name: "Gansu" },
        { ename: "shanxi".name: "Shanxi" },
        { ename: "neimenggu".name: Inner Mongolia },
        { ename: "shanxi1".name: "Shaanxi" },
        { ename: "jilin".name: "Jilin" },
        { ename: "fujian".name: "Fujian" },
        { ename: "guizhou".name: "Guizhou" },
        { ename: "guangdong".name: "Guangdong" },
        { ename: "qinghai".name: "Qinghai" },
        { ename: "xizang".name: "Tibet" },
        { ename: "sichuan".name: "Sichuan" },
        { ename: "ningxia".name: "The ningxia" },
        { ename: "hainan".name: "Hainan" },
        { name: "Taiwan"},
        { ename: "xianggang".name: "Hong Kong" },
        { ename: "aomen".name: "Macau"},]}; },Copy the code
  • Assign values to provinces at random
let dataList = this.dataList;
for(let i = 0; i < dataList.length; i++){
    dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
}
Copy the code

Mouse hover display

The tooltip in Option sets the data display to hover over provinces

// Mouse hover prompt box
series: [{name: "Province".type: "map".geoIndex: 0.data: this.dataList,
  },
],
tooltip: {
  // Data formatting
  formatter: function(params, callback) {
    return (
      params.seriesName + "<br />" + params.name + "："+ params.value ); }},Copy the code

The following figure shows the data hint of the mouse hovering over Guangdong 👇

VisualMap Indicates the configuration of numerical mapping

In min and Max, the larger the value, the darker the area.

visualMap: {
    min: 0./ / the minimum
    max: 1000./ / Max
    left: "left".// On the left side of the map
    top: "bottom".// Located below the map
    text: ["High"."Low"].// The value range text
    inRange: {
        color: ["#e0ffff"."blue"].// The color of the value range
    },
    show: true./ / note
},
Copy the code

Geo map drawing

geo: {
  map: "china".// Import map data
  roam: false.// Do not enable zooming and panning
  zoom: 1.// The zoom of the camera
  label: {
    normal: {
      show: true.fontSize: "10".color: "Rgba (0,0,0,0.7)",}},itemStyle: {
    normal: {
      borderColor: "Rgba (0, 0, 0, 0.2)",},emphasis: { // Highlight the display Settings
      areaColor: "skyblue".// Mouse to select region color
      shadowOffsetX: 0.shadowOffsetY: 0.shadowBlur: 20.borderWidth: 0.shadowColor: "Rgba (0, 0, 0, 0.5)",}}},Copy the code

Province region click event

Provincial driller linkage can be realized through this click event, and click to jump to the provincial map page. On the provincial map page, map data of different provinces can be rendered according to the incoming parameters. The specific implementation will be described later.

myChart.on("click".function(params) {
    if(! params.data.ename){ alert('暂无' + params.name + 'Map data');
      return;
    }
    _this.$router.push({
      path: "/province".query: { provinceName: params.data.ename, province: params.name },
    });
});
Copy the code

The complete code

<script>
export default {
  render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "main",},style: {
        height: "450px".width:'600px'.margin: 'auto'}}); },data() {
    return {
      dataList: [{name: "South Sea Islands" },
        { ename: "beijing".name: "Beijing"},
        { ename: "tianjin".name: "Tianjin" },
        { ename: "shanghai".name: "Shanghai" },
        { ename: "chongqing".name: "Chongqing" },
        { ename: "hebei".name: "Hebei" },
        { ename: "henan".name: "Henan"},
        { ename: "yunnan".name: "Yunnan" },
        { ename: "liaoning".name: "Liaoning" },
        { ename: "heilongjiang".name: "Heilongjiang" },
        { ename: "hunan".name: "Hunan"},
        { ename: "anhui".name: "Anhui province" },
        { ename: "shandong".name: "Shandong" },
        { ename: "xinjiang".name: "Xinjiang" },
        { ename: "jiangsu".name: "Jiangsu" },
        { ename: "zhejiang".name: "Zhejiang" },
        { ename: "jiangxi".name: "Jiangxi" },
        { ename: "hubei".name: "Hubei" },
        { ename: "guangxi".name: "Guangxi"},
        { ename: "gansu".name: "Gansu" },
        { ename: "shanxi".name: "Shanxi" },
        { ename: "neimenggu".name: Inner Mongolia },
        { ename: "shanxi1".name: "Shaanxi" },
        { ename: "jilin".name: "Jilin" },
        { ename: "fujian".name: "Fujian" },
        { ename: "guizhou".name: "Guizhou" },
        { ename: "guangdong".name: "Guangdong" },
        { ename: "qinghai".name: "Qinghai" },
        { ename: "xizang".name: "Tibet" },
        { ename: "sichuan".name: "Sichuan" },
        { ename: "ningxia".name: "The ningxia" },
        { ename: "hainan".name: "Hainan" },
        { name: "Taiwan"},
        { ename: "xianggang".name: "Hong Kong" },
        { ename: "aomen".name: "Macau"},]}; },methods: {
    initEchart() {
      let dataList = this.dataList;
      for(let i = 0; i < dataList.length; i++){
        dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
      }
      const _this = this;
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        tooltip: {
          // Data formatting
          formatter: function(params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "："+ params.value ); }},visualMap: {
          min: 0.max: 1000.left: "left".top: "bottom".text: ["High"."Low"].// The value range text
          inRange: {
            color: ["#e0ffff"."blue"].// The color of the value range
          },
          show: true./ / note
        },
        geo: {
          map: "china".// Import map data
          roam: false.// Do not enable zooming and panning
          zoom: 1.// The zoom of the camera
          label: {
            normal: {
              show: true.fontSize: "10".color: "Rgba (0,0,0,0.7)",}},itemStyle: {
            normal: {
              borderColor: "Rgba (0, 0, 0, 0.2)",},emphasis: { // Highlight the display Settings
              areaColor: "skyblue".// Mouse to select region color
              shadowOffsetX: 0.shadowOffsetY: 0.shadowBlur: 20.borderWidth: 0.shadowColor: "Rgba (0, 0, 0, 0.5)",}}},// Mouse hover prompt box
        series: [{name: "Province".type: "map".geoIndex: 0.data: this.dataList,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click".function(params) {
        if(! params.data.ename){ alert('暂无' + params.name + 'Map data');
          return;
        }
        _this.$router.push({
          path: "/province".query: { provinceName: params.data.ename, province: params.name }, }); }); }},mounted() {
    this.initEchart(); }}; </script>Copy the code

Display effect

Configure provincial maps

Click the event to jump to the provincial map page through the provinces and regions of the Map of China and pass the corresponding parameters. On the provincial map page, different map data can be rendered according to the input parameters.

Introduce province map resources

As shown in the figure below, I have put the JS version and JSON version of the province map resources in the source code. Here I use JSON version of the data. Students who need it can directly download it.

Writing simple pages

Back button + provincial map.

<div>
    <div @click="goBack()">return</div>
    <div :id="id" class="o-echarts"></div>
</div>
Copy the code

Map configuration

The configuration rules of China map are the same as those of China map

option: {
    title: {
      text: ' '.top: '8%'.left: '8%'.textStyle: {
        fontSize: 14.fontWeight: 300.color: '#b6d7ff'}},tooltip: {
      padding: 0.// Data formatting
      formatter: function (params, callback) {
        return params.name + '：' + params.value
      }
    },
    legend: {
      orient: 'vertical'.top: '9%'.left: '5%'.icon: 'circle'.data: [].selectedMode: 'single'.selected: {},
      itemWidth: 12.itemHeight: 12.itemGap: 30.inactiveColor: '#b6d7ff'.textStyle: {
        color: '#ec808d'.fontSize: 14.fontWeight: 300.padding: [0.0.0.15]}},visualMap: {
      min: 0.max: 500.left: 'left'.top: 'bottom'.text: ['high'.'low'].// The value range text
      inRange: {
        color: ['#e0ffff'.'blue'] // The color of the value range
      },
      show: true / / note
    },
    geo: {
      map: ' '.roam: false.// Do not enable zooming and panning
      zoom: 0.6.// The zoom of the camera
      label: {
        normal: {
          show: true.fontSize: 10.color: '# 000'
        },
        emphasis: {
          show: true.color: 'blue',}},itemStyle: {
        normal: {
          borderColor: 'rgba (0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: 'skyblue'.// Mouse to select region color
          shadowOffsetX: 0.shadowOffsetY: 0.shadowBlur: 20.borderWidth: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}},left: '5%'.right: '5%'.top: '5%'.bottom: '5%'
    },
    series: [{name: 'Annual Total Project Data Query'.type: 'map'.geoIndex: 0.// Indispensable, otherwise there is no tooltip effect
        data: []}],provinceJSON: {},
    provinceName: ' '
  }
Copy the code

Configure different map data according to the parameters

const provinceName = this.$route.query.provinceName
const province = this.$route.query.province
this.provinceName = provinceName
this.provinceJSON = require('.. /.. /utils/ province /json(province)/' + provinceName)
this.option.geo.map = province
this.echartObj = echarts.init(document.getElementById(this.id))
echarts.registerMap(province, this.provinceJSON)
this.echartObj.setOption(this.option);
window.addEventListener('resize'.() = > {
  if (this.echartObj && this.echartObj.resize) {
    this.echartObj.resize()
  }
})
Copy the code

The complete code

<template>
  <div>
    <div @click="goBack()">return</div>
    <div :id="id" class="o-echarts"></div>
  </div>
</template>

<script>
export default {
  name: 'province',
  data () {
    return {
      id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null.option: {
        title: {
          text: ' '.top: '8%'.left: '8%'.textStyle: {
            fontSize: 14.fontWeight: 300.color: '#b6d7ff'}},tooltip: {
          padding: 0.// backgroundColor: "transparent",
          // Data formatting
          formatter: function (params, callback) {
            return params.name + '：' + params.value
          }
        },
        legend: {
          orient: 'vertical'.top: '9%'.left: '5%'.icon: 'circle'.data: [].selectedMode: 'single'.selected: {},
          itemWidth: 12.itemHeight: 12.itemGap: 30.inactiveColor: '#b6d7ff'.textStyle: {
            color: '#ec808d'.fontSize: 14.fontWeight: 300.padding: [0.0.0.15]}},visualMap: {
          min: 0.max: 500.left: 'left'.top: 'bottom'.text: ['high'.'low'].// The value range text
          inRange: {
            color: ['#e0ffff'.'blue'] // The color of the value range
          },
          show: true / / note
        },
        geo: {
          map: ' '.roam: false.// Do not enable zooming and panning
          zoom: 0.6.// The zoom of the camera
          label: {
            normal: {
              show: true.fontSize: 10.color: '# 000'
            },
            emphasis: {
              show: true.color: 'blue',}},itemStyle: {
            normal: {
              borderColor: 'rgba (0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: 'skyblue'.// Mouse to select region color
              shadowOffsetX: 0.shadowOffsetY: 0.shadowBlur: 20.borderWidth: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}},left: '5%'.right: '5%'.top: '5%'.bottom: '5%'
        },
        series: [{name: 'Annual Total Project Data Query'.type: 'map'.geoIndex: 0.// Indispensable, otherwise there is no tooltip effect
            data: []}],provinceJSON: {},
        provinceName: ' '
      }
    }
  },
  mounted () {
    const provinceName = this.$route.query.provinceName
    const province = this.$route.query.province
    this.provinceName = provinceName
    this.provinceJSON = require('.. /.. /utils/ province /json(province)/' + provinceName)
    this.option.geo.map = province
    this.echartObj = echarts.init(document.getElementById(this.id))
    echarts.registerMap(province, this.provinceJSON)
    this.echartObj.setOption(this.option);
    window.addEventListener('resize'.() = > {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize()
      }
    })
  },
  methods: {
    goBack () {
      this.$router.go(-1)}}}</script>
<style lang="scss">
.o-echarts {
  height: 400px;
  width: 600px;
  margin: auto;
}
</style>
Copy the code

Past wonderful

In order to learn mo from Yu, I actually developed such a plug-in

Programmer romance – lovers daily small program

JavaScript bidirectional linked list implementation LRU cache algorithm

JavaScript bidirectional linked list implementation LFU cache algorithm

JavaScript implements prefix trees

Vue simple implementation of the word cloud component

The source address

Gitee: gitee.com/zheng_yongt…

Said in the back

🎉 this is JYeontu, now a front-end engineer, who can brush algorithm problems in spare time. Usually, he likes playing badminton 🏸 and writing some things. He records 📋 for himself, but also hopes that he can help us a little. Thank you for your support, and we’ll see you at 🙌.