echarts 各省地圖(史上最強版本,開箱即用)

大家好,最近忙着自己寫開源項目,又不能在公司寫,所以一直沒有更新什麼東西。

今天就給大家一些使用echarts的心得, 使用echarts各省地圖,本人寫的這些代碼在一年前就已經搞定了,但是發現網上一直沒有什麼好的案例,所以隨手發表一下。


本人使用的vue.js + echarts_4.2.1版本。

vue項目添加組件的方式:

npm install echarts --save

廢話不說,直接上代碼。

首先添加

<div class="mymap" :style="this.mapchartStyle" ref="myEchart"></div>

以後引入

import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/province/gansu.js' // 引入中國地圖數據

因爲使用vue.js,所以他有着完整的生命週期,防止內存泄露!

created () {
  this.mapUniondataLoading()
  this.isHeight()
  this.intervalOne = setInterval(() => {
    this.mapUniondataLoading()
  }, 30000)
},
mounted () {
  setTimeout(() => {
    if (this.mapData !== null) {
      this.initUnionChart()
    }
  }, 600)
  this.intervalTwo = setInterval(() => {
    this.initUnionChart()
  }, 30000)
},
beforeDestroy () {
  if (!this.chart) {
    return
  }
  this.chart.dispose()
  this.chart = null
  clearInterval(this.intervalOne)
  clearInterval(this.intervalTwo)
},

然後是核心代碼

