<template>
  <div id="main">
    <v-chart
      style="width:100%;height:100%"
      :auto-resize="true"
      :options="option"/>
    <div id="rightTextItem">
      <p
        v-for="item in textItemData"
        :key="item.name">
        <span>{{ item.name }}</span>
        <span>{{ item.percentage }}</span>
        <span>{{ item.number }}</span>
      </p>
      <p style="line-height:20px;height:20px;">更多<span id="more"></span></p>
    </div>
  </div>
</template>
<script>
import 'echarts/map/js/china.js'
import data7 from './map.js'
export default {
  data () {
    return {
      textItemData: [
        {name: '浙江省', percentage: '10.2%', number: '300'},
        {name: '江苏省', percentage: '10.2%', number: '300'},
        {name: '安徽省', percentage: '10.2%', number: '300'},
        {name: '江西省', percentage: '10.2%', number: '300'},
        {name: '湖南省', percentage: '10.2%', number: '300'},
        {name: '山东省', percentage: '10.2%', number: '300'},
        {name: '广东省', percentage: '10.2%', number: '300'},
        {name: '上海市', percentage: '10.2%', number: '300'}
      ],
      option: {
        // backgroundColor: 'rgba(7, 12, 19, 0.53)',
        title: {
          text: '最高：浙江省(394)',
          left: 'center',
          textStyle: {
            color: '#333',
            fontWeight: 200
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let result = params.data.name + ':' + params.data.value + '人'
            if (isNaN(params.data.value)) {
              result = params.data.name + ': 0人'
            }
            return result
          }
        },
        visualMap: {
          min: 0,
          max: 52449,
          left: 'right',
          top: 'center',
          text: ['高', '低'],
          calculable: false,
          textStyle: {
            color: '#000'
          },
          inRange: {
            color: ['#CAE0F6', '#0AA6EB', 'blue']
          }
        },
        series: [
          {
            name: '游客量',
            type: 'map',
            center: [120, 32.5],
            mapType: 'china',
            roam: true,
            data: data7,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
  }
}

</script>
<style>
  #main{
    width: 100%;
    height: 350px;
    position: relative;
  }
  #rightTextItem{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width:30%;
  }
  #more{
    border-style: solid;
    border-color:black transparent transparent transparent;
    border-width:  10px 10px 0 10px;
    display: inline-block;
    margin-top: 8px;
    margin-left: 5px;
  }
</style>
