<template>
  <div class="disease-warning">
    <p>预警指标：预报，问诊，用药，天气情况</p>
    <Select v-model="type" class="custom-select" size="small">
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
    <div class="map" ref="map" />
  </div>
</template>

<script>
import china from 'echarts/map/json/china.json'
const mapData = [
  { name: '北京', value: 177 },
  { name: '天津', value: 42 },
  { name: '河北', value: 102 },
  { name: '山西', value: 81 },
  { name: '内蒙古', value: 17 },
  { name: '辽宁', value: 67 },
  { name: '吉林', value: 182 },
  { name: '黑龙江', value: 100 },
  { name: '上海', value: 24 },
  { name: '江苏', value: 299 },
  { name: '浙江', value: 114 },
  { name: '安徽', value: 29 },
  { name: '福建', value: 316 },
  { name: '江西', value: 91 },
  { name: '山东', value: 19 },
  { name: '河南', value: 137 },
  { name: '湖北', value: 26 },
  { name: '湖南', value: 114 },
  { name: '重庆', value: 91 },
  { name: '四川', value: 25 },
  { name: '贵州', value: 62 },
  { name: '云南', value: 83 },
  { name: '西藏', value: 9 },
  { name: '陕西', value: 80 },
  { name: '甘肃', value: 256 },
  { name: '青海', value: 10 },
  { name: '宁夏', value: 18 },
  { name: '新疆', value: 67 },
  { name: '广东', value: 123 },
  { name: '广西', value: 59 },
  { name: '海南', value: 14 }
]
export default {
  name: 'Disease',
  data() {
    return {
      mapName: 'china',
      map: null,
      config: {
        geo: {
          map: 'china',
          left: 0,
          top: 0,
          bottom: 0,
          right: '15%',
          zoom: 1,
          itemStyle: {
            areaColor: 'rgba(0, 191, 255, 0.1)',
            borderColor: 'rgba(0, 191, 255, 0.9)',
            // borderWidth: 0.1,
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}(单位)'
        },
        toolbox: {
          show: false,
        },
        visualMap: {
          min: 0,
          max: 200,
          left: 'auto',
          right: 0,
          realtime: false,
          calculable: true,
          textStyle: {
            color: '#fff',
          },
          inRange: {
            color: ['green', 'yellow', 'red']
          }
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            map: this.mapName,
            data: mapData,
          }
        ],
      },
      options: [
        '小龙虾',
      ],
      type: '小龙虾',
    }
  },
  mounted() {
    // this.$nextTick(this.init)
    setTimeout(this.init, 0)
  },
  methods: {
    init() {
      this.$echarts.registerMap(this.mapName, china)
      this.map = this.$echarts.init(this.$refs.map)
      this.map.setOption(this.config)
    },
  },
}
</script>

<style lang="stylus" scoped>
.disease-warning
  width 100%
  height 100%
  .map
    width 100%
    height 90%
  p
    text-align center
</style>
