如何调用GeoJson呈现地图

 

<template>

    <div id="china_map_box">

        <!-- v-if="deepTree.length > 1"-->

        <el-button type="primary" size="mini" class="back" @click="back" >最大化</el-button>

        <div class="echarts" id="echarts">

            <div class="map" id="map"></div>

        </div>

    </div>

</template>

<script>

import { disConnect } from 'echarts';

    import {getChinaJson, getProvinceJSON, getCityJSON} from "../api/get-json";

    import {cityProvincesMap} from '../config/cityChangYuanMap'

    import {mapOption} from '../config/mapOption'

    //import indexmap from '../views/indexMap';

    export default {

        name: "changYuanMap",

        components: {},

        data() {

            return {

                chart: null, // 实例化echarts

                provincesMap: cityProvincesMap.provincesMap, // 地区拼音，用于查找对应json

                provincesCode: cityProvincesMap.provincesCode, // 地区行政区划，用于查找对应json

                areaMap: cityProvincesMap.areaMap, // 地区行政区划，用于数据的查找，按行政区划查数据

                mapData: [], // 当前地图上的地区

                option: {...mapOption.basicOption}, // map的相关配置

                deepTree: [],// 点击地图时push，点返回时pop

                areaName: '长垣市', // 当前地名

                areaCode: '410783', // 当前行政区划

                //areaLevel: 'country', // 当前级别

                areaLevel: 'town',// 当前级别

                scale:1,//鼠标事件

            }

        },

        mounted() {

            this.$nextTick(() => {

                this.initEcharts();

                this.chart.on('click', this.echartsMapClick);