图形跳转对应参数界面功能

whyczyk

2021-10-13 a355aafef5a635bd31a701127cea097338cee0a7

 src/components/charts/prossPieChart.vue

@@ -1,185 +1,210 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
   <div class="echarts-wrapper">
      <div class="echarts-content" ref="chart">

    </div>
  </div>
      </div>
   </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "prossPieChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
//引入chart字体自适应
import {
   chartFontsize
} from '@/assets/js/chartFontsize'
import { checkboxs } from '@/assets/js/powerInfoData'
export default {
   name: "prossPieChart",
   chart: "",
   chartData: [],
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
   },
   data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let color = sendData.color;
        let data = sendData.data;
        let text;
        if (sendData.unit) {
          text = sendData.data + sendData.unit;
        } else {
          text = sendData.data
        }
        let title = sendData.title;
        let option = {
          title: {
            text: '{a|' + title + '}',
            x: 'center',
            top: '80%',
            textStyle: {
              rich: {
                a: {
                  fontSize: chartFontsize(16),
                  color: '#ffffff'
                },
              }
            },
            zlevel: 4
          },
          polar: {
            radius: ['65%', '57%'],
            center: ['50%', '40%'],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
      }
   },
   methods: {
      toParentPage(value) {
         if (typeof (value) == 'string') {
            window.parent.parent.postMessage({
               cmd: "syncPage",
               params: {
                  pageInfo: {
                     label: "电源实时告警",
                     name: "powerRealtimeInfo",
                     src: '#/powerRealtimeInfo/?alarmType=' + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
         this.$options.chart.on('click', (params) => {
            let name = params.seriesName;
            checkboxs.zt.map(item => {
               if (item.label == name) {
                  console.log(item.value)
                  this.toParentPage(item.value)
               }
            })
         })
      },
      setData(sendData) {
         this.$options.chartData = sendData;
         let color = sendData.color;
         let data = sendData.data;
         let name = sendData.name;
         let text;
         if (sendData.unit) {
            text = sendData.data + sendData.unit;
         } else {
            text = sendData.data
         }
         let title = sendData.title;
         let option = {
            title: {
               text: '{a|' + title + '}',
               x: 'center',
               top: '80%',
               textStyle: {
                  rich: {
                     a: {
                        fontSize: chartFontsize(16),
                        color: '#ffffff'
                     },
                  }
               },
               zlevel: 4
            },
            polar: {
               radius: ['65%', '57%'],
               center: ['50%', '40%'],
            },
            angleAxis: {
               max: 100,
               show: false,
            },
            radiusAxis: {
               type: 'category',
               show: true,
               axisLabel: {
                  show: false,
               },
               axisLine: {
                  show: false,

            },
            axisTick: {
              show: false
            },
          },
          series: [{
              name: '',
              type: 'pie',
              radius: '75%',
              center: ['50%', '40%'],
              emphasis: {
                scale: false
              },
              data: [{
                value: data,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: color
              },
              zlevel: 1
            }, {
              name: '',
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              emphasis: {
                scale: false
              },
              data: [{
                value: data,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: 'transparent',
                borderType: 'dashed',
                borderColor: '#ffffff'
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              emphasis: {
                scale: false
              },
              data: [{
                value: data,
                name: text
              }],
              label: {
                show: true,
                position: "center",
                fontSize: chartFontsize(24),
                fontWeight: '600',
                color: '#ffffff'
              },
              itemStyle: {
                color: color,
              },
              zlevel: 3
            }, {
              name: '',
              type: 'bar',
              center: ['50%', '40%'],
              roundCap: true,
              data: [data],
              coordinateSystem: 'polar',
              itemStyle: {
                color: '#ffffff',
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      },
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);
               },
               axisTick: {
                  show: false
               },
            },
            series: [{
               name: name,
               type: 'pie',
               radius: '75%',
               center: ['50%', '40%'],
               emphasis: {
                  scale: false
               },
               data: [{
                  value: data,
                  name: ''
               }],
               label: {
                  show: false
               },
               itemStyle: {
                  color: color
               },
               zlevel: 1
            }, {
               name: name,
               type: 'pie',
               radius: '61%',
               center: ['50%', '40%'],
               emphasis: {
                  scale: false
               },
               data: [{
                  value: data,
                  name: ''
               }],
               label: {
                  show: false
               },
               itemStyle: {
                  color: 'transparent',
                  borderType: 'dashed',
                  borderColor: '#ffffff'
               },
               zlevel: 2
            },
            {
               name: name,
               type: 'pie',
               radius: '61%',
               center: ['50%', '40%'],
               emphasis: {
                  scale: false
               },
               data: [{
                  value: data,
                  name: text
               }],
               label: {
                  show: true,
                  position: "center",
                  fontSize: chartFontsize(24),
                  fontWeight: '600',
                  color: '#ffffff'
               },
               itemStyle: {
                  color: color,
               },
               zlevel: 3
            }, {
               name: name,
               type: 'bar',
               center: ['50%', '40%'],
               roundCap: true,
               data: [data],
               coordinateSystem: 'polar',
               itemStyle: {
                  color: '#ffffff',
               },
               zlevel: 4
            },
            ]
         };
         // 设置配置项
         this.setOption(option);
      },
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            this.setData(this.$options.chartData);
         }, 300)
      },
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
      window.addEventListener('resize', this.resize);
   },
   destroyed() {
      window.removeEventListener('resize', this.resize);
   }
}
</script>

<style scoped>

</style>