echarts 渲染地图并在地图上定点 用vue 怎么实现

1. 安装 ECharts 和 Vue-ECharts

npm install echarts vue-echarts

2. 在 Vue 组件中使用 ECharts

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

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/map/js/china'

export default {
  components: {
    'v-chart': ECharts
  },
  mounted() {
    const chart = this.$refs.map.echarts
    chart.setOption({
      tooltip: {
        trigger: 'item'
      },
      visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['High', 'Low'],
        calculable: true
      },
      series: [
        {
          name: '地图',
          type: 'map',
          mapType: 'china',
          roam: false,
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          data: [
            { name: '北京', value: 500 },
            { name: '上海', value: 700 },
            { name: '广州', value: 1000 },
            { name: '重庆', value: 1500 },
            { name: '成都', value: 2500 }
          ]
        }
      ]
    })
  }
}
</script>

3. 在地图上添加定点

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

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/map/js/china'

export default {
  components: {
    'v-chart': ECharts
  },
  mounted() {
    const chart = this.$refs.map.echarts
    chart.setOption({
      tooltip: {
        trigger: 'item'
      },
      visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['High', 'Low'],
        calculable: true
      },
      series: [
        {
          name: '地图',
          type: 'map',
          mapType: 'china',
          roam: false,
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          data: [
            { name: '北京', value: 500 },
            { name: '上海', value: 700 },
            { name: '广州', value: 1000 },
            { name: '重庆', value: 1500 },
            { name: '成都', value: 2500 }
          ]
        },
        {
          name: '定点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: [
            { name: '北京', value: [116.46, 39.92] },
            { name: '上海', value: [121.48, 31.22] },
            { name: '广州', value: [113.23, 23.16] },
            { name: '重庆', value: [106.54, 29.59] },
            { name: '成都', value: [104.06, 30.67] }
          ],
          symbolSize: 10,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          }
        }
      ]
    })
  }
}
</script>

以上代码中，我们通过添加一个新的 `series` 来实现在地图上添加定点。`type` 属性设置为 `scatter`，表示散点图。`coordinateSystem` 属性设置为 `geo`，表示使用地理坐标系。`data` 属性设置为一个数组，每个元素表示一个定点，包括名字、经纬度等信息。`symbolSize` 属性表示定点的大小，`label` 属性表示在定点旁边显示名字。