<template>
    <div ref="mapBar" class="map-class"></div>
</template>
 
<script>
import * as echarts from 'echarts'
import geoJson from '../json/320900.json';
 
export default {
    name: 'echartsMap',
    data() {
        return {
        };
    },
    mounted() {
              this.init();
    },
    methods: {
        init() {
        echarts.registerMap('yancheng', geoJson);
          var myChart = echarts.init(this.$refs.mapBar);
            // 使用数据 geoJson 注册名为 'china' 的地图
             var option ={
                 tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c}'
                },
	            	// 一系列的配置参数
                    visualMap: {
                            min: 800,
                            max: 50000,
                            text: ['High', 'Low'],
                            realtime: false,
                            calculable: true,
                            inRange: {
                            color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"]
                            }
                        },
                        geo: {
                                map: "yancheng",
                                aspectScale: 0.75,
                                layoutCenter: ["50%", "51.5%"], //地图位置
                                layoutSize: "80%",
                                roam: false,
                                itemStyle: {
                                normal: {
                                    borderColor: "rgba(147, 235, 248, 1)",
                                    borderWidth: 0.5,
                                    color: {
                                    type: "linear-gradient",
                                    x: 0,
                                    y: 1500,
                                    x2: 2500,
                                    y2: 0,
                                    colorStops: [
                                        {
                                        offset: 0,
                                        color: "#009DA1", // 0% 处的颜色
                                        },
                                        {
                                        offset: 1,
                                        color: "#005B9E", // 50% 处的颜色
                                        },
                                    ],
                                        global: true, // 缺省为 false
                                        },
                                        opacity: 0.5,
                                },
                                emphasis: {
                                    areaColor: "#2a333d",
                                },
                                },
                                // regions: [
                                // {
                                //     name: "南海诸岛",
                                //     itemStyle: {
                                //     areaColor: "rgba(0, 10, 52, 1)",
                                //     borderColor: "rgba(0, 10, 52, 1)",
                                //     },
                                //     emphasis: {
                                //     areaColor: "rgba(0, 10, 52, 1)",
                                //     borderColor: "rgba(0, 10, 52, 1)",
                                //     },
                                // },
                                // ],
                                z: 2,
                            },
	                series: [{
	                    type: 'map',
	                    map: 'yancheng',

                          roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
                        // zoom: 1.23, // 当前视角的缩放比例
                        // scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
                        //     min: 1,  // 最小的缩放值
                        //     max: 10,  // 最大的缩放值
                        // },

                         // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        label: { 
                            show: true, // 是否显示标签。
                            fontSize: '11',
                            color: 'rgba(0,0,0,0.7)',
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#dfdfdf',
                                borderColor: '#ffffff',
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: '#9ebd2a'
                            }
                        },
                        data:[
                            { name: '滨海县', value: 20057.34 },
                            { name: '大丰市', value: 15477.48 },
                            { name: '东台市', value: 31686.1 },
                            { name: '阜宁县', value: 6992.6 },
                            { name: '建湖县', value: 44045.49 },
                            { name: '射阳县', value: 40689.64 },
                            { name: '亭湖区', value: 37659.78 },
                            { name: '响水县', value: 45180.97 },
                            { name: '盐都区', value: 55204.26 },
                        ],
                        // "left": 0,
                        // "right": 0,
                        // "top": 0,
                        // "bottom": 0
	                }]
	              };
                myChart.on('click', function(params){
                      console.log(params);//此处可以写一些某个市被点击后的操作
                });
                myChart.setOption(option);
        },
    }
};
</script>
 
<style scoped>
.map-class{
    width: 60%;
    height: 50%;
    border: 1px solid #ccc;
    /* -moz-transform:rotate(15deg);
  -webkit-transform:rotate(15deg);
  -o-transform:rotate(15deg);
  transform:rotate(15deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); */
}
</style>
