雷达图

1、添加icon

2、内容

<template>
  <div id="chart-radar" ref="chart" style="position: relative;width: 100%;height: 100%" class="empty-placeholder" />
</template>

<script>
  export default {
    props: {
      drillDown: {
        type: Object,
        default: () => {}
      },
      orgId: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        myChart: null,
        projectData: [],
        industryData: []
      }
    },
    watch: {
      projectData (val) {
        if (val.length > 0 && this.industryData.length > 0) {
          this.chartInit()
        }
      },
      industryData (val) {
        if (val.length && this.projectData.length > 0) {
          this.chartInit()
        }
      }
    },

    mounted () {
      this.$nextTick(() => {
        this.projectMateriaTagTotal()
        this.tagsAsPercentTotal()
      })
    },
    methods: {
      chartInit () {
        // eslint-disable-next-line no-undef
        this.myChart = echarts.init(document.getElementById('chart-radar'))
        const indicator = []
        this.projectData.forEach((ele, index) => {
          indicator.push({
            name: ele.name,
            projectNum: ele.value,
            industNum: this.industryData[index].value
          })
        })
        const option = {
          color: ['rgba(86,199,60, 1)', 'rgba(0,183,238, 1)'],
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: function (params) {
              var indicator1 = []
              var indicator = option.radar.indicator
              var result = ''
              for (var key in indicator) {
                indicator1.push(indicator[key].name)
              }
              for (var i = 0; i < params.value.length; i++) {
                result += indicator1[i] + '：' + (params.value[i]) + '%' + '<br/>'
              }
              return params.seriesName + '：' + '<br/>' + result
            }
          },
          legend: {
            data: ['行业', '项目'],
            top: 120
          },
          radar: {
            center: ['50%', '50%'],
            radius: '40%',
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            splitArea: {
              areaStyle: {
                color: ['transparent']
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#999'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#999'
              }
            },
            name: {
              formatter: function (value, indicator) {
                const flag = indicator.projectNum - indicator.industNum < 0
                let text = '{a|' + value + '}\n{green|' + indicator.industNum + '%' + '}{blue|' + indicator.projectNum + '%' + '}'
                if (value === '超负差率') {
                  if (!flag) {
                    text += '\n{abnormal|' + '!' + '}'
                  }
                } else if (flag) {
                  text += '\n{abnormal|' + '!' + '}'
                }
                return text
              },
              rich: {
                a: {
                  color: '#000',
                  fontSize: 14,
                  align: 'center',
                  borderRadius: 5,
                  height: 30
                },
                green: {
                  backgroundColor: 'rgba(86,199,60, 1)',
                  fontSize: 10,
                  color: '#fff',
                  align: 'center',
                  padding: [2, 2, 2, 2],
                  borderRadius: 10
                  // width: 46
                },
                blue: {
                  backgroundColor: 'rgba(0,183,238,1)',
                  fontSize: 10,
                  color: '#fff',
                  align: 'center',
                  padding: [2, 2, 2, 2],
                  borderRadius: 10
                  // width: 46
                },
                abnormal: {
                  fontSize: 12,
                  fontWeight: 'bold',
                  color: '#fff',
                  align: 'center',
                  height: 16,
                  width: 16,
                  borderRadius: 8,
                  backgroundColor: '#f56c6c',
                  verticalAlign: 'middle'
                }
              }

            },
            indicator: indicator
          },

          series: [{
            name: '行业',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: 'rgba(86,199,60, 0.3)'
              }
            },
            itemStyle: {
              color: 'rgba(86,199,60, 1)',
              borderColor: 'rgba(86,199,60, 0.3)',
              borderWidth: 10
            },
            lineStyle: {
              normal: {
                color: 'rgba(86,199,60, 1)',
                width: 2
              }
            },
            data: [this.industryData.map(ele => ele.value)]
          }, {
            name: '项目',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(0,183,238, 1)',
                borderColor: 'rgba(0,183,238, 0.4)',
                borderWidth: 10
              }
            },
            areaStyle: {
              normal: {
                'color': 'rgba(0,183,238, 0.3)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgba(0,183,238, 1)',
                width: 2
              }
            },
            data: [this.projectData.map(ele => ele.value)]
          }]
        }

        this.myChart.setOption(option)
      },
      // 项目
      projectMateriaTagTotal () {
        const url = '/gys/bi/services/indices/data/project-material-tag-total-rate'
        const { projectId, begin, end, materialTags } = this.drillDown
        const orgId = this.orgId
        axios.post(url, {
          projectId,
          materialTags,
          begin,
          end,
          orgId
        }).then(res => {
          const data = res.data
          if (data.success) {
            this.projectData = this.objectToArray(data.data[0])
          }
        })
      },
      tagsAsPercentTotal () {
        const url = '/gys/bi/services/indices/data/no-tenant/material-tag-trade-total-rate'
        const { materialTags } = this.drillDown
        axios.post(url, { materialTags }).then(res => {
          const data = res.data
          if (data.success) {
            this.industryData = this.objectToArray(data.data[0])
          }
        })
      },
      objectToArray (obj) {
        const arr = []
        arr[0] = { name: '偏差设置率', value: obj['negativeSetingRate'] || 0 }
        arr[1] = { name: '运单填写率', value: obj['waybillFillRate'] || 0 }
        arr[2] = { name: '超负差量%', value: obj['negativeQuantityRate'] || 0 }
        arr[3] = { name: '超负差率', value: obj['negativeRate'] || 0 }
        return arr
      }
    }
  }
</script>