<!--
 * @Author: your name
 * @Date: 2021-06-28 15:31:00
 * @LastEditTime: 2021-06-29 21:05:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Three.vue
-->
<template>
  <div>
    <div id="main" style="width: 1000px;height: 800px;" />
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      key: 11111
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '钢化炉影响因素对比图',
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,250,0.2)'
        },
        legend: {
          type: 'scroll',
          bottom: 10,
          data: (function() {
            var list = []
            for (var i = 1; i < 10; i++) {
              list.push('产品' + i)
            }
            return list
          })()
        },
        visualMap: {
          top: 'middle',
          right: 10,
          show: false,
          color: ['red', 'blue'],
          calculable: true
        },
        radar: {
          indicator: [
            { text: '上部温度', max: 1 },
            { text: '下部温度', max: 1 },
            { text: '急冷风压', max: 1 },
            { text: '急冷时间', max: 1 },
            { text: '冷却风压', max: 1 }
          ]
        },
        series: (function() {
          var series = []
          for (var i = 1; i < 10; i++) {
            series.push({
              name: '',
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              },
              data: [{
                value: [
                  (10 - i) * 0.2 * 0.5,
                  (10 - i) * 0.11,
                  i * 0.2 * 0.4,
                  i / 8 * 0.5,
                  i * 0.1
                ],
                name: '产品' + i
              }]
            })
          }
          return series
        })()
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
