<template>
<div class="container">
  <div id="main" class="chart-container">dasd</div>
</div>
  
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "VectorMap",
  methods: {
    initChart() {
      fetch('/data/china.json').then(function(response){
            return response.json();
        }).then(function(result){
            // console.log(result);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            //在echarts中注册地图矢量数据
            echarts.registerMap('china',result);
            // 指定图表的配置项和数据
            var option = {
                //配置地理坐标系组件
                geo:{
                    type: 'map',
                    map: 'china',
                    roam: true, //设置允许缩放以及拖动的效果
                    label:{
                        // show: true
                    },
                    zoom: 4, //初始化缩放比例
                    center: [113,23], //设置初始化中心点
                    itemStyle: {		           // 定义样式
                        areaColor: '#f4f1de',      // 普通状态下的样式
                        borderColor: '#111'  
                    },
                    emphasis: {					   // 高亮状态下的样式
                        itemStyle:{
                            areaColor: '#f5cac3'
                        },
                        label:{
                            color:'#000',
                            fontSize:14
                        }
                    }
                },
                backgroundColor: '#404a59',  		// 图表背景色
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
       
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="stylus" scoped>
.container{
  display flex
  justify-content center
  align-content center
}
.chart-container{
    width 350px
    height 300px
}
</style>>
