ECharts is used in the Vue project to create maps of the world and China

This article was first written on my personal website at liuxianyu.cn/article/vue…

The company needs to use ECharts to display the world map and China map in the recent project, record it.

One, achieve the effect

Introduction of components and instructions

1. V-charts: Github official documents of chart components packaged based on Vue2.0 and ECharts

2. Please refer to the documentation on ECharts’ official website

3, please refer to ECharts configuration items document for color, text and other style changes

4, the import ‘.. /.. /.. /.. / node_modules/echarts/map/js/China. Js’ introduction echarts own the file such as China, the world, pay attention to the introduction of the path

Iii. Component code of the world map (some national data has been omitted, which can be copied in the code file)

World – code file

<template>
  <div class="echarts-box">
    <div class="title-box">
      <img class="label" src="~assets/imgs/label2.png" alt="">
      <div class="title">Alumni world Distribution</div>
    </div>
    <v-chart class="echarts" :options="polar" @dblclick="dblClick" @click="doClick"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import '.. /.. /.. /.. /node_modules/echarts/map/js/world.js'

  export default {
    name: 'DailyActiveChart'.components: { ECharts },
    data () {
      return {
        polar: {
          dataRange: {
            show: true.min: 0.max: 1000000.text: ['High'.'Low'].realtime: true.calculable: true.color: ['#7CF9D0'.'#7CC0FE'.'#DEF6FF']},tooltip: {
            trigger: 'item'
          },
          geo: {
            map: 'world'.label: {
              emphasis: {
                show: false}},roam: false.silent: true.itemStyle: {
              normal: {
                areaColor: '#37376e'.borderColor: '# 000'
              },
              emphasis: {
                areaColor: '#3E98FE'}}},series: [{
            name: 'Alumni Number'.type: 'map'.mapType: 'world'.itemStyle: {
              normal: {
                borderWidth: 0.5.borderColor: '#A9A9A9'.areaStyle: {
                  color: '#37376e'}},emphasis: {
                areaColor: '#3E98FE'.borderColor: '#fff'.borderWidth: 0}},mapLocation: {
              y: 100
            },
            data: [{
              name: 'Afghanistan'.value: 28397.812
            },
              {
                name: 'Angola'.value: 19549.124
              },
              {
                name: 'Albania'.value: 3150.143
              },
              {
                name: 'United Arab Emirates'.value: 8441.537
              },
              {
                name: 'Yemen'.value: 22763.008
              },
              {
                name: 'South Africa'.value: 51452.352
              },
              {
                name: 'Zambia'.value: 13216.985
              },
              {
                name: 'Zimbabwe'.value: 13076.978}].symbolSize: 12.label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false}}}]}}},methods: {
      // Double-click the event
      dblClick (v) {
        console.log(v)
      },
      // Click events
      doClick (v) {
        console.log(v)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .echarts-box {
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    .title-box {
      display: flex;
      .label {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
      .title {
        color: #4C4C4C;
        font-size: 18px; }}.echarts {
      width: 100%;
      height: 600px; }}</style>
Copy the code

Iv. Component code of China map (some data of provinces have been omitted, which can be copied in the code file)

China – code file

<template>
  <div class="echarts-box">
    <v-chart class="echarts" :options="polar" @dblclick="dblClick" @click="doClick"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import '.. /.. /.. /.. /node_modules/echarts/map/js/china.js'

  export default {
    name: 'DailyActiveChart'.components: { ECharts },
    data () {
      return {
        polar: {
          title: {
            text: 'Alumni Map of China'
          },
          tooltip: {}, // Mouse over the floating prompt box in the picture
          dataRange: {
            show: true.min: 0.max: 1000.text: ['High'.'Low'].realtime: true.calculable: true
          },
          geo: { // This is the key configuration area
            map: 'china'.// map of China
            roam: true.label: {
              normal: {
                show: true.// Whether to display the corresponding place name
                textStyle: {
                  color: 'rgba (0,0,0,0.4)'}}},itemStyle: {
              normal: {
                borderColor: 'rgba (0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null.shadowOffsetX: 0.shadowOffsetY: 0.shadowBlur: 20.borderWidth: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}},series: [{
            type: 'scatter'.coordinateSystem: 'geo' // Corresponds to the configuration above
          },
            {
              name: 'Startup times'.// Title of the float box
              type: 'map'.geoIndex: 0.data: [{
                name: 'Beijing'.value: 599
              }, {
                name: 'Shanghai'.value: 142
              }, {
                name: 'Heilongjiang'.value: 44
              }, {
                name: 'shenzhen'.value: 92
              }, {
                name: 'hubei'.value: 810
              }, {
                name: 'sichuan'.value: 453
              }] // This is the data, that is, the array can be placed outside or written directly}}}},methods: {
      // Double-click the event
      dblClick (v) {
        console.log(v)
      },
      // Click events
      doClick (v) {
        console.log(v)
      }
    },
    mounted () {
      this.polar.series[1].data.push({
        name: 'zhejiang'.value: 324}}})</script>

<style lang="scss" scoped>
  .echarts-box {
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    .echarts {
      width: 100%;
      height: 600px; }}</style>
Copy the code