vue2 项目用 echarts 绘制省份地图加标注点，放大缩小地图，以及点击标注点

在Vue 2项目中，使用Echarts绘制省份地图并添加标注点、缩放和平移，以及点击事件处理通常需要以下几个步骤：

1. **安装依赖**:
首先，你需要在项目中引入Echarts库。可以使用npm或yarn进行安装：

   npm install echarts@latest vue-echarts --save

2. **导入组件**:
在`main.js`或其他入口文件里，引入`vue-echarts`插件，并注册组件：

   import Vue from 'vue'
   import ECharts from 'vue-echarts'
   Vue.use(ECharts)

3. **配置地图数据**:
获取省份的地图数据，包括地理位置信息和颜色编码等，可以从国家统计局官网或其他数据源获取。

4. **创建地图实例**:
在Vue组件内，使用Echarts的API初始化地图图表：

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

   <script>
   export default {
     data() {
       return {
         geoCoordMap: {}, // 地图坐标数据
         provinces: [], // 省份列表及其数据
       }
     },
     mounted() {
       this.initChart();
     },
     methods: {
       initChart() {
         this.myChart.setOption({
           map: 'province', // 使用中国省份地图
           roam: true, // 允许缩放和平移
           visualMap: { // 创建视觉映射控件
             pieceswise: [{ value: 1 }, { value: 2 }] // 分段设置阈值
           },
           series: [
             {
               type: 'scatter',
               coordinateSystem: 'geo',
               data: this.provinces.map(province => ({
                 name: province.name,
                 value: [province.longitude, province.latitude], // 省份坐标
               })),
               symbolSize: function (value) {
                 return Math.sqrt(value[2] / 10); // 根据第三个数值动态调整大小
               },
               itemStyle: {
                 normal: {
                   color: '#fff' // 标注点颜色
                 },
                 emphasis: {
                   shadowBlur: 10, // 加阴影效果
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               },
               onClick: (params) => {
                 console.log('点击了', params.name); // 点击事件处理
               }
             }
           ]
         });
       }
     }
   }
   </script>