<template>
  <div
    id="mainRadar"
    style="width:100%;height:100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainRadar')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        // title: {
        //   text: 'Multiple Radar'
        // },
        // tooltip: {
        //   trigger: 'axis'
        // },
        tooltip: {
          confine: true,
          trigger: 'item',
          axisPointer: {
            type: ''
          },
          formatter: function(a) {
            let relVal = a.name
            let list = a.value
            let xlname = [
              '市政设施',
              '楼宇厂房',
              '道路工程',
              '公共服务配套',
              '生态环保',
              '征地拆迁',
              '政权建设'
            ]
            let xlzb = ['34%', '19%', '12%', '11%', '14%', '5%', '5%']
            var dotHtml =
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#009DFF"></span>'
            for (let i = 0; i < a.data.value.length; i++) {
              relVal +=
                '<br/>' +
                dotHtml +
                xlname[i] +
                '：' +
                list[i] +
                '万元，' +
                '占' +
                xlzb[i]
            }
            return relVal
          }
        },
        legend: {
          top:'10',
          right:'20',
          data: ['2021']
        },
        textStyle: {
          fontSize: 16
        },
        radar: [
          {
            indicator: [
              {text: '房屋工程', color: '#5b9bd5', max: 400},
              {text: '市政工程', color: '#ed7d31', max: 400},
              {text: '配套工程', color: '#70ad47', max: 400},
              {text: '装修(维修)工程', color: '#ffc000', max: 400},
              {text: '生态环保工程', color: '#4472c4', max: 400},
              {text: '零星工程', color: '#91d024', max: 400},
              // {text: '政权建设', color: '#b235e6', max: 400}
            ]
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [390, 218, 135, 129, 145, 60, 60],
                name: '2021'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00a8e1'
                  },
                  {
                    offset: 1,
                    color: '#99cc00'
                  }
                ])
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>