问题提交

whyczyk

2021-10-13 8da171910fcf9c3f704821f1ecd043e9a0f011ab

 src/components/charts/abeamProChart.vue

@@ -1,235 +1,217 @@
<template>
  <div class="flexCon">
    <div class="con">
      <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart">
   <div class="flexCon">
      <div class="con">
         <div class="echarts-wrapper">
            <div class="echarts-content" ref="chart">

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

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    batteryStatus
  } from '@/assets/js/api'
  export default {
    name: "abeamProChart",
    chart: "",
    chartData: {},
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
//引入chart字体自适应
import {
   chartFontsize
} from '@/assets/js/chartFontsize'
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
export default {
   name: "abeamProChart",
   chart: "",
   chartData: {},
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
   },
   data() {
      return {
         websock: null
      }
   },
   methods: {
      toParentPage(value) {
         if (typeof (value) == 'string') {
            window.parent.parent.postMessage({
               cmd: "syncPage",
               params: {
                  pageInfo: {
                     label: "设备状态查询",
                     name: "btsStatusTest",
                     src: "#/dataMager/btsStatus?workStauts=" + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
         this.$options.chart.on('click', (params) => {
            let name = params.name;
            checkboxs.sbzt.map(item => {
               if (item.label == name) {
                  this.toParentPage(item.value)
               }
            })
         })
      },
      organizeData(posData) {
         let dataColor = posData.color;
         let bgColor = posData.bgColor;
         let yData = posData.yData;
         let radius = (this.$refs.chart.clientHeight / 4 - 7) > 0 ? this.$refs.chart.clientHeight / 4 - 7 : 0;
         let data = posData.data;
         let max = posData[0];
         data.map(item => {
            if (item > max) {
               max = item;
            }
         });
         max = max - (max % 10) + 20;
         let maxData = []
         data.map(() => {
            maxData.push(max)
         });
         let option = {
            grid: {
               left: '2%',
               right: '5%',
               bottom: '0',
               top: '0',
               containLabel: true
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               }
            },
            xAxis: {
               type: 'value',
               axisLabel: {
                  show: true,
                  color: '#fff',
                  fontSize: chartFontsize(14),
               },
               splitLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLine: {
                  show: false
               },
            },
            yAxis: [{
               type: 'category',
               inverse: true,
               axisLabel: {
                  show: true,
                  color: '#fff',
                  fontSize: chartFontsize(14),
               },
               splitLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLine: {
                  show: false
               },
               data: yData
            }],
            series: [{
               name: '',
               type: 'bar',
               zlevel: 1,
               itemStyle: {
                  color: function (params) {
                     return dataColor[params.dataIndex];
                  },
                  borderRadius: [0, radius, radius, 0],
               },
               data: data
            },
            ]
         };
         // 设置配置项
         this.setOption(option);
      },
      setData(sendData) {
         if (sendData) {
            this.$options.chartData = sendData;
            this.organizeData(sendData)
         } else {
            this.postData()
         }
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/battery/status/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = {
               yData: [],
               color: ['#f58881', '#b4d465', '#ffcb29'],
               bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
               data: []
            }
            let resData = res.data;
            for (let key in resData) {
               optionData.yData.push(key);
               optionData.data.push(resData[key]);
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
         }
      },
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            if (JSON.stringify(this.$options.chartData) != '{}') {
               this.setData(this.$options.chartData);
            }
         }, 300)
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      }
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(posData) {
        let dataColor = posData.color;
        let bgColor = posData.bgColor;
        let yData = posData.yData;
        let radius = (this.$refs.chart.clientHeight / 3 - 7) > 0 ? this.$refs.chart.clientHeight / 3 - 7 : 0;
        let data = posData.data;
        let max = posData[0];
        data.map(item => {
          if (item > max) {
            max = item;
          }
        });
        max = max - (max % 10) + 20;
        let maxData = []
        data.map(() => {
          maxData.push(max)
        });
        let option = {
          grid: {
            left: '2%',
            right: '5%',
            bottom: '0',
            top: '0',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              return params[0].name + ' : ' + params[0].value
            }
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: chartFontsize(12),
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: chartFontsize(12),
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: yData
          }],
          series: [{
              name: '金额',
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                borderRadius: [0, radius, radius, 0],
              },
              barWidth: radius,
              barCategoryGap: "0%",
              data: data
            },
            {
              "name": "",
              type: 'pictorialBar',
              barCategoryGap: "0%",
              symbolPosition: 'end',
              symbolSize: [radius, radius],
              zlevel: 2,
              tooltip: {
                show: false
              },
              label: {
                show: true,
                position: 'insideRight',
                fontSize: chartFontsize(18),
                color: '#021750'
              },
              itemStyle: {
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: -2
              },
              color: "#26B2E8",
              data: data
            },
            {
              name: '背景',
              type: 'bar',
              barCategoryGap: "0%",
              barGap: '-100%',
              barWidth: radius,
              data: maxData,
              itemStyle: {
                color: function (params) {
                  return bgColor[params.dataIndex];
                },
              },
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          let userId = localStorage.getItem('userId');
          let params = {
            userId: userId
          }
          batteryStatus(params).then((res) => {
            if (res.data.code == 1) {
              let optionData = {
                yData: [],
                color: ['#f58881', '#b4d465', '#ffcb29'],
                bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
                data: []
              }
              let resData = res.data.data;
              for (let key in resData) {
                optionData.yData.push(key);
                optionData.data.push(resData[key]);
              }
              this.$options.chartData = optionData;
              this.organizeData(optionData)
            }
          }).catch((err) => {
            console.log(err)
          });
        }
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
            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() {
      this.websock.closeMyself()
      window.removeEventListener('resize', this.resize);
   }
}
</script>

<style scoped>
  .flexCon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.flexCon {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

  .flexCon .con {
    width: 100%;
    height: 70%;
  }
.flexCon .con {
   width: 100%;
   height: 80%;
}
</style>