vue cli3.0结合echarts3.0与地图的使用方法示例

下面是关于“vue cli 3.0结合echarts 3.0与地图的使用方法示例”的完整攻略。

步骤一：创建基于vue-cli3.0的工程

Vue CLI是一个基于vue.js的全新工具，用于快速构建vue.js项目，它提供了：node命令行交互工具、快速原型开发、自动代码规范检测、构建和部署功能等。

详细步骤：

1. 确保你已经安装了Node.js，命令行输入node -v，查看是否已经安装。
2. 安装Vue CLI，命令行输入npm install -g @vue/cli，等待安装完成。
3. 创建基于Vue CLI的工程，命令行输入vue create my-project，my-project为你的项目名称，可以根据需求更改。
4. 创建完成后，命令行进入项目目录，输入cd my-project，运行项目，输入npm run serve，在浏览器中输入http://localhost:8080，可以看到一个欢迎页。

步骤二：安装echarts和vue-echarts

详细步骤：

1. 在项目目录下安装echarts和vue-echarts，命令行输入npm install echarts vue-echarts --save
2. 在main.js文件中引入echarts和vue-echarts。

import echarts from 'echarts'
import 'echarts/map/js/world.js' // 引入世界地图
import VueECharts from 'vue-echarts'

Vue.component('v-chart', VueECharts)
Vue.prototype.$echarts = echarts // 将echarts挂在Vue原型上全局使用

步骤三：创建地图组件

详细步骤：

1. 在components文件夹中创建Map.vue地图组件。
2. 在Map.vue中使用vue-echarts绘制地图。

<template>
  <v-chart ref="worldMap" class="map" :options="options"></v-chart>
</template>

<script>
  export default {
    name: 'Map',
    data () {
      return {
        options: { // echarts配置项
          title: {
            text: '世界地图',
            subtext: '数据来源：xxx公司'
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true
          },
          series: [
            {
              type: 'map',
              mapType: 'world',
              roam: false, // 禁止滚轮缩放
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: [
                { name: 'China', value: 200 },
                { name: 'United States', value: 300 },
                { name: 'Japan', value: 100 }
              ]
            }
          ]
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initMap()
      })
    },
    methods: {
      initMap () {
        this.$refs.worldMap.chart.resize()
      }
    },
    watch: {
      '$route' () {
        this.initMap()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .map {
    height: 100%;
    width: 100%;
  }
</style>

示例一：更新地图数据

在Map.vue中添加一个按钮，点击按钮可以更新地图数据。

<template>
  <div>
    <button @click="updateData">更新数据</button>
    <v-chart ref="worldMap" class="map" :options="options"></v-chart>
  </div>
</template>

<script>
  export default {
    name: 'Map',
    data () {
      return {
        options: { // echarts配置项
          title: {
            text: '世界地图',
            subtext: '数据来源：xxx公司'
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true
          },
          series: [
            {
              type: 'map',
              mapType: 'world',
              roam: false, // 禁止滚轮缩放
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: [
                { name: 'China', value: 200 },
                { name: 'United States', value: 300 },
                { name: 'Japan', value: 100 }
              ]
            }
          ]
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initMap()
      })
    },
    methods: {
      initMap () {
        this.$refs.worldMap.chart.resize()
      },
      updateData () {
        const newData = [
          { name: 'Russia', value: 500 },
          { name: 'Canada', value: 600 },
          { name: 'Australia', value: 400 }
        ]
        // 更新地图数据
        this.$refs.worldMap.chart.setOption({
          series: [
            {
              data: newData
            }
          ]
        })
      }
    },
    watch: {
      '$route' () {
        this.initMap()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .map {
    height: 100%;
    width: 100%;
  }
</style>

示例二：鼠标事件

在Map.vue中添加鼠标事件，当鼠标移动到地图上时显示对应的省份名称。

<template>
  <v-chart ref="worldMap" class="map" :options="options" @mousemove="showName"></v-chart>
</template>

<script>
  export default {
    name: 'Map',
    data () {
      return {
        options: { // echarts配置项
          title: {
            text: '世界地图',
            subtext: '数据来源：xxx公司'
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true
          },
          series: [
            {
              type: 'map',
              mapType: 'world',
              roam: false, // 禁止滚轮缩放
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: [
                { name: 'China', value: 200 },
                { name: 'United States', value: 300 },
                { name: 'Japan', value: 100 }
              ]
            }
          ]
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initMap()
      })
    },
    methods: {
      initMap () {
        this.$refs.worldMap.chart.resize()
      },
      showName (params) {
        if (params.name) {
          console.log(params.name) // 控制台输出省份名称
        }
      }
    },
    watch: {
      '$route' () {
        this.initMap()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .map {
    height: 100%;
    width: 100%;
  }
</style>

以上就是“vue cli 3.0结合echarts 3.0与地图的使用方法示例”的完整攻略，供您参考。