深圳地图echarts

待我称王封你为后i 2023-01-01 04:59 233阅读 0赞

<template>
        <div ref="projectMap" style="width:1000px;height:500px;"></div>
    </template>
    <script>
    import cqmap from './map.json'// 就是这么个意思
    export default {
      methods: {
        echartsInit () {
          // 使用ref代替document.getElementById
          const echartsDom = this.$refs.projectMap
          if (echartsDom) {
            const myChart = window.echarts.init(echartsDom)
            // 此处的cqmap是通过上面地址下载好的重庆市地图的json数据
            window.echarts.registerMap('CQ', cqmap)
            const options = {
              // title是标题，根据需求是否需要，不需要直接false，需要的话自己看api配置项；
              title: {
                show: false,
              },
              // 鼠标移入展示的提示框，同样参考api配置项，{a}{b}等都有各自的意义
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>工程项目：{c}',
              },
              // 工具栏   设置为false不展示，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具，暂不需要
              toolbox: {
                show: false,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                // 自定义方法
                feature: {
                  dataView: { readOnly: false },
                  restore: {},
                  saveAsImage: {},
                },
              },
              visualMap: {
                show: false, // 虽然不展示视觉映射组件，但是下面的某些配置是生效的
                // min: 100,
                // max: 700,
                // text: ["High", "Low"],
                realtime: false,
                // calculable: true,
                inRange: {
                  color: ['rgb(0,137,121)'],
                },
              },
              color: ['#fff'], // 展示的字体颜色
              series: [
                {
                  // tooltip展示的标题，设置formatter后直接通过{b}展示区域name，此值的代号为{a}。
                  name: '展示的名称',
                  type: 'map',
                  mapType: 'CQ', // 自定义扩展图表类型，必须和registerMap的第一个参数相同
                  // roam: true, //可以拖拽和缩放
                  label: {
                    show: true,
                    color: '#fff',
                  },
                  data: [
                    { name: '罗湖区', value: this.randomData() },
                    { name: '福田区', value: this.randomData() },
                    { name: '南山区', value: this.randomData() },
                    { name: '龙华区', value: this.randomData() },
                    { name: '宝安区', value: this.randomData() },
                    { name: '坪山区', value: this.randomData() },
                    { name: '龙岗区', value: this.randomData() },
                    { name: '城口县', value: this.randomData() },
                    { name: '大鹏新区', value: this.randomData() },
                    { name: '光明区', value: this.randomData() },
                    { name: '盐田区', value: this.randomData() },
                    // { name: '巫山县', value: this.randomData() },
                    // { name: '涪陵区', value: this.randomData() },
                    // { name: '丰都县', value: this.randomData() },
                    // { name: '武隆区', value: this.randomData() },
                    // { name: '南川区', value: this.randomData() },
                    // { name: '秀山土家族苗族自治县', value: this.randomData() },
                    // { name: '黔江区', value: this.randomData() },
                    // { name: '合川区', value: this.randomData() },
                    // { name: '綦江区', value: this.randomData() },
                    // { name: '忠县', value: this.randomData() },
                    // { name: '梁平区', value: this.randomData() },
                    // { name: '巴南区', value: this.randomData() },
                    // { name: '潼南区', value: this.randomData() },
                    // { name: '永川区', value: this.randomData() },
                    // { name: '垫江县', value: this.randomData() },
                    // { name: '渝北区', value: this.randomData() },
                    // { name: '长寿区', value: this.randomData() },
                    // { name: '大足区', value: this.randomData() },
                    // { name: '铜梁区', value: this.randomData() },
                    // { name: '荣昌区', value: this.randomData() },
                    // { name: '璧山区', value: this.randomData() },
                    // { name: '北碚区', value: this.randomData() },
                    // { name: '万盛区', value: this.randomData() },
                    // { name: '九龙坡区', value: this.randomData() },
                    // { name: '沙坪坝区', value: this.randomData() },
                    // { name: '南岸区', value: this.randomData() },
                    // { name: '江北区', value: this.randomData() },
                    // { name: '大渡口区', value: this.randomData() },
                    // { name: '渝中区', value: this.randomData() },
                  ],
                  // 自定义名称映射，json中properties的name如果是英文代号的话，可以使用nameMap和中文名对应起来，如果name是中文的话则不需要nameMap
                  // nameMap: {
                  //   ckx: "城口县"
                  // },
                },
              ],
            }
            myChart.setOption(options)
          }
        },
        randomData () {
          return Math.round(Math.random() * 1000)
        },
      },
      // 使用mounted的原因是因为在mounted中dom已经加载完毕，否则会报错，找不到getAttribute这个方法
      mounted () {
        this.$nextTick(() => {
          this.echartsInit()
        })
      },
    }
    </script>
    <style lang="scss" scoped>
    
    </style>

地图json :[http://datav.aliyun.com/tools/atlas/\#&lat=22.859177836173288&lng=113.68440594166313&zoom=12.5][http_datav.aliyun.com_tools_atlas_lat_22.859177836173288_lng_113.68440594166313_zoom_12.5]

[http_datav.aliyun.com_tools_atlas_lat_22.859177836173288_lng_113.68440594166313_zoom_12.5]: http://datav.aliyun.com/tools/atlas/#&lat=22.859177836173288&lng=113.68440594166313&zoom=12.5