中国地图 echarts+vue3

1.  引入echarts 

npm install echarts

     2.   vue3代码

<template>
    <el-row>
      <el-col :span="6">
        <el-table :data="tableData">
          <el-table-column prop="name" label="省份" />
          <el-table-column prop="value" label="总业绩" />
        </el-table>
        <div class="business-data">
          <p v-if="businessData.length === 0">暂无数据</p>
          <p v-else>总业绩 (万元): {{ totalBusiness }}</p>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="chart-container">
          <div id="china-map" style="width: 100%; height: 500px;"></div>
        </div>
      </el-col>
    </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import chinaMapData from './china.json' // 引入中国地图数据
const tableData = reactive([
  { name: '北京', rank: 1, value: '￥20.00' },
  { name: '上海', rank: 1, value: '￥60.00' }
])
const selectedDateRange = ref('今日')
const selectedProvince = ref('')
const provinces = ref([
  { value: 'beijing', label: '北京' },
  { value: 'shanghai', label: '上海' }
  // 添加更多省份
])
const businessData = ref([])
const totalBusiness = ref(0)
const queryParams = reactive({
  createTime: []
})

const defaultBusinessData = [
  { province: '北京', business: 500 },
  { province: '上海', business: 800 }
]

const updateMap = () => {
  const mapData = businessData.value.map((item) => ({
    name: item.province,
    value: item.business
  }))

  echarts.registerMap('china', chinaMapData)
  const chart = echarts.init(document.getElementById('china-map') as HTMLElement)
  const option = {
    title: {
      text: '区域业务展示',
      left: 'center'
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      inRange: {
        color: ['#e0ffff', '#006edd']
      },
      show: true
    },
    series: [
      {
        name: '区域业务',
        type: 'map',
        map: 'china', // 使用 map 而不是 mapType
        roam: true,
        label: {
          show: true
        },
        itemStyle: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          emphasis: {
            itemStyle: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        data: mapData
      }
    ]
  }
  chart.setOption(option)
}

const fetchData = () => {
  // 模拟获取数据
  businessData.value = defaultBusinessData
  totalBusiness.value = businessData.value.reduce((sum, item) => sum + item.business, 0)
  updateMap()
}

onMounted(() => {
  fetchData()
})

const handleQuery = () => {
  // 查询操作
  fetchData()
}

const resetQuery = () => {
  // 重置操作
  queryParams.createTime = []
  fetchData()
}

const onDateRangeChange = () => {
  // 日期范围变化处理
  fetchData()
}
</script>

<style scoped>
.query-section {
  margin-bottom: 15px;
}

.chart-container {
  width: 100vw;
  height: 400px;
}

#chart {
  width: 100%;
  height: 100%;
}
</style>

        3. 需要 china.json 私信哦~