vue3 Echarts地图 js版本

Vue3 ECharts 地图插件允许你在 Vue.js 3.x 应用程序中集成 ECharts 的强大图表功能，特别是地图组件。ECharts 提供了丰富的地理数据支持，包括中国、世界和其他国家的地图。在js版本中，你需要安装`echarts-for-react`（适用于基于React的项目）或`vue-echarts`（适用于Vue项目），这两个库都是将ECharts封装为Vue或React组件的形式。

使用步骤大致如下：

1. 安装依赖：对于Vue项目，通过npm或yarn安装`@vue-echarts/core` 和 `echarts`。

npm install @vue-echarts/core echarts
# 或者
yarn add @vue-echarts/core echarts

2. 引入并配置地图：

import { Map } from '@vue-echarts/core'
// 初始化地图实例
export default {
  components: {
    Map
  },
  data() {
    return {
      myChart: null,
    }
  },
  mounted() {
    this.myChart = new Map({
      // 配置地图的相关选项，如地图类型、数据等
      option: {
        map: 'china', // 示例为中国地图
        // 更详细的配置请参考ECharts官方文档
      }
    })
    // 渲染地图
    this.myChart.setOption(this.option)
  }
}

3. 使用组件展示地图：

<template>
  <div ref="chartContainer"></div>
</template>

<script>
...
export default {
  methods: {
    resizeChart() {
      this.myChart.resize();
    },
  },
  watch: {
    '$refs.chartContainer': {
      handler(val) {
        this.myChart.setOption(this.option, true); // 使用resize属性自动调整大小
      },
      deep: true,
    },
  },
}
...
</script>