initUnionChart () {
      this.chart = echarts.init(this.$refs.myEchart) // 這裏是爲了獲得容器所在位置
      this.chinaConfigure(this.mapData)
    },
    chinaConfigure (dataInput) {
      window.onresize = this.chart.resize
      this.chart.setOption({ // 進行相關配置
        title: {
          text: '',
          x: 'center'
        },
        animation: true,
        // backgroundColor: '#27408B',
        tooltip: {
          trigger: 'item'
        }, // 鼠標移到圖裏面的浮動提示框
        dataRange: {
          show: false,
          min: 0,
          max: 200,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        // visualMap: {
        //   min: 800,
        //   max: 50000,
        //   inRange: {
        //     color: ['lightskyblue','yellow', 'orangered']
        //   }
        // },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'top',
          feature: {
            mark: {show: true},
            restore: {show: true}
          }
        },
        geo: { // 這個是重點配置區
          // map: '甘肅',
          // map: 'china', // 表示中國地圖
          // mapType: '甘肅',
          roam: 'scale',
          label: {
            normal: {
              show: true, // 是否顯示對應地名
              // formatter: '{a}',
              // formatter: function (params) {
              //   console.log('map_params')
              //   console.log(params)
              //   // for (var i = 0; i < this.mapData.length; i++) {
              //     // console.log(this.mapData[i])
              //     // if (this.mapData[i].name === params.name) {
              //       // return params.name + ':' + this.mapData[i].value + ''
              //     // }
              //   // }
              //   return this.mapData.name + ':' + this.mapData.value + ''
              // },
              textStyle: {
                color: '#FFFFFF'
              }
            },
            emphasis: {label: {show: true}}
          },
          itemStyle: {
            normal: {
              borderColor: '#387ba7', // 地圖邊界線的顏色
              areaColor: '#1c3c63', // 地圖整體區域的顏色
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 10
            },
            emphasis: {
              label: {
                show: false
              },
              areaColor: '#EEC900', // 鼠標滑過的顏色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          layoutCenter: ['50%', '50%'],
          layoutSize: this.mapOptionOpts.geo.layoutSize
        },
        series: [{
          name: '測試', // 浮動框的標題
          type: 'map',
          map: '甘肅',
          // roam: false,
          // geoIndex: 0,
          roam: 'scale',
          label: {
            normal: {
              show: true, // 是否顯示對應地名
              // formatter: '{a}',
              formatter: function (params) {
                // console.log('map_params')
                // console.log(params)
                // for (var i = 0; i < this.mapData.length; i++) {
                  // console.log(this.mapData[i])
                  // if (this.mapData[i].name === params.name) {
                    // return params.name + ':' + this.mapData[i].value + ''
                  // }
                // }
                return params.name + ':' + params.value + ''
              },
              textStyle: {
                color: '#7A67EE'
              }
            },
            emphasis: {label: {show: true}}
          },
          itemStyle: {
            normal: {
              borderColor: '#387ba7', // 地圖邊界線的顏色
              areaColor: '#1c3c63', // 地圖整體區域的顏色
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 10
            },
            emphasis: {
              label: {
                show: false
              },
              areaColor: '#EEC900', // 鼠標滑過的顏色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          layoutCenter: ['50%', '50%'],
          layoutSize: this.mapOptionOpts.geo.layoutSize,
          // label: this.labelOption,
          data: this.mapData
        }]
      })
      this.chart.on('click', function (param) {   // 點擊各省後的效果
        this.provinceName = param.name
        console.log(this.provinceName)
      })
    }

好啦。這樣就可以出現當前引入的地圖了。

 

完整代碼如下:

<template>
  <div class="mymap" :style="this.mapchartStyle" ref="myEchart"></div>
</template>

<script>
import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china.js' // 引入中國地圖數據
import '../../../node_modules/echarts/map/js/province/gansu.js' // 引入中國地圖數據
export default {
  data () {
    this.chartSettings = {
      position: 'province/gansu',
      roam: true,
      selectData: true,
      aspectScale: 0.75
      // mapGrid: {
      //   left: auto,
      //   right: auto,
      //   top: auto,
      //   bottom: auto
      // }
    }
    return {
      mapchartStyle: {height: '1200px', width: '1200px'},
      chart: null,
      intervalOne: null,
      intervalTwo: null,
      openWorkLogParams: {
        name: ''
      },
      provinceName: '',
      // mapData: [],
      mapData: [{
        'name': '蘭州市',
        'value': 200
      }, {
        'name': '武威市',
        'value': 142
      }, {
        'name': '白銀市',
        'value': 44
      }, {
        'name': '酒泉市',
        'value': 92
      }, {
        'name': '張掖市',
        'value': 810
      }, {
        'name': '金昌市',
        'value': 170
      }, {
        'name': '甘南藏族自治州',
        'value': 453
      }],
      labelOption: {
        normal: {
          show: true,
          position: 'top',
          distance: 15,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 90,
          // formatter: '{c}  {name|{a}}',
          fontSize: 16,
          rich: {
            name: {
              textBorderColor: '#fff'
            }
          }
        }
      },
      geoCoordMap: {
        '白銀市': [121.15, 31.89],
        '武威市': [109.781327, 39.608266],
        '定西市': [120.38, 37.35],
        '天水市': [117, 36.65],
        '平涼市': [104.37, 31.13],
        '慶陽市': [120.65, 28.01],
        '隴南市': [115.97, 29.71],
        '金昌市': [114.47, 36.6],
        '張掖市': [119.72, 30.23],
        '嘉峪關市': [103.73, 36.03],
        '酒泉市': [116.83, 38.33],
        '臨夏回族自治州': [118.35, 35.05],
        '甘南藏族自治州': [106.110698, 30.837793],
        '蘭州市': [117.2, 39.13]
      },
      mapOptionOpts: {
        geo: {
          layoutCenter: ['50%', '50%'],
          layoutSize: 1000
        }
      },
      res: [],
      mapwidth: '500px'
    }
  },
  created () {
    this.mapUniondataLoading()
    this.isHeight()
    this.intervalOne = setInterval(() => {
      this.mapUniondataLoading()
    }, 30000)
  },
  mounted () {
    setTimeout(() => {
      if (this.mapData !== null) {
        this.initUnionChart()
      }
    }, 600)
    this.intervalTwo = setInterval(() => {
      this.initUnionChart()
    }, 30000)
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    clearInterval(this.intervalOne)
    clearInterval(this.intervalTwo)
  },
  methods: {
    isHeight () {
      this.mapchartStyle.height = (document.body.clientHeight - 60) * 7 / 12 + 9 + 'px'
      this.mapwidth = (document.body.clientWidth) * 2 / 5 + 'px'
      if (((document.body.clientHeight) * 7 / 12) < ((document.body.clientWidth) * 2 / 5)) {
        this.mapOptionOpts.geo.layoutSize = (document.body.clientHeight) * 7 / 12
      }
      if (((document.body.clientHeight) * 7 / 12) >= ((document.body.clientWidth) * 2 / 5)) {
        this.mapOptionOpts.geo.layoutSize = (document.body.clientWidth) * 2 / 5 - 30
      }
    },
    // 這段代碼是項目裏用的,在案例中沒有用
    convertDataFunc () {
      for (var i = 0; i < this.mapData.length; i++) {
        var geoCoord = this.geoCoordMap[this.mapData[i].name]
        if (geoCoord) {
          this.res.push({
            name: this.mapData[i].name,
            value: geoCoord.concat(this.mapData[i].value)
          })
        }
      }
    },
    initUnionChart () {
      this.chart = echarts.init(this.$refs.myEchart) // 這裏是爲了獲得容器所在位置
      this.chinaConfigure(this.mapData)
    },
    chinaConfigure (dataInput) {
      window.onresize = this.chart.resize
      this.chart.setOption({ // 進行相關配置
        title: {
          text: '',
          x: 'center'
        },
        animation: true,
        // backgroundColor: '#27408B',
        tooltip: {
          trigger: 'item'
        }, // 鼠標移到圖裏面的浮動提示框
        dataRange: {
          show: false,
          min: 0,
          max: 200,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        // visualMap: {
        //   min: 800,
        //   max: 50000,
        //   inRange: {
        //     color: ['lightskyblue','yellow', 'orangered']
        //   }
        // },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'top',
          feature: {
            mark: {show: true},
            restore: {show: true}
          }
        },
        geo: { // 這個是重點配置區
          // map: '甘肅',
          // map: 'china', // 表示中國地圖
          // mapType: '甘肅',
          roam: 'scale',
          label: {
            normal: {
              show: true, // 是否顯示對應地名
              // formatter: '{a}',
              // formatter: function (params) {
              //   console.log('map_params')
              //   console.log(params)
              //   // for (var i = 0; i < this.mapData.length; i++) {
              //     // console.log(this.mapData[i])
              //     // if (this.mapData[i].name === params.name) {
              //       // return params.name + ':' + this.mapData[i].value + ''
              //     // }
              //   // }
              //   return this.mapData.name + ':' + this.mapData.value + ''
              // },
              textStyle: {
                color: '#FFFFFF'
              }
            },
            emphasis: {label: {show: true}}
          },
          itemStyle: {
            normal: {
              borderColor: '#387ba7', // 地圖邊界線的顏色
              areaColor: '#1c3c63', // 地圖整體區域的顏色
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 10
            },
            emphasis: {
              label: {
                show: false
              },
              areaColor: '#EEC900', // 鼠標滑過的顏色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          layoutCenter: ['50%', '50%'],
          layoutSize: this.mapOptionOpts.geo.layoutSize
        },
        series: [{
          name: '測試', // 浮動框的標題
          type: 'map',
          map: '甘肅',
          // roam: false,
          // geoIndex: 0,
          roam: 'scale',
          label: {
            normal: {
              show: true, // 是否顯示對應地名
              // formatter: '{a}',
              formatter: function (params) {
                // console.log('map_params')
                // console.log(params)
                // for (var i = 0; i < this.mapData.length; i++) {
                  // console.log(this.mapData[i])
                  // if (this.mapData[i].name === params.name) {
                    // return params.name + ':' + this.mapData[i].value + ''
                  // }
                // }
                return params.name + ':' + params.value + ''
              },
              textStyle: {
                color: '#7A67EE'
              }
            },
            emphasis: {label: {show: true}}
          },
          itemStyle: {
            normal: {
              borderColor: '#387ba7', // 地圖邊界線的顏色
              areaColor: '#1c3c63', // 地圖整體區域的顏色
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 10
            },
            emphasis: {
              label: {
                show: false
              },
              areaColor: '#EEC900', // 鼠標滑過的顏色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          layoutCenter: ['50%', '50%'],
          layoutSize: this.mapOptionOpts.geo.layoutSize,
          // label: this.labelOption,
          data: this.mapData
        }]
      })
      var self = this
      this.chart.on('click', function (param) {   // 點擊各省後的效果
        this.provinceName = param.name
        console.log(this.provinceName)
      })
    }
  }
}
</script>
<style scoped>
.ve-map {
  height: 600px;
}
.titleClass {
  height: 2.05em;
  line-height: 2.05em;
  /* width: 100%; */
  font-weight:bold;
  font-size: 1.3em;
  text-align: center;
  color: #F0FFF0;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  background-clip: padding-box;
  /* box-shadow: 0 0 9px #cac6c6; */
}
</style>

效果圖:

當然,我當前引入的是甘肅省地圖,如果需要引入別的省圖,需要修改引入資源路徑

import '../../../node_modules/echarts/map/js/province/gansu.js' // 引入地圖數據

並且需要修改變量

需要把series.map的‘甘肅’ 改爲 對應引用資源的省市。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章