Vue+Excharts画出重庆地图_echarts 重庆地图-CSDN博客

本文链接：https://blog.csdn.net/qq_39691676/article/details/110850914

该博客展示了如何利用ECharts库结合全国地图选择器API，创建一个重庆地图并进行数据绑定。通过引入和注册重庆地区的GeoJSON地图文件，实现地图上的区域选中效果。同时，详细介绍了配置项，包括地图的初始缩放级别、提示框、工具箱等，以及数据系列的设置，用于展示不同区域的数据状态。地图上的各个区县根据预定义的数据集，呈现不同的颜色和标签，以反映如‘已掉线’、‘未开通’等状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入Excharts

全国地图选择器API

http://datav.aliyun.com/tools/atlas/#&lat=30.199123662463407&lng=107.74161937967794&zoom=7.5

在这里插入图片描述

重庆市样例

JSON下载链接
在这里插入图片描述

<template>
  <div class="map_content">
    <div ref="area_json" class="map_body" />
  </div>
</template>

<script>
const echart = require('echarts')
var opt = require('@/assets/geoJson/cqArea.json') // 引入chongqing.json地图文件
// var opt = require('@/assets/geoJson/areaJson.json') // 引入chongqing.json地图文件
export default {
  data() {
    return {
      MapData: [
        { name: '合川区', value: -1, selected: false },
        { name: '江北区', value: -1, selected: false },
        { name: '綦江区', value: -1, selected: false },
        { name: '云阳县', value: -1, selected: false },
        { name: '酉阳县', value: -1, selected: false },
        { name: '渝北区', value: -1, selected: false },
        { name: '彭水县', value: -1, selected: false },
        { name: '铜梁区', value: -1, selected: false },
        { name: '南川区', value: -2, selected: false },
        { name: '璧山区', value: -2, selected: false },
        { name: '垫江县', value: -2, selected: false },
        { name: '大渡口区', value: -1, selected: false }]
    }
  },
  mounted() {
    this.initExcharts()
  },
  methods: {
    initExcharts() {
      this.myChart = echart.init(this.$refs.area_json)
      echart.registerMap('重庆', opt)
      this.myChart.setOption(
        {

          title: {
            text: '全市共享状态图',
            x: 'left',
            y: 'top',
            left: 20,
            textStyle: {
              fontWeight: 'bold',
              fontSize: '18'
            }
          },
          tooltip: {
            show: true,
            trigger: 'item',
            backgroundColor: 'rgba(3, 22, 96, 0.5)',
            formatter: function(params, ticket, callback) {
              let res = ''
              if (params.value < -1) {
                res = '已掉线'
              } else if (params.value === -1) {
                res = '未开通'
              } else if (params.value >= 0) {
                const notFound = params.data?.notFound
                let text = ''
                if (notFound.length > 0) {
                  notFound.map((item, index) => {
                    if (index !== notFound.length - 1) {
                      text += `${item}、`
                    } else {
                      text += `${item}`
                    }
                    return text
                  })
                } else {
                  text = '暂无'
                }
                if (params.name !== '主城九区') {
                  res = `<p>${params?.data?.name}：</p>
                    <p>
                    <span style="margin-right:20px">利用人次：${params?.data?.value}</span>
                    <span>档案利用数：${params?.data?.archivesUseNum}</span>
                    </p>
                    <p>不可访问档案分类：<span style="color:#FFCE2C">${text}</span></p>
                  `
                }
              }
              return res
            },
            textStyle: {
              color: '#fff'
            }
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          dataRange: [
            {
              left: '20px',
              bottom: '20px',
              show: false,
              itemGap: 1,
              itemWidth: 10,
              itemHeight: 5,
              orient: 'vertical', // 'horizontal'
              color: [], // 颜色
              splitList: [
                { start: 500, color: '#1592E6' },
                { start: 100, end: 500, color: '#47AEF3' },
                { start: 50, end: 100, color: '#77C9FF' },
                { start: 10, end: 50, color: '#98D6FF' },
                { start: 0, end: 10, color: '#B8E3FF' },
                { start: -1, end: -1, color: '#CCCCCC', label: '未开通' },
                { start: -2, end: -2, color: '#FD716F', label: '已掉线' }
              ],
              textStyle: {
                // 字体设置
                fontSize: 12,
                fontWeight: '500',
                color: '#444444'
              }

            }
          ],
          series: [
            {
              name: '重庆市地图',
              type: 'map',
              zoom: 1.2, // 显示比例大小
              mapType: '重庆', // 自定义扩展图表类型
              itemStyle: {
                normal: { label: { show: true }},
                emphasis: { label: { show: true }}
              },
              label: {
                normal: {
                  show: true, // 是否显示区域label
                  textStyle: {
                    fontSize: 14,
                    color: '#333'
                  }
                }
              },
              data: this.MapData,
              nameMap: {
                '石柱土家族自治县': '石柱县',
                '秀山土家族苗族自治县': '秀山县',
                '酉阳土家族苗族自治县': '酉阳县',
                '彭水苗族土家族自治县': '彭水县',
                '开县': '开州区'
              }
            }
          ]
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .map_content{
    width: 1200px;height: 1200px;
  .map_body{z-index: 1;height: 700px;width: 700px}
  }
</style>