扬尘Vue

zmc

2023-08-31 17388fa7ecd1f3ebadad470a463573a1cfe4468f

 src/views/line_graph/components/DustRadarChart.vue

@@ -4,17 +4,19 @@
<script>
import * as echarts from 'echarts';
export default {
  props:{
    name:{
        type:Array,
        default:()=>{
          return []
        }
      },
    data:{
      type:Array,
      default:()=>{
        return []
  props: {
    // 属性
    name: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 数据
    yData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
@@ -23,9 +25,9 @@
      chart: null
    };
  },
  watch:{
    data(){
      this.set()
  watch: {
    yData() {
      this.set();
    }
  },
  mounted() {
@@ -35,13 +37,30 @@
    initRadarChart() {
      this.chart = echarts.init(document.getElementById('main'));
    },
    set(){
    set() {
      // this.data[0] = this.data[0]*0.01
      let option = {
        title: {
          text: '综合风险'
        },
        tooltip: {},
        radar: {
          // 轴
          //         axisLine: {
          //           show:true,
          //           lineStyle: {
          //             color: '#F53F3F' ,// 设置边框线的颜色为黑色
          //             type:'dashed',
          //           }
          // },

          // 边框颜色
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#ddd', '#aaa']
            }
          },
          // shape: 'circle',
          indicator: [
            { name: this.name[0], max: 1 },
@@ -49,18 +68,42 @@
            { name: this.name[2], max: 1 },
            { name: this.name[3], max: 1 },
            { name: this.name[4], max: 1 }
          ]
          ],
          //     splitArea: {
          //   areaStyle: {
          //     // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          //     shadowColor: 'rgba(0, 0, 0, 0.2)',
          //     shadowBlur: 10
          //   }
          // },
          axisName: {
            color: '#428BD4'
          },
          legend: {
            borderColor: '#428BD4'
          }
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [this.data[0]*0.01,this.data[1]*0.01, this.data[2]*0.01,this.data[3]*0.01,this.data[4]*0.01],
                value: [
                  (this.yData[0] / 100).toFixed(4),
                  this.yData[1],
                  this.yData[2],
                  (this.yData[3] / 100).toFixed(4),
                  (this.yData[4] / 100).toFixed(4)
                ],
                name: '异常分析'
              },
            ]
              }
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            }
          }
        ]
      };
@@ -77,6 +120,6 @@
<style scoped>
.chart {
  width: 100%;
  height: 35vh;
  height: 500px;
}
</style>