vue使用Echarts繪製地圖

时光独醒發表於2024-08-26
VueEcharts地圖

1.安裝echarts和echarts-map外掛

npm install echarts --save
npm install echarts-map --save

2.在元件中引入echarts和echarts-map

import echarts from 'echarts'
import 'echarts/map/js/china' // 引入中國地圖

3.在mounted鉤子函式中初始化echarts例項

mounted () {
  // 初始化echarts例項
  this.chart = echarts.init(this.$refs.map)
  // 繪製地圖
  this.drawMap()
}

4.編寫繪製地圖的函式

drawMap () {
  // 地圖資料
  const geoData = require('echarts/map/json/china.json')
  // 註冊地圖
  echarts.registerMap('china', geoData)
  // 繪製地圖
  this.chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} (件)'
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true
    },
    series: [
      {
        name: '地圖名稱',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [
          { name: '北京', value: 100 },
          { name: '上海', value: 200 },
          { name: '廣州', value: 300 },
          { name: '深圳', value: 400 },
          { name: '杭州', value: 500 },
          { name: '重慶', value: 600 },
          { name: '成都', value: 700 },
          { name: '武漢', value: 800 },
          { name: '西安', value: 900 },
          { name: '南京', value: 1000 }
        ]
      }
    ]
  })
}

5.在模板中新增echarts容器

<template>
  <div ref="map" style="width: 100%; height: 500px;"></div>
</template>

相關文章