vue echarts 市县地图

Vue ECharts 是 Vue.js 框架和 ECharts 数据可视化库的结合体，它允许你在 Vue 应用中轻松地集成 ECharts 地图组件，包括市县地图。ECharts 的市县地图数据通常包含全国或特定地区的地理位置信息，可以用于展示各类地理相关的数据，如人口分布、经济指标等。

在 Vue 中使用 ECharts 市县地图的一般步骤如下：

1. 安装依赖：首先需要安装 Vue-ECharts 插件，可以通过npm或yarn添加到项目中。

   npm install vue-echarts @vue-echarts/core --save

2. 引入并配置：在 Vue 组件中引入 ECharts 实例，并配置地图数据和选项。

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

<script>
import { ECharts } from 'vue-echarts';

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      chart: null,
      provincesData: ... // 地图省份的数据，例如名称和ID
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = new ECharts({
        option: {
          map: 'china', // 或者具体省份名
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.provincesData.map(item => ({ name: item.name, value: item.value })),
            }
          ]
        }
      });
      this.$refs.map.setOption(this.chart.getOption());
    }
  }
};
</script>