adweb3-web/src/components/chart/mapAdweb.vue

<template>
  <div>
    <v-chart :forceFit="true" :height="height"  :padding="padding" :scale="scale">
      <v-tooltip :showTitle="false" />
      <v-view :data="geoData" :scale="scale">
        <v-polygon :position="view1Opts.position" :vStyle="view1Opts.style" :tooltip="view1Opts.tooltip" />
      </v-view>
      <v-view :data="data" :scale="aliases">
        <v-polygon :position="view2Opts.position" :opacity="view2Opts.opacity" :color="view2Opts.color" :animate="view2Opts.animate" :tooltip="view2Opts.tooltip" />
      </v-view>
    </v-chart>
  </div>
</template>

<script>
  // const DataSet = require('@antv/data-set');
  import worldGeo from '../../assets/data/worldGeo-zh.json'
  import * as DataSet from "tinymce";

  const scale = [{
    dataKey: 'longitude',
    sync: true,
  }, {
    dataKey: 'latitude',
    sync: true,
  }];


  const view1Opts = {
    quickType: 'polygon',
    position: 'longitude*latitude',
    style: {
      fill: '#fff',
      stroke: '#ccc',
      lineWidth: 1
    },
    tooltip: false,
  };

  const view2Opts = {
    quickType: 'polygon',
    position: 'longitude*latitude',
    opacity: 'num',
    color: ['num', [ '#1890FF', '#0A61D7' ]],
    tooltip: 'country*num',
    animate: {
      leave: {
        animation: 'fadeOut'
      }
    },
  };

  export default {
    name: 'MapAdweb',
    props: {
      dataSource: {
        type: Array,
        default: () =>  [
          {"country":"China","num":16},
          {"country":"United States","num":12},
          {"country":"Taiwan","num":6},
          {"country":"Hong Kong","num":3},
          {"country":"Mexico","num":3},
          {"country":"Germany","num":2},
          {"country":"Belgium","num":1},
          {"country":"Brazil","num":1},
          {"country":"Costa Rica","num":1},
          {"country":"France","num":1},
          {"country":"India","num":1},
          {"country":"Malaysia","num":1},
          {"country":"Pakistan","num":1},
          {"country":"Poland","num":1},
          {"country":"Spain","num":1},
          {"country":"Thailand","num":1},
          {"country":"Ukraine","num":1}
        ]
      },
      // 别名，需要的格式：[{dataKey:'name',alias:'姓名'}, {dataKey:'sex',alias:'性别'}]
      aliases:{
        type: Array,
        default: () => [{
          dataKey: 'country',
          alias: '国家',
        },{
          dataKey: 'num',
          alias: '访问数',
        }]
      },
      height: {
        type: Number,
        default: 400
      }
    },
    data() {
      return {
        data: [],
        padding: ['0', '0', '0', '0'],
        geoData: [],
        scale,
        view1Opts,
        view2Opts,
      };
    },

    mounted() {

        const worldMap = new DataSet.View().source(worldGeo, {
          type: 'GeoJSON',
        });
        const userDv = new DataSet.View().source(this.dataSource).transform({
          geoDataView: worldMap,
          field: 'country',
          type: 'geo.region',
          as: ['longitude', 'latitude'],
        }).transform({
          type: 'map',
          callback: (obj) => {
            return obj;
          }
        });
        this.$data.geoData = worldMap;
        this.$data.data = userDv;
    },

  };
</script>