newcpms/ui/src/views/sems/specanalysis/YlgdChart.vue

<template>
  <div class="app-container-Ylrq">
    <div id="YlgdChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
import {devYlgdSafeData} from "@/api/sems/home";
export default {
  props: {
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '2.2rem'
    }
  },
  data() {
    return {
      chart: null,
      ylrqSafeOption:  {
        title: {
          text: this.$t('压力管道安全状况等级'),
          left: 'center',
          textStyle: {
            fontSize: 10
          }
        },
        tooltip: {
          trigger: 'item'
        },
        grid:{
          left: '1',
          right: '1',
          bottom: '-11%',
          top: '20%',
        },
        series: [
          {
            name: this.$t('安全等级'),
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '1'},
              {value: 735, name: '2'},
              {value: 580, name: '3'},
              {value: 580, name: '4'},
              {value: 580, name: 'N/A'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('YlgdChart'))

      this.chart.setOption(this.ylrqSafeOption)
    },
    devYlgdSafeData(plantIds ,unitIds){
      let params = {
        'plantIds': plantIds,
        'unitIds': unitIds
      }
      devYlgdSafeData(params).then(response => {
        this.ylrqSafeOption.series[0].data[0].value =  response.data.safeData[0]
        this.ylrqSafeOption.series[0].data[1].value=  response.data.safeData[1]
        this.ylrqSafeOption.series[0].data[2].value=  response.data.safeData[2]
        this.ylrqSafeOption.series[0].data[3].value=  response.data.safeData[3]
        this.ylrqSafeOption.series[0].data[4].value=  response.data.safeData[4]
        this.initChart()
      });
    }
  }
}
</script>