地图组件及图表模块跳转方法添加

whyczyk

2021-09-30 c04569e75ef0c526f7f08169cc5724c83005d250

地图组件及图表模块跳转方法添加

 package-lock.json

Diff too large

 package.json

@@ -17,7 +17,8 @@
    "vue": "^2.6.11",
    "vue-draggable-resizable-gorkys": "^2.4.4",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
    "vuex": "^3.4.0",
    "vue-layer": "^1.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",

 src/assets/images/iw_close1d3.gif

 src/assets/images/iw_tail.png

 src/assets/js/api.js

@@ -175,4 +175,47 @@
    }),
    asy: 1
  })
}
}

/**
 * 删除地图上的机房
 * 参数：json={"num":141,"StationId":"42070545",
 * "StationName":"湖北省-武汉市-BTS-东西湖区-GDXG演示","StationName3":"",
 * "Address":"湖北省-武汉市-东西湖区-公园南路","longitude":114.252963,"latitude":30.646197,"information":"",
 * "FBSDeviceId":910000120}
 */
export const delMapHome = (params) => {
  return axios({
    method: "post",
    url: "BattMap_informationAction!del",
    data: "json=" + JSON.stringify(params),
    asy: 1
  });
};

/**
 * 根据设备id查询配置
 * @param data
 * @returns {AxiosPromise}
 */
export const searchByDevId = (data) => {
  return axios({
    method: 'post',
    url: 'Station3DAction!getByDeviceId',
    data: 'json=' + JSON.stringify(data),
    asy: 1
  });
};

/**
 * 根据基站信息查询基站的告警和落后信息
 * 参数： json={"StationId":"@机房编号","FBSDeviceId":"@设备id"}
 */
export const searchHomeNum = (data) => {
  return axios({
    method: "post",
    url: "BattMap_informationAction!multiAmount",
    data: 'json=' + JSON.stringify(data),
    asy: 1
  });
};

 src/assets/js/tools/Timeout.js

New file
@@ -0,0 +1,67 @@
// 延时计时器
function Timeout(name) {
    this.timer = null;
    this.time = '';
    this.callback = '';
    this.workState = false;
    this.name = name?name:-33;
}
// 开启计时器并添加
Timeout.prototype.start = function(callback, time, exe) {
    // 配置执行函数
    if(typeof callback == 'function' && typeof time == 'number') {
        this.callback = callback;
        this.time = time;
        // 获取缓存的session
        let name = sessionStorage.getItem('acTabs');
        if(exe != 'exe') {
            this.workState = true;
            callback();
        }else {
            // 已经停止了
            if(!this.workState) {
                return;
            }
            // 清除计时器
            clearTimeout(this.timer);
            if(this.name == -33 || this.name == name) {
                this.timer = setTimeout(callback, time);
            }else {
                setTimeout(()=>{
                    this.open();
                }, 300);
            }
            
            
        }
    }else {
        console.warn('未完整配置参数！');
    }
};
// 开启计时器
Timeout.prototype.open = function() {
    var callback = this.callback;
    var time = this.time;
    this.start(callback, time, 'exe');
};

// 关闭计时器
Timeout.prototype.stop = function() {
    clearTimeout(this.timer);
    this.workState = false;
};

// 设置循环体 但不开始
Timeout.prototype.init = function (callback, time) {
    this.callback = callback;
    this.time = time;
    this.workState = true;
};

// 关闭后重启计时器
Timeout.prototype.restart = function() {
    this.workState = true;
    this.open();
};

export default Timeout;

 src/assets/js/tools/index.js

New file
@@ -0,0 +1,5 @@
import Timeout from './Timeout'

export {
    Timeout,
}

 src/components/charts/AcInputWarp.vue

@@ -1,120 +1,133 @@
<template>
  <div class="chartCon">
    <div class="chartItem">
      <ac-input id="AcInput0" ref="AcInput0"></ac-input>
    </div>
    <div class="chartItem">
      <ac-input id="AcInput1" ref="AcInput1"></ac-input>
    </div>
    <div class="chartItem">
      <ac-input id="AcInput2" ref="AcInput2"></ac-input>
    </div>
    <div class="chartItem">
      <ac-input id="AcInput3" ref="AcInput3"></ac-input>
    </div>
  </div>
    <div class="chartCon" @click="toParentPage">
        <div class="chartItem">
            <ac-input id="AcInput0" ref="AcInput0"></ac-input>
        </div>
        <div class="chartItem">
            <ac-input id="AcInput1" ref="AcInput1"></ac-input>
        </div>
        <div class="chartItem">
            <ac-input id="AcInput2" ref="AcInput2"></ac-input>
        </div>
        <div class="chartItem">
            <ac-input id="AcInput3" ref="AcInput3"></ac-input>
        </div>
    </div>
</template>

<script>
  import {
    powerAlarmAcInput
  } from '@/assets/js/api'
  import AcInput from './AcInput.vue'
  export default {
    components: {
      AcInput
    },
    data() {
      return {}
    },
    mounted() {
import {
    powerAlarmAcInput
} from '@/assets/js/api'
import AcInput from './AcInput.vue'
export default {
    components: {
        AcInput
    },
    data() {
        return {}
    },
    mounted() {

    },
    methods: {
      setData(data) {
        this.$nextTick(() => {
          if (data) {
            data.map((item, i) => {
              let chart = this.$refs[`AcInput${i}`];
              chart.setData(item);
              chart.resize();
            })
          } else {
            this.postData()
            setInterval(() => {
              this.postData()
            }, 3000)
          }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
        setData(data) {
            this.$nextTick(() => {
                if (data) {
                    data.map((item, i) => {
                        let chart = this.$refs[`AcInput${i}`];
                        chart.setData(item);
                        chart.resize();
                    })
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }

        })
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        powerAlarmAcInput(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = [{
              title: '熔丝告警',
              data: 56,
              acColor: '#813a74',
              resColor: '#ff649d',
            }, {
              title: '跳闸',
              data: 12,
              acColor: '#287878',
              resColor: '#5adfaa',
            }, {
              title: '频率异常',
              data: 21,
              acColor: '#2388a6',
              resColor: '#43f9fd',
            }, {
              title: '三相不平衡',
              data: 8,
              acColor: '#7f3a29',
              resColor: '#fc5f02',
            }]
            let resData = res.data.data;
            for (let key in resData) {
              optionData.map(item => {
                if (item.title == key) {
                  item.data = resData[key]
                }
              })
            }
            optionData.map((item, i) => {
              let chart = this.$refs[`AcInput${i}`];
              chart.setData(item);
              chart.resize();
            })
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        this.$refs.AcInput0.resize();
        this.$refs.AcInput1.resize();
        this.$refs.AcInput2.resize();
        this.$refs.AcInput3.resize();
      }
    }
  }
            })
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            powerAlarmAcInput(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = [{
                        title: '熔丝告警',
                        data: 56,
                        acColor: '#813a74',
                        resColor: '#ff649d',
                    }, {
                        title: '跳闸',
                        data: 12,
                        acColor: '#287878',
                        resColor: '#5adfaa',
                    }, {
                        title: '频率异常',
                        data: 21,
                        acColor: '#2388a6',
                        resColor: '#43f9fd',
                    }, {
                        title: '三相不平衡',
                        data: 8,
                        acColor: '#7f3a29',
                        resColor: '#fc5f02',
                    }]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.title == key) {
                                item.data = resData[key]
                            }
                        })
                    }
                    optionData.map((item, i) => {
                        let chart = this.$refs[`AcInput${i}`];
                        chart.setData(item);
                        chart.resize();
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            this.$refs.AcInput0.resize();
            this.$refs.AcInput1.resize();
            this.$refs.AcInput2.resize();
            this.$refs.AcInput3.resize();
        }
    }
}
</script>

<style scoped>
  .chartCon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
.chartCon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

  .chartCon .chartItem {
    width: 50%;
    height: 50%;
    float: left;
    position: relative;
  }
.chartCon .chartItem {
    width: 50%;
    height: 50%;
    float: left;
    position: relative;
}
</style>

 src/components/charts/CustomPie.vue

@@ -1,368 +1,380 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
    </div>
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import sigh from './images/sigh.png';
    import {
        chartFontsize
    } from '@/assets/js/chartFontsize';
    import {
        powerAlarmError
    } from '@/assets/js/api'
    export default {
        name: "CustomPie",
        chart: "",
        chartData: {},
        data() {
            return {}
        },
        methods: {
            setOption(opt) {
                this.$options.chart.setOption(opt);
            },
            organizeData(data) {
                let angle = 0;
                let color = "#007CD0";
                let radius = 0.55;
                let lineWidth = 4;
                let width = this.$refs.chart.offsetWidth;
                let height = this.$refs.chart.offsetHeight;
                let realWidth = width > height ? height : width;
                let option = {
                    legend: [{
                            show: true,
                            type: "scroll",
                            orient: 'vertical',
                            align: 'left',
                            left: "10%",
                            bottom: 0,
                            data: ['监控器故障', '通讯故障'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        {
                            show: true,
                            type: "scroll",
                            orient: 'vertical',
                            align: 'left',
                            left: "40%",
                            bottom: 0,
                            data: ['交流总故障', '防雷器故障'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        {
                            show: true,
                            type: "scroll",
                            orient: 'vertical',
                            align: 'left',
                            left: "70%",
                            bottom: 0,
                            data: ['开关柜故障', '直流总故障'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                    ],
                    graphic: [{
                        z: 4,
                        type: 'image',
                        id: 'logo',
                        left: (width - realWidth / 5) / (2 * width) * 100 + '%',
                        top: (height - realWidth / 5) / (2 * height) * 100 + '%',
                        bounding: 'raw',
                        rotation: 0, //旋转
                        scale: [1.0, 1.0], //缩放
                        style: {
                            image: sigh,
                            width: realWidth / 5,
                            height: realWidth / 5,
                            opacity: 1,
                        }
                    }],
                    series: [{
                            name: '',
                            type: 'pie',
                            radius: ['40%', '50%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                color(params) {
                                    return data[params.dataIndex].color;
                                },
                            },
                            label: {
                                height: 34,
                                overflow: 'none',
                                distanceToLabelLine: 0,
                                formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
                                rich: {
                                    a: {
                                        fontSize: chartFontsize(16),
                                        color: '#fff',
                                    },
                                    hr: {
                                        width: '100%',
                                        height: 1,
                                        backgroundColor: '#0073C5'
                                    },
                                    value: {
                                        fontSize: chartFontsize(18),
                                        color: '#CE6D28',
                                        fontWeight: 'bold',
                                        padding: [5, 0, 0, 0]
                                    }
                                },
                            },
                            labelLine: {
                                length: 30,
                                length2: 10,
                                lineStyle: {
                                    color: '#0073C5',
                                    width: 1,
                                }
                            },
                            data: data,
                        },
                        {
                            name: "ring5",
                            type: 'custom',
                            coordinateSystem: "none",
                            renderItem: function (params, api) {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                        startAngle: (292.5 + angle) * Math.PI / 180,
                                        endAngle: (337.5 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        stroke: color,
                                        fill: "transparent",
                                        lineWidth: lineWidth
                                    },
                                    silent: true
                                };
                            },
                            data: [0]
                        },
                        {
                            name: "ring5",
                            type: 'custom',
                            coordinateSystem: "none",
                            renderItem: function (params, api) {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                        startAngle: (22.5 + angle) * Math.PI / 180,
                                        endAngle: (67.5 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        stroke: color,
                                        fill: "transparent",
                                        lineWidth: lineWidth
                                    },
                                    silent: true
                                };
                            },
                            data: [0]
                        },
                        {
                            name: "ring5",
                            type: 'custom',
                            coordinateSystem: "none",
                            renderItem: function (params, api) {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                        startAngle: (112.5 + angle) * Math.PI / 180,
                                        endAngle: (157.5 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        stroke: color,
                                        fill: "transparent",
                                        lineWidth: lineWidth
                                    },
                                    silent: true
                                };
                            },
                            data: [0]
                        },
                        {
                            name: "ring5",
                            type: 'custom',
                            coordinateSystem: "none",
                            renderItem: function (params, api) {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                        startAngle: (200.5 + angle) * Math.PI / 180,
                                        endAngle: (245.5 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        stroke: color,
                                        fill: "transparent",
                                        lineWidth: lineWidth
                                    },
                                    silent: true
                                };
                            },
                            data: [0]
                        },
                        {
                            name: "ring5",
                            type: 'custom',
                            coordinateSystem: "none",
                            renderItem: function (params, api) {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                        startAngle: 0 * Math.PI / 180,
                                        endAngle: 360 * Math.PI / 180
                                    },
                                    style: {
                                        stroke: color,
                                        fill: "transparent",
                                        lineWidth: 1
                                    },
                                    silent: true
                                };
                            },
                            data: [0]
                        },
                        {
                            name: '',
                            type: 'pie',
                            radius: [0, '35%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [0],
                            itemStyle: {
                                color: '#007ED3'
                            }
                        }
                    ]
                };
                // 设置配置项
                this.setOption(option);
            },
            setData(sendData) {
                if (sendData) {
                    this.$options.chartData = sendData;
                    this.organizeData(sendData)
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }
            },
            postData() {
                let userId = localStorage.getItem('userId');
                let params = {
                    userId: userId
                }
                powerAlarmError(params).then((res) => {
                    if (res.data.code == 1) {
                        let optionData = [{
                                value: 0,
                                name: '通讯故障',
                                color: '#5062DE'
                            },
                            {
                                value: 0,
                                name: '直流总故障',
                                color: '#FD5E02'
                            },
                            {
                                value: 0,
                                name: '防雷器故障',
                                color: '#8C6BFA'
                            },
                            {
                                value: 0,
                                name: '开关柜故障',
                                color: '#F58881'
                            },
                            {
                                value: 0,
                                name: '监控器故障',
                                color: '#EDE611'
                            },
                            {
                                value: 0,
                                name: '交流总故障',
                                color: '#43F9FD'
                            },
                        ]
                        let resData = res.data.data;
                        for (let key in resData) {
                            optionData.map(item => {
                                if (item.name == key) {
                                    item.value = 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);
import * as echarts from 'echarts';
import sigh from './images/sigh.png';
import {
    chartFontsize
} from '@/assets/js/chartFontsize';
import {
    powerAlarmError
} from '@/assets/js/api'
export default {
    name: "CustomPie",
    chart: "",
    chartData: {},
    data() {
        return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let angle = 0;
            let color = "#007CD0";
            let radius = 0.55;
            let lineWidth = 4;
            let width = this.$refs.chart.offsetWidth;
            let height = this.$refs.chart.offsetHeight;
            let realWidth = width > height ? height : width;
            let option = {
                legend: [{
                    show: true,
                    type: "scroll",
                    orient: 'vertical',
                    align: 'left',
                    left: "10%",
                    bottom: 0,
                    data: ['监控器故障', '通讯故障'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                {
                    show: true,
                    type: "scroll",
                    orient: 'vertical',
                    align: 'left',
                    left: "40%",
                    bottom: 0,
                    data: ['交流总故障', '防雷器故障'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                {
                    show: true,
                    type: "scroll",
                    orient: 'vertical',
                    align: 'left',
                    left: "70%",
                    bottom: 0,
                    data: ['开关柜故障', '直流总故障'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                ],
                graphic: [{
                    z: 4,
                    type: 'image',
                    id: 'logo',
                    left: (width - realWidth / 5) / (2 * width) * 100 + '%',
                    top: (height - realWidth / 5) / (2 * height) * 100 + '%',
                    bounding: 'raw',
                    rotation: 0, //旋转
                    scale: [1.0, 1.0], //缩放
                    style: {
                        image: sigh,
                        width: realWidth / 5,
                        height: realWidth / 5,
                        opacity: 1,
                    }
                }],
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        color(params) {
                            return data[params.dataIndex].color;
                        },
                    },
                    label: {
                        height: 34,
                        overflow: 'none',
                        distanceToLabelLine: 0,
                        formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
                        rich: {
                            a: {
                                fontSize: chartFontsize(16),
                                color: '#fff',
                            },
                            hr: {
                                width: '100%',
                                height: 1,
                                backgroundColor: '#0073C5'
                            },
                            value: {
                                fontSize: chartFontsize(18),
                                color: '#CE6D28',
                                fontWeight: 'bold',
                                padding: [5, 0, 0, 0]
                            }
                        },
                    },
                    labelLine: {
                        length: 30,
                        length2: 10,
                        lineStyle: {
                            color: '#0073C5',
                            width: 1,
                        }
                    },
                    data: data,
                },
                {
                    name: "ring5",
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                startAngle: (292.5 + angle) * Math.PI / 180,
                                endAngle: (337.5 + angle) * Math.PI / 180
                            },
                            style: {
                                stroke: color,
                                fill: "transparent",
                                lineWidth: lineWidth
                            },
                            silent: true
                        };
                    },
                    data: [0]
                },
                {
                    name: "ring5",
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                startAngle: (22.5 + angle) * Math.PI / 180,
                                endAngle: (67.5 + angle) * Math.PI / 180
                            },
                            style: {
                                stroke: color,
                                fill: "transparent",
                                lineWidth: lineWidth
                            },
                            silent: true
                        };
                    },
                    data: [0]
                },
                {
                    name: "ring5",
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                startAngle: (112.5 + angle) * Math.PI / 180,
                                endAngle: (157.5 + angle) * Math.PI / 180
                            },
                            style: {
                                stroke: color,
                                fill: "transparent",
                                lineWidth: lineWidth
                            },
                            silent: true
                        };
                    },
                    data: [0]
                },
                {
                    name: "ring5",
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                startAngle: (200.5 + angle) * Math.PI / 180,
                                endAngle: (245.5 + angle) * Math.PI / 180
                            },
                            style: {
                                stroke: color,
                                fill: "transparent",
                                lineWidth: lineWidth
                            },
                            silent: true
                        };
                    },
                    data: [0]
                },
                {
                    name: "ring5",
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function (params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2,
                                r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                startAngle: 0 * Math.PI / 180,
                                endAngle: 360 * Math.PI / 180
                            },
                            style: {
                                stroke: color,
                                fill: "transparent",
                                lineWidth: 1
                            },
                            silent: true
                        };
                    },
                    data: [0]
                },
                {
                    name: '',
                    type: 'pie',
                    radius: [0, '35%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [0],
                    itemStyle: {
                        color: '#007ED3'
                    }
                }
                ]
            };
            // 设置配置项
            this.setOption(option);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            powerAlarmError(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '通讯故障',
                        color: '#5062DE'
                    },
                    {
                        value: 0,
                        name: '直流总故障',
                        color: '#FD5E02'
                    },
                    {
                        value: 0,
                        name: '防雷器故障',
                        color: '#8C6BFA'
                    },
                    {
                        value: 0,
                        name: '开关柜故障',
                        color: '#F58881'
                    },
                    {
                        value: 0,
                        name: '监控器故障',
                        color: '#EDE611'
                    },
                    {
                        value: 0,
                        name: '交流总故障',
                        color: '#43F9FD'
                    },
                    ]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
                                item.value = 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() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>

</style>

 src/components/charts/MonCap.vue

@@ -1,164 +1,177 @@
<template>
  <div class="flex-box">
    <div class="flex-box-body">
      <circle-chart id="circleChart" ref="circleChart"></circle-chart>
    </div>
    <div class="flex-box-footer">
      <ul class="list-view">
        <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
          <span class="item-name">{{item.name}}</span>
          :
          <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
        </li>
      </ul>
    </div>
  </div>
    <div class="flex-box" @click="toParentPage">
        <div class="flex-box-body">
            <circle-chart id="circleChart" ref="circleChart"></circle-chart>
        </div>
        <div class="flex-box-footer">
            <ul class="list-view">
                <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
                    <span class="item-name">{{item.name}}</span>
                    :
                    <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  import CircleChart from "@/components/charts/CircleChart";
  import {
    batteryAlarmMonCapacity
  } from '@/assets/js/api'
  export default {
    name: "MonCap",
    components: {
      CircleChart
    },
    data() {
      return {
        chart: {
          circle: [{
              name: '低告警数量',
              value: 0,
              color: '#00DFFC',
            },
            {
              name: '告警总数比例',
              value: 0,
              color: '#FF8B34',
            },
            {
              name: '告警总数',
              value: 0,
              color: '#ED4882',
            },
            {
              name: '告警机房总数',
              value: 0,
              color: '#2EEA9D',
            },
            {
              name: '告警机房数比例',
              value: 0,
              color: '#F3E501',
            }
          ]
        }
      }
    },
    methods: {
      setData(data) {
        this.$nextTick(() => {
          if (data) {
            this.chart = data;
            let chart = this.$refs.circleChart;
            chart.setData(data.circle);
            chart.resize();
          } else {
            this.postData()
            setInterval(() => {
              this.postData()
            }, 3000)
          }
import CircleChart from "@/components/charts/CircleChart";
import {
    batteryAlarmMonCapacity
} from '@/assets/js/api'
export default {
    name: "MonCap",
    components: {
        CircleChart
    },
    data() {
        return {
            chart: {
                circle: [{
                    name: '低告警数量',
                    value: 0,
                    color: '#00DFFC',
                },
                {
                    name: '告警总数比例',
                    value: 0,
                    color: '#FF8B34',
                },
                {
                    name: '告警总数',
                    value: 0,
                    color: '#ED4882',
                },
                {
                    name: '告警机房总数',
                    value: 0,
                    color: '#2EEA9D',
                },
                {
                    name: '告警机房数比例',
                    value: 0,
                    color: '#F3E501',
                }
                ]
            }
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setData(data) {
            this.$nextTick(() => {
                if (data) {
                    this.chart = data;
                    let chart = this.$refs.circleChart;
                    chart.setData(data.circle);
                    chart.resize();
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }

        })
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        batteryAlarmMonCapacity(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              circle: [{
                  name: '告警数',
                  value: 10,
                  color: '#00DFFC',
                },
                {
                  name: '告警占比',
                  value: 10,
                  color: '#FF8B34',
                },
                {
                  name: '告警总数',
                  value: 10,
                  color: '#ED4882',
                },
                {
                  name: '告警机房数',
                  value: 10,
                  color: '#2EEA9D',
                },
                {
                  name: '告警机房占比',
                  value: 10,
                  color: '#F3E501',
                }
              ]
            }
            let resData = res.data.data;
            for (let key in resData) {
              optionData.circle.map(item => {
                if (item.name == key) {
                  if (typeof resData[key] == 'string') {
                    item.value = Number(resData[key].split('%')[0])
                  } else {
                    item.value = resData[key]
                  }
                }
              })
            }
            this.chart = optionData;
            let chart = this.$refs.circleChart;
            chart.setData(optionData.circle);
            chart.resize();
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        this.$refs.circleChart.resize();
      }
    }
  }
            })
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryAlarmMonCapacity(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = {
                        circle: [{
                            name: '告警数',
                            value: 10,
                            color: '#00DFFC',
                        },
                        {
                            name: '告警占比',
                            value: 10,
                            color: '#FF8B34',
                        },
                        {
                            name: '告警总数',
                            value: 10,
                            color: '#ED4882',
                        },
                        {
                            name: '告警机房数',
                            value: 10,
                            color: '#2EEA9D',
                        },
                        {
                            name: '告警机房占比',
                            value: 10,
                            color: '#F3E501',
                        }
                        ]
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.circle.map(item => {
                            if (item.name == key) {
                                if (typeof resData[key] == 'string') {
                                    item.value = Number(resData[key].split('%')[0])
                                } else {
                                    item.value = resData[key]
                                }
                            }
                        })
                    }
                    this.chart = optionData;
                    let chart = this.$refs.circleChart;
                    chart.setData(optionData.circle);
                    chart.resize();
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            this.$refs.circleChart.resize();
        }
    }
}
</script>

<style scoped>
  .flex-box {
    display: flex;
    height: 100%;
    align-items: center;
  }
.flex-box {
    display: flex;
    height: 100%;
    align-items: center;
}

  .flex-box-body {
    flex: 1;
    height: 100%;
  }
.flex-box-body {
    flex: 1;
    height: 100%;
}

  .flex-box-footer {
    padding: 0 8px;
  }
.flex-box-footer {
    padding: 0 8px;
}

  .list-view li {
    list-style: none;
  }
.list-view li {
    list-style: none;
}

  .list-view-item {
    white-space: nowrap;
    padding: 8px 0;
  }
.list-view-item {
    white-space: nowrap;
    padding: 8px 0;
}
</style>

 src/components/charts/PictorialBar.vue

@@ -1,188 +1,200 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>

<script>
  import * as echarts from "echarts";
  import {
    onlinegroupVolAnalysis
  } from '@/assets/js/api'
  export default {
    name: "PictorialBar",
    chart: "",
    chartData: {},
    props: {
      id: {
        type: String,
        default: ""
      }
    },
    data() {
      return {}
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let option = {
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            data: ['在线电压', '组端电压'],
            top: '4%',
            right: '8%',
            icon: 'rect',
            textStyle: {
              color: '#fff',
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff',
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: "#007DD140",
              }
            },
            data: data.xData,
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                color: '#007DD140',
                type: 'dashed',
              }
            }
          },
          series: []
        };
import * as echarts from "echarts";
import {
    onlinegroupVolAnalysis
} from '@/assets/js/api'
export default {
    name: "PictorialBar",
    chart: "",
    chartData: {},
    props: {
        id: {
            type: String,
            default: ""
        }
    },
    data() {
        return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let option = {
                grid: {
                    top: 40,
                    right: 20,
                    left: 50,
                    bottom: 30
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                },
                legend: {
                    data: ['在线电压', '组端电压'],
                    top: '4%',
                    right: '8%',
                    icon: 'rect',
                    textStyle: {
                        color: '#fff',
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: '#fff',
                        interval: 0,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#007DD140",
                        }
                    },
                    data: data.xData,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            color: '#007DD140',
                            type: 'dashed',
                        }
                    }
                },
                series: []
            };

        data.series.map((item) => {
          option.series.push({
            name: item.name,
            type: "pictorialBar",
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              color: item.color
            },
            data: item.data
          })
        })
            data.series.map((item) => {
                option.series.push({
                    name: item.name,
                    type: "pictorialBar",
                    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                    itemStyle: {
                        color: item.color
                    },
                    data: item.data
                })
            })

        option.series[1]['barGap'] = '-1%'
            option.series[1]['barGap'] = '-1%'

        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        onlinegroupVolAnalysis(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              xData: [],
              series: [{
                  name: "在线电压",
                  data: [],
                  color: '#E85D22'
                },
                {
                  name: "组端电压",
                  data: [],
                  color: '#2EEA9D'
                }
              ]
            }
            let resData = res.data.data;
            for (let key in resData) {
              let seriesData = resData[key]
              if (key == '在线电压') {
                for (let jey in seriesData) {
                  if (typeof seriesData[jey] == 'string') {
                    optionData.series[0].data.push({
                      name: jey,
                      value: Number(seriesData[jey].split('%')[0])
                    })
                  } else {
                    optionData.series[0].data.push({
                      name: jey,
                      value: seriesData[jey]
                    })
                  }
                }
              } else if (key == '组端电压') {
                for (let jey in seriesData) {
                  if (typeof seriesData[jey] == 'string') {
                    optionData.series[1].data.push({
                      name: jey,
                      value: Number(seriesData[jey].split('%')[0])
                    })
                  } else {
                    optionData.series[1].data.push({
                      name: jey,
                      value: seriesData[jey]
                    })
                  }
                }
              }
            }
            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);
            // 设置配置项
            this.setOption(option);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            onlinegroupVolAnalysis(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = {
                        xData: [],
                        series: [{
                            name: "在线电压",
                            data: [],
                            color: '#E85D22'
                        },
                        {
                            name: "组端电压",
                            data: [],
                            color: '#2EEA9D'
                        }
                        ]
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        let seriesData = resData[key]
                        if (key == '在线电压') {
                            for (let jey in seriesData) {
                                if (typeof seriesData[jey] == 'string') {
                                    optionData.series[0].data.push({
                                        name: jey,
                                        value: Number(seriesData[jey].split('%')[0])
                                    })
                                } else {
                                    optionData.series[0].data.push({
                                        name: jey,
                                        value: seriesData[jey]
                                    })
                                }
                            }
                        } else if (key == '组端电压') {
                            for (let jey in seriesData) {
                                if (typeof seriesData[jey] == 'string') {
                                    optionData.series[1].data.push({
                                        name: jey,
                                        value: Number(seriesData[jey].split('%')[0])
                                    })
                                } else {
                                    optionData.series[1].data.push({
                                        name: jey,
                                        value: seriesData[jey]
                                    })
                                }
                            }
                        }
                    }
                    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() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>

</style>

 src/components/charts/RoseChart.vue

@@ -1,193 +1,205 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    batteryAlarmBtsStatus
  } from '@/assets/js/api'
  export default {
    name: "RoseChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        type: String,
        default: ""
      }
    },
    data() {
      return {}
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let option = {
          legend: [{
              type: "scroll",
              orient: 'vertical',
              align: 'left',
              left: "5%",
              bottom: '1%',
              data: ['核容数量', '内阻测试数量'],
              textStyle: {
                color: '#fff'
              }
            },
            {
              type: "scroll",
              orient: 'vertical',
              left: "40%",
              bottom: '1%',
              align: 'left',
              data: ['在线浮充', '故障数量'],
              textStyle: {
                color: '#fff'
              }
            },
            {
              orient: 'vertical',
              left: "75%",
              bottom: '8%',
              data: ['充电数量', '无用'],
              textStyle: {
                color: '#fff'
              }
            },
          ],
          series: [{
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['0', '50%'],
            roseType: 'radius',
            itemStyle: {
              color(params) {
                return data[params.dataIndex].color;
              },
            },
            label: {
              height: 34,
              overflow: 'none',
              distanceToLabelLine: 0,
              formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
              rich: {
                a: {
                  fontSize: 16,
                  color: '#fff',
                },
                hr: {
                  width: '100%',
                  height: 1,
                  backgroundColor: '#0073C5'
                },
                value: {
                  fontSize: 18,
                  color: '#CE6D28',
                  fontWeight: 'bold',
                  padding: [5, 0, 0, 0]
                }
              },
            },
            labelLine: {
              length: 20,
              length2: 10,
              lineStyle: {
                color: '#0073C5',
                width: 1,
              }
            },
            data: data
          }]
        };
import * as echarts from 'echarts';
import {
    batteryAlarmBtsStatus
} from '@/assets/js/api'
export default {
    name: "RoseChart",
    chart: "",
    chartData: [],
    props: {
        id: {
            type: String,
            default: ""
        }
    },
    data() {
        return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "设备状态查询",
                        name: 'btsStatusTest',
                        src: '#/dataMager/btsStatus',
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let option = {
                legend: [{
                    type: "scroll",
                    orient: 'vertical',
                    align: 'left',
                    left: "5%",
                    bottom: '1%',
                    data: ['核容数量', '内阻测试数量'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                {
                    type: "scroll",
                    orient: 'vertical',
                    left: "40%",
                    bottom: '1%',
                    align: 'left',
                    data: ['在线浮充', '故障数量'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                {
                    orient: 'vertical',
                    left: "75%",
                    bottom: '8%',
                    data: ['充电数量', '无用'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                ],
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['0', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        color(params) {
                            return data[params.dataIndex].color;
                        },
                    },
                    label: {
                        height: 34,
                        overflow: 'none',
                        distanceToLabelLine: 0,
                        formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
                        rich: {
                            a: {
                                fontSize: 16,
                                color: '#fff',
                            },
                            hr: {
                                width: '100%',
                                height: 1,
                                backgroundColor: '#0073C5'
                            },
                            value: {
                                fontSize: 18,
                                color: '#CE6D28',
                                fontWeight: 'bold',
                                padding: [5, 0, 0, 0]
                            }
                        },
                    },
                    labelLine: {
                        length: 20,
                        length2: 10,
                        lineStyle: {
                            color: '#0073C5',
                            width: 1,
                        }
                    },
                    data: data
                }]
            };

        // 设置图表配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        batteryAlarmBtsStatus(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = [{
                value: 0,
                name: '在线浮充',
                color: '#E85D22'
              },
              {
                value: 0,
                name: '充电数量',
                color: '#76CFDD'
              },
              {
                value: 0,
                name: '内阻测试数量',
                color: '#FEDB5B'
              },
              {
                value: 0,
                name: '故障数量',
                color: '#8278E9'
              },
              {
                value: 0,
                name: '核容数量',
                color: '#9EE6B8'
              },
            ]
            let resData = res.data.data;
            for (let key in resData) {
              optionData.map(item => {
                if (item.name == key) {
                  item.value = 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);
            // 设置图表配置项
            this.setOption(option);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryAlarmBtsStatus(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '在线浮充',
                        color: '#E85D22'
                    },
                    {
                        value: 0,
                        name: '充电数量',
                        color: '#76CFDD'
                    },
                    {
                        value: 0,
                        name: '内阻测试数量',
                        color: '#FEDB5B'
                    },
                    {
                        value: 0,
                        name: '故障数量',
                        color: '#8278E9'
                    },
                    {
                        value: 0,
                        name: '核容数量',
                        color: '#9EE6B8'
                    },
                    ]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
                                item.value = 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() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>

</style>

 src/components/charts/abeamProChart.vue

@@ -1,241 +1,254 @@
<template>
  <div class="flexCon">
    <div class="con">
      <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart">
    <div class="flexCon" @click="toParentPage">
        <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 {
    batteryStatus
} from '@/assets/js/api'
export default {
    name: "abeamProChart",
    chart: "",
    chartData: {},
    props: {
        id: {
            require: true,
            type: String,
            default: "",
        },
    },
    data() {
        return {

      }
    },
    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 / 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: 'none'
            },
            formatter: function (params) {
              return params[0].name + ' : ' + params[0].value
            }
          },
          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],
              },
              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 {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        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);
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        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 / 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: 'none'
                    },
                    formatter: function (params) {
                        return params[0].name + ' : ' + params[0].value
                    }
                },
                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],
                    },
                    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 {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            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() {
        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: 80%;
  }
.flexCon .con {
    width: 100%;
    height: 80%;
}
</style>

 src/components/charts/chinaMap.vue

@@ -3,6 +3,15 @@
        <div class="echarts-content" ref="chart" id="cityChart">

        </div>
        <div class="infoPanel" v-show="isShowInfoPanel" :style="{ left: mapInfoX + 'px', top: mapInfoY + 'px' }">
            <h4 class="infoPanel-Title">
                {{ mapInfoTitle }}
                <div class="closeBtn" @click.self="isShowInfoPanel=false"></div>
            </h4>
            <div class="infoPanel-center">
                <info-panel :infos="panelInfo"></info-panel>
            </div>
        </div>
    </div>
</template>

@@ -12,6 +21,8 @@
    searchMap,
    searchMapHomeState,
    getAllMapOutlineAction,
    searchByDevId,
    searchHomeNum,
} from "../../assets/js/api";

import HomeNormal from '@/assets/images/home.png'
@@ -31,21 +42,43 @@
homeWarnImage.src = HomeWarnImage;
// 放电图标
import HomeDischargeImage from '@/assets/images/home-discharge.png';
import InfoPanel from '../indexPanel/InfoPanel.vue';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
let addHomeData = [];
let chartData = []; //chart数据
let abnormalArr = []; //异常数组
let tempData = []; //站点数组
let chart, chartLng, chartLat;
let chart, chartLng, chartLat, timers;

export default {
    components: { InfoPanel },
    name: "chinaMap",
    chart: "",
    chartData: "",
    data() {
        return {
            mapName: 'zhongguo'
            timer: null,
            mapName: 'zhongguo',
            mapInfoX: null,
            mapInfoY: null,
            mapInfoTitle: "",
            isShowInfoPanel: false,
            panelInfo: {
                num: 369,
                StationId: "42070471",
                StationName: "贵州省-贵阳市-观山湖区-观山湖区护理学院-设备1",
                StationName3: "观山湖区护理学院",
                Address: "湖北省武汉市武昌区",
                longitude: 114.37285909,
                latitude: 30.56442241,
                information: "",
                FBSDeviceId: 910000111,
                nums: {
                    code: 0,
                    sum: 0,
                    newsum: 0
                }
            },
        }
    },
    methods: {
@@ -162,7 +195,7 @@
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data;
                    data.map((item, index) => {
                    data.map((item) => {
                        if (item.status == 1) {
                            this.mapName = item.name;
                        }
@@ -176,47 +209,123 @@
                    console.log(err);
                });
        },
        changeChartPanelStatus(homeData) {
            //panel面板状态改变
            this.isShowInfoPanel = true;
            let poit = this.convertMain(homeData.longitude, homeData.latitude);
            this.mapInfoX = poit[0] - 120;
            this.mapInfoY = poit[1] - 190;
            this.mapInfoTitle = homeData.StationName;
            this.$nextTick(() => {
                this.panelInfo = homeData
                // this.$refs.infoPanel.setInfo(homeData); //传值子组件
            });
        },
        convertMain(Lng, lat) {
            //根据经纬度计算定位
            // let getModel = chart.getModel().getSeries()[1];
            let seriesModel = chart.getModel().getSeriesByIndex(0);
            let coordSys = seriesModel.coordinateSystem;
            let point = coordSys.dataToPoint([Lng, lat]);
            return point;
        },
        startSearchMapHomeState() {
            this.timer = setInterval(() => {
                this.searchChartHomeState()
            }, 4000)

        },
        initPage() {
            // 初始化地图
            this.initCityChart();
            chart = echarts.init(document.getElementById('cityChart'));
            chart.off('click'); //防止chart点击触发多次
            chart.on("click", params => { //点击跳转实时数据

            chart.on("georoam", (params) => {
                clearInterval(this.timer)
                if (!this.isShowInfoPanel) {
                    return;
                }
                this.isShowInfoPanel = false;
                clearTimeout(timers);
                timers = setTimeout(() => {
                    this.isShowInfoPanel = true;
                    let poit = this.convertMain(chartLng, chartLat);
                    this.mapInfoX = poit[0] - 120;
                    this.mapInfoY = poit[1] - 190;

                    var option = chart.getOption(); //获得option对象
                    if (params.zoom != null && params.zoom != undefined) {
                        //捕捉到缩放时
                        option.series[0].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
                        option.series[0].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
                    } else {
                        //捕捉到拖曳时
                        option.series[0].center = option.geo[0].center; //下层的geo的中心位置着上层geo一起改变
                    }
                    chart.setOption(option); //设置option

                    this.startSearchMapHomeState();
                }, 300);
            });
            chart.off("click"); //防止chart点击触发多次
            chart.on("click", (params) => {
                //点击跳转实时数据
                if (params.seriesType == "scatter") {
                    this.$router.push({
                        path: '/functionList'
                    })
                    chartLng = params.data.longitude;
                    chartLat = params.data.latitude;
                    this.showChartPanel(
                        params.data.StationId,
                        params.data.FBSDeviceId,
                        params.data
                    );
                }
            });
        },
        // 查询告警落后的信息
        showChartPanel(sId, dev_id, homeData) {
            // 检测是否存在3D机房
            searchByDevId({
                deviceId: dev_id,
            })
                .then((res) => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.data.length != 0) {
                        this.areas = rs.data;
                        //this.hdwDialog = true;
                        this.showThreeHomeDialog(this.areas);
                    } else {
                        searchHomeNum({
                            // 查询告警落后的信息
                            StationId: sId,
                            FBSDeviceId: dev_id,
                        })
                            .then((res) => {
                                let rs = JSON.parse(res.data.result);
                                homeData.nums = rs;
                                this.changeChartPanelStatus(homeData);
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        initCityChart() {
            searchMap().then((res) => {
                let rs = JSON.parse(res.data.result);
                let list = this.mergeMapInfos(rs);
                if (list != undefined && list.length > 0) {
                    list.map((item, index) => {
                    list.map((item) => {
                        item.name = item.StationName;
                        item.value = [];
                        item.value.push(item.longitude);
                        item.value.push(item.latitude);
                        tempData.push(item)
                    })
                    this.searchChartHomeState();

                    let mapDotList = list.map(data => {
                        return {
                            lng: data.longitude,
                            lat: data.latitude,
                            title: data.StationName,
                            data: data,
                            name: data.StationName,
                            geometry: {
                                type: 'Point',
                                coordinates: [data.longitude, data.latitude]
                            }
                        }
                    });
                    addHomeData = mapDotList;
                    this.startSearchMapHomeState();
                } else {
                    this.initChart([], []);
                }
@@ -231,7 +340,7 @@
                abnormalArr = [];
                if (rsState.code === 1) {
                    let data = rsState.data;
                    data.map((item, i) => {
                    data.map((item) => {
                        let infos = tempData.filter((jtem) => {
                            return jtem.StationId == item.StationId
                        })
@@ -284,6 +393,7 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            let asd = value
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
@@ -317,11 +427,11 @@
                        },
                        itemStyle: {
                            normal: {
                                color: function (value, params) {
                                color: function (value) {
                                    return value.data.color
                                },
                                shadowBlur: 8,
                                shadowColor: function (value, params) {
                                shadowColor: function (value) {
                                    return value.data.color
                                },
                            }
@@ -337,6 +447,7 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            let asd = value
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
@@ -383,20 +494,97 @@
            }
            return rs;
        },
        showThreeHomeDialog(areas) {
            window.parent.parent.postMessage(
                {
                    cmd: "showDialog",
                    params: {
                        dialog: "hdwDialog",
                        pageInfo: areas,
                    },
                },
                "*"
            );
        },
    },
    mounted() {
        // 初始化页面
        this.getAllMapOutlineAction();
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);


        // 监听chartMap的面板
        window.addEventListener("resize", () => {
            if (!this.isShowInfoPanel || !this.mapName) {
                return;
            }
            this.isShowInfoPanel = false;
            timers = setTimeout(() => {
                this.isShowInfoPanel = true;
                let poit = this.convertMain(chartLng, chartLat);
                this.mapInfoX = poit[0] - 120;
                this.mapInfoY = poit[1] - 190;
            }, 300);
        });
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
    }
        clearInterval(this.timer)
    },
}
</script>

<style scoped>
.infoPanel {
    position: absolute;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid #999;
    z-index: 99;
}

.infoPanel .infoPanel-Title {
    border-bottom: 1px solid #ccc;
    height: 31px;
    line-height: 30px;
    background-color: #f9f9f9;
    overflow: hidden;
    height: 30px;
    padding: 0 5px;
    font-size: 12px;
    position: relative;
}

.infoPanel .infoPanel-Title .closeBtn {
    background: url("../../assets/images/iw_close1d3.gif") 0 0 no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 9px;
    right: 12px;
    width: 10px;
    height: 10px;
    user-select: none;
    overflow: hidden;
    cursor: pointer;
    line-height: 9999px;
    z-index: 10000;
}

.infoPanel .infoPanel-center {
    padding: 3px 5px;
    overflow-x: auto;
    overflow-y: hidden;
}

.infoPanel::after {
    content: "";
    display: block;
    z-index: 5;
    position: absolute;
    bottom: -31px;
    width: 58px;
    height: 31px;
    left: 125px;
    background: url("../../assets/images/iw_tail.png") 0 0 no-repeat;
    background-size: 100% 100%;
}
</style>

 src/components/charts/dischargeCircuit.vue

@@ -1,520 +1,532 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="dischargeCircuit">
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="dischargeCircuit">

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

<script>
import * as echarts from 'echarts';
// 放电电流 页面
export default {
  name: "dischargeCircuit",
  chart: "",
  chartData: {},
  props: {
    id: {
      require: true,
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: ""
    },
    top: {
      type: Number,
      default: 15,
    },
    bottom: {
      type: Number,
      default: 60
    },
    space: {
      type: Number,
      default: 4
    },
  },
  data() {
    return {
        userId:""
    }
  },
  methods: {
    setOption(opt) {
      this.$options.discharge.setOption(opt);
    },
    setData(dataList) {
        let self = this;
        let xAxisData = [];//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例']
        let maxYAxis = [];
        let xData =[];
        let data = [];
            // 存值
            self.$options.chartData = dataList;
            if(!dataList){
                self.$axios({
                    method:"get",
                    url:"/batteryAlarm/dischargeAnalysis",
                    params:{
                        userId:self.userId
                    }
    name: "dischargeCircuit",
    chart: "",
    chartData: {},
    props: {
        id: {
            require: true,
            type: String,
            default: "",
        },
        name: {
            type: String,
            default: ""
        },
        top: {
            type: Number,
            default: 15,
        },
        bottom: {
            type: Number,
            default: 60
        },
        space: {
            type: Number,
            default: 4
        },
    },
    data() {
        return {
            userId: ""
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.discharge.setOption(opt);
        },
        setData(dataList) {
            let self = this;
            let xAxisData = [];//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例']
            let maxYAxis = [];
            let xData = [];
            let data = [];
            // 存值
            self.$options.chartData = dataList;
            if (!dataList) {
                self.$axios({
                    method: "get",
                    url: "/batteryAlarm/dischargeAnalysis",
                    params: {
                        userId: self.userId
                    }

                }).then(res=>{
                    if(res.data.code == 1){
                        let result = res.data.data;
                            for (const key in result) {
                                xAxisData.push(key);
                                xData.push(result[key]);
                                if(typeof(result[key]) == 'string'){
                                    data.push(parseFloat(result[key].replace(/%/g,"")));
                                }else{
                                    data.push(result[key]);
                                }
                            }
                        let maxInt = Math.max.apply(null,data) + 100;
                            data.forEach(() => {
                                maxYAxis.push(maxInt);
                            });
                            self.optionSet(xAxisData,maxYAxis,xData,data);
                            console.log(xAxisData,data)
                    }
                })
            }else{
                self.optionSet(dataList.xAxisData,dataList.maxYAxis,dataList.xData,dataList.data);
            }
    
    },
    // 获取对应数据
    getArrValue(value){
        let test = 0;
            if(value == "告警总数比例" || value == "告警机房数比例"){
                test = 1;
            }
            return test;
    },
    // 图表配置
    optionSet(xAxisData,maxYAxis,xData,data){
        let self = this;
        var option = {
                grid: {
                    left: '15%',
                    right: '15%',
                    bottom: '10%',
                    top: '17%',
                    z: 22
                },
                xAxis: [
                    {
                        //左侧柱状图的x轴    下X轴
                        type: 'category',
                        gridIndex: 0,//y轴所在的 grid 的索引
                        // boundaryGap: false,
                        splitLine: 'none',
                        axisTick: 'none',
                        axisLine: {
                            show:true,
                            lineStyle: {
                                width:2,
                                color: 'rgba(117,103,244,1)',
                            }
                        },
                        axisLabel: {
                            // verticalAlign: 'bottom',
                            align: 'center',
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '12'
                            }
                        },
                        data: xAxisData,//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                        // inverse: true, //反转
                    },
                    {
                        // 左侧柱状图的Y轴        上X轴
                        gridIndex: 0,//y轴所在的 grid 的索引
                        splitLine: 'none',
                        axisTick: 'none',
                        axisLine: {
                            show:false
                        },
                        axisLabel:{
                            color:function (params,index) {
                            let colorList = [
                                "#EB6F49",
                                "#757EFA",
                                "#1A6AEF",
                                "#67E0E3",
                                "#FED601"
                            ];
                            return colorList[index];
                            },
                        },
                        // inverse: true, //反转
                        data: xData//[555,444,333,222,666],
                    },
                    ],
                yAxis: [
                    {
                    //坐标轴  左Y轴
                    type: 'value',
                    // name: '数值',
                    min: 0,
                    max: maxYAxis[0],
                    // interval: 300,
                    axisLine: {
                        show: false,
                        // y坐标线样式
                        lineStyle:{
                        width:3  
                        },
                        // y坐标文字样式
                        itemStyle:{
                        width:3,
                        color:"#ffffff" 
                        }
                        
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ffffff',
                        }
                    },
                    //分格线
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: '#000'
                        }
                    }
                },
                {//右Y轴
                    type: 'value',
                    // name: '比例',
                    min: 0,
                    max: 100,
                    // interval: 10,
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    //分格线
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: '#000'
                        }
                    }
                }
                ],
                series: [
                    // 低告警数量
                    {
                        name: xAxisData[0],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [data[0],0,0,0,0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 告警总数
                    {
                        name: xAxisData[1],
                        type: 'bar',
                        // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[1]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,data[1],0,0,0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 告警总数比例
                    {
                        name: xAxisData[2],
                        type: 'bar',
                        // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[2]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,0,data[2],0,0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 告警机房总数
                    {
                        name: xAxisData[3],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex:self.getArrValue(xAxisData[3]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,0,0,data[3],0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 告警机房数比例
                    {
                        name: xAxisData[4],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[4]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,0,0,0,data[4]],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 外框
                    {
                        name: '外框',
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        barGap: '-1',
                        data: maxYAxis,//[1800,1800, 1800,1800,1800],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: 'rgba(255, 255, 255, 0.15)',
                                barBorderRadius: 6,
                            }
                        },
                        z: 0
                    },
                    // 低告警数量
                    {
                        name: xAxisData[0],
                        type: 'pictorialBar',
                        // symbol: '../../assets/logo copy.png',
                        symbolSize: [30,-30],
                        yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: data[0],
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警总数
                    {
                        name: xAxisData[1],
                        type: 'pictorialBar',
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30,-30],
                        yAxisIndex: self.getArrValue(xAxisData[1]),
                        color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: data[1],
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警总数比例
                    {
                        name: xAxisData[2],
                        type: 'pictorialBar',
                        yAxisIndex: self.getArrValue(xAxisData[2]),
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30,-30],
                        color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: data[2],
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警机房总数
                    {
                        name: xAxisData[3],
                        type: 'pictorialBar',
                        yAxisIndex: self.getArrValue(xAxisData[3]),
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30,-30],
                        color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: data[3],
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警机房数比例
                    {
                        name: xAxisData[4],
                        yAxisIndex: self.getArrValue(xAxisData[4]),
                        type: 'pictorialBar',
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30,-30],
                        color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: 0,
                            symbolPosition: 'end'
                        },{
                            value: data[4],
                            symbolPosition: 'end'
                        }]
                    },
                    
                    
                ]
            };
            this.setOption(option);
    },
    resize() {
        let self = this;
            setTimeout(function(){
                self.$options.discharge.resize();
                self.setData(self.$options.chartData);
            })
    }
  },
  mounted() {
      //   获取userId
    this.userId = localStorage.getItem("userId");
    // 基于准备好的dom，初始化echarts实例
    this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);
                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data;
                        for (const key in result) {
                            xAxisData.push(key);
                            xData.push(result[key]);
                            if (typeof (result[key]) == 'string') {
                                data.push(parseFloat(result[key].replace(/%/g, "")));
                            } else {
                                data.push(result[key]);
                            }
                        }
                        let maxInt = Math.max.apply(null, data) + 100;
                        data.forEach(() => {
                            maxYAxis.push(maxInt);
                        });
                        self.optionSet(xAxisData, maxYAxis, xData, data);
                        console.log(xAxisData, data)
                    }
                })
            } else {
                self.optionSet(dataList.xAxisData, dataList.maxYAxis, dataList.xData, dataList.data);
            }

    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }
        },
        // 获取对应数据
        getArrValue(value) {
            let test = 0;
            if (value == "告警总数比例" || value == "告警机房数比例") {
                test = 1;
            }
            return test;
        },
        // 图表配置
        optionSet(xAxisData, maxYAxis, xData, data) {
            let self = this;
            var option = {
                grid: {
                    left: '15%',
                    right: '15%',
                    bottom: '10%',
                    top: '17%',
                    z: 22
                },
                xAxis: [
                    {
                        //左侧柱状图的x轴    下X轴
                        type: 'category',
                        gridIndex: 0,//y轴所在的 grid 的索引
                        // boundaryGap: false,
                        splitLine: 'none',
                        axisTick: 'none',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 2,
                                color: 'rgba(117,103,244,1)',
                            }
                        },
                        axisLabel: {
                            // verticalAlign: 'bottom',
                            align: 'center',
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize: '12'
                            }
                        },
                        data: xAxisData,//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                        // inverse: true, //反转
                    },
                    {
                        // 左侧柱状图的Y轴        上X轴
                        gridIndex: 0,//y轴所在的 grid 的索引
                        splitLine: 'none',
                        axisTick: 'none',
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            color: function (params, index) {
                                let colorList = [
                                    "#EB6F49",
                                    "#757EFA",
                                    "#1A6AEF",
                                    "#67E0E3",
                                    "#FED601"
                                ];
                                return colorList[index];
                            },
                        },
                        // inverse: true, //反转
                        data: xData//[555,444,333,222,666],
                    },
                ],
                yAxis: [
                    {
                        //坐标轴  左Y轴
                        type: 'value',
                        // name: '数值',
                        min: 0,
                        max: maxYAxis[0],
                        // interval: 300,
                        axisLine: {
                            show: false,
                            // y坐标线样式
                            lineStyle: {
                                width: 3
                            },
                            // y坐标文字样式
                            itemStyle: {
                                width: 3,
                                color: "#ffffff"
                            }

                        },
                        //坐标值标注
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ffffff',
                            }
                        },
                        //分格线
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    },
                    {//右Y轴
                        type: 'value',
                        // name: '比例',
                        min: 0,
                        max: 100,
                        // interval: 10,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        //分格线
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    // 低告警数量
                    {
                        name: xAxisData[0],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [data[0], 0, 0, 0, 0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                                barBorderRadius: 6
                            },
                        },
                        z: 2
                    },
                    // 告警总数
                    {
                        name: xAxisData[1],
                        type: 'bar',
                        // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[1]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0, data[1], 0, 0, 0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                                barBorderRadius: 6
                            },
                        },
                        z: 2
                    },
                    // 告警总数比例
                    {
                        name: xAxisData[2],
                        type: 'bar',
                        // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[2]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0, 0, data[2], 0, 0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                                barBorderRadius: 6
                            },
                        },
                        z: 2
                    },
                    // 告警机房总数
                    {
                        name: xAxisData[3],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[3]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0, 0, 0, data[3], 0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                                barBorderRadius: 6
                            },
                        },
                        z: 2
                    },
                    // 告警机房数比例
                    {
                        name: xAxisData[4],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[4]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0, 0, 0, 0, data[4]],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                                barBorderRadius: 6
                            },
                        },
                        z: 2
                    },
                    // 外框
                    {
                        name: '外框',
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        barGap: '-1',
                        data: maxYAxis,//[1800,1800, 1800,1800,1800],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: 'rgba(255, 255, 255, 0.15)',
                                barBorderRadius: 6,
                            }
                        },
                        z: 0
                    },
                    // 低告警数量
                    {
                        name: xAxisData[0],
                        type: 'pictorialBar',
                        // symbol: '../../assets/logo copy.png',
                        symbolSize: [30, -30],
                        yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: data[0],
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警总数
                    {
                        name: xAxisData[1],
                        type: 'pictorialBar',
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30, -30],
                        yAxisIndex: self.getArrValue(xAxisData[1]),
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: data[1],
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警总数比例
                    {
                        name: xAxisData[2],
                        type: 'pictorialBar',
                        yAxisIndex: self.getArrValue(xAxisData[2]),
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30, -30],
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: data[2],
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警机房总数
                    {
                        name: xAxisData[3],
                        type: 'pictorialBar',
                        yAxisIndex: self.getArrValue(xAxisData[3]),
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30, -30],
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: data[3],
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }]
                    },
                    // 告警机房数比例
                    {
                        name: xAxisData[4],
                        yAxisIndex: self.getArrValue(xAxisData[4]),
                        type: 'pictorialBar',
                        // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [30, -30],
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
                        ].map((color, offset) => ({
                            color,
                            offset
                        }))),
                        z: 12,
                        data: [{
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: 0,
                            symbolPosition: 'end'
                        }, {
                            value: data[4],
                            symbolPosition: 'end'
                        }]
                    },


                ]
            };
            this.setOption(option);
        },
        resize() {
            let self = this;
            setTimeout(function () {
                self.$options.discharge.resize();
                self.setData(self.$options.chartData);
            })
        }
    },
    mounted() {
        //   获取userId
        this.userId = localStorage.getItem("userId");
        // 基于准备好的dom，初始化echarts实例
        this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);

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

<style scoped>

</style>

 src/components/charts/histogramAlternating.vue

@@ -1,354 +1,366 @@
<template>
  <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating">
    <div class="echarts-content" ref="alternating">
    <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating" @click="toParentPage">
        <div class="echarts-content" ref="alternating">

    </div>
    <div class="titleShow">
        <span><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
        <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">{{ gjjfsbl }}</span></span>
    </div>
  </div>
        </div>
        <div class="titleShow">
            <span><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
            <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">{{ gjjfsbl }}</span></span>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// 交流ABC 页面
export default {
  name: "histogramAlternating",
  chart: "",
  chartData:{},
  props: {
    id: {
      require: true,
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: ""
    },
    top: {
      type: Number,
      default: 15,
    },
    bottom: {
      type: Number,
      default: 60
    },
    space: {
      type: Number,
      default: 4
    },
  },
  data() {
    return {
        gjjfzs:0,
        gjjfsbl:0,
        userId:""
    }
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
        let self = this;
        if(data){
           self.$options.chartData = data;
           self.gjjfzs = data.gjjfzs;
           self.gjjfsbl = data.gjjfsbl;
           self.optionSet(self.$options.chartData);
        }else{
            self.$axios({
                method:"get",
                url:"/powerAlarm/acABC",
                params:{
                    userId:self.userId
                }
            }).then(res=>{
                if(res.data.code == 1){
                    let result = res.data.data[0];
                    let zsObj = res.data.data[1];
                    let dataList = [];
                    let dataName = [];
                        for (const key in result) {
                            dataName.push(key);
                            dataList.push(result[key]);
                        }
                        self.$options.chartData.dataList = dataList;
                        self.$options.chartData.dataName = dataName;
                        self.$options.chartData.gjjfzs = zsObj.告警机房总数;
                        self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                    console.log(res)
                }
            })
        }
    },
    optionSet(data){
            const CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function(ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint
                    const c0 = [shape.x - 10, shape.y]
                    const c1 = [shape.x + 10, shape.y]
                    const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
                    const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
                    ctx.stroke();
                }
            })
            const CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function(ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint
                    const c1 = [shape.x + 11, shape.y]
                    const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
                    const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
                    const c4 = [shape.x + 8 + 8, shape.y - 10]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                    ctx.stroke();
                }
            })
            const CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function(ctx, shape) {
                    const c1 = [shape.x - 10, shape.y - 1]
                    const c2 = [shape.x + 10, shape.y - 1]
                    const c3 = [shape.x + 15, shape.y - 9]
                    const c4 = [shape.x - 5, shape.y - 9]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    ctx.stroke();
                }
            })
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)
    name: "histogramAlternating",
    chart: "",
    chartData: {},
    props: {
        id: {
            require: true,
            type: String,
            default: "",
        },
        name: {
            type: String,
            default: ""
        },
        top: {
            type: Number,
            default: 15,
        },
        bottom: {
            type: Number,
            default: 60
        },
        space: {
            type: Number,
            default: 4
        },
    },
    data() {
        return {
            gjjfzs: 0,
            gjjfsbl: 0,
            userId: ""
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(data) {
            let self = this;
            if (data) {
                self.$options.chartData = data;
                self.gjjfzs = data.gjjfzs;
                self.gjjfsbl = data.gjjfsbl;
                self.optionSet(self.$options.chartData);
            } else {
                self.$axios({
                    method: "get",
                    url: "/powerAlarm/acABC",
                    params: {
                        userId: self.userId
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data[0];
                        let zsObj = res.data.data[1];
                        let dataList = [];
                        let dataName = [];
                        for (const key in result) {
                            dataName.push(key);
                            dataList.push(result[key]);
                        }
                        self.$options.chartData.dataList = dataList;
                        self.$options.chartData.dataName = dataName;
                        self.$options.chartData.gjjfzs = zsObj.告警机房总数;
                        self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                        console.log(res)
                    }
                })
            }
        },
        optionSet(data) {
            const CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint
                    const c0 = [shape.x - 10, shape.y]
                    const c1 = [shape.x + 10, shape.y]
                    const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
                    const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
                    ctx.stroke();
                }
            })
            const CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint
                    const c1 = [shape.x + 11, shape.y]
                    const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
                    const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
                    const c4 = [shape.x + 8 + 8, shape.y - 10]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                    ctx.stroke();
                }
            })
            const CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x - 10, shape.y - 1]
                    const c2 = [shape.x + 10, shape.y - 1]
                    const c3 = [shape.x + 15, shape.y - 9]
                    const c4 = [shape.x - 5, shape.y - 9]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    ctx.stroke();
                }
            })
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)


        let option = {
                // backgroundColor: "rgba(72, 84, 96,1.0)",
                xAxis: {
                    type: 'category',
                    data: data.dataName,
                    show: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    offset: 0,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    show: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12
                    },
                },
                series: [{
                        type: 'custom',
                        renderItem: (params, api) => {
                            console.log(14777, api.style().aaa)
                            const location = api.coord([api.value(0), api.value(1)])
                            return {
                                type: 'group',
                                children: [{
                                        type: 'CubeLeft',
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: "#0077EA"//api.style().fill
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#451DD3"//'rgba(210, 218, 226,1.0)'
                                                }
                                            ])
                                        }
                                    },
                                    {
                                        type: 'CubeRight',
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                                    offset: 0,
                                                    color: "#2663DA"//api.style().fill
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
                                                }
                                            ])
                                        }
                                    },
                                    {
                                        type: 'CubeTop',
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: "#00b6ee",
                                        }
                                    }
                                ]
                            }
                        },
                        data: data.dataList
                    },
                    {
                        type: 'bar',
                    name: '交流ABC',
                                tooltip: {
                                    show: true,
                                    position: 'top'
                                },
                                barWidth: 24.5,
                                markPoint: {
                                    itemStyle:{
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: "#0077EA" // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#451DD3" // 100% 处的颜色
                                        }], false),
                                        borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                                        }, {
                                            offset: 1,
                                            color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                                        }], false),
                                    },
                                    data:function(){
                                        let thisArr = data.dataList.map((item,index)=>{
                                                            let opt = {
                                                                value:item,
                                                                xAxis:index,
                                                                yAxis:item// !=0?item + 2 : item//椭圆的坐标
                                                            }
                                                            return opt;
                                                        })
                                            return thisArr;
                                    }()
                                },
                        barGap: 0,
                        itemStyle: {
                            color: 'transparent'
                        },
                        data: data.dataList
                    }
            let option = {
                // backgroundColor: "rgba(72, 84, 96,1.0)",
                xAxis: {
                    type: 'category',
                    data: data.dataName,
                    show: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    offset: 0,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    show: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12
                    },
                },
                series: [{
                    type: 'custom',
                    renderItem: (params, api) => {
                        console.log(14777, api.style().aaa)
                        const location = api.coord([api.value(0), api.value(1)])
                        return {
                            type: 'group',
                            children: [{
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#0077EA"//api.style().fill
                                    },
                                    {
                                        offset: 1,
                                        color: "#451DD3"//'rgba(210, 218, 226,1.0)'
                                    }
                                    ])
                                }
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: "#2663DA"//api.style().fill
                                    },
                                    {
                                        offset: 1,
                                        color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
                                    }
                                    ])
                                }
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: "#00b6ee",
                                }
                            }
                            ]
                        }
                    },
                    data: data.dataList
                },
                {
                    type: 'bar',
                    name: '交流ABC',
                    tooltip: {
                        show: true,
                        position: 'top'
                    },
                    barWidth: 24.5,
                    markPoint: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#0077EA" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#451DD3" // 100% 处的颜色
                            }], false),
                            borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                            }, {
                                offset: 1,
                                color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                            }], false),
                        },
                        data: function () {
                            let thisArr = data.dataList.map((item, index) => {
                                let opt = {
                                    value: item,
                                    xAxis: index,
                                    yAxis: item// !=0?item + 2 : item//椭圆的坐标
                                }
                                return opt;
                            })
                            return thisArr;
                        }()
                    },
                    barGap: 0,
                    itemStyle: {
                        color: 'transparent'
                    },
                    data: data.dataList
                }

                ]
            }
            this.setOption(option);
    },
    resize() {
        let self = this;
      setTimeout(() => {
          this.$options.chart.resize();
          this.setData(self.$options.chartData);
        }, 300)
    }
  },
  mounted() {
    //   获取userId
    this.userId = localStorage.getItem("userId");
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.alternating);
                ]
            }
            this.setOption(option);
        },
        resize() {
            let self = this;
            setTimeout(() => {
                this.$options.chart.resize();
                this.setData(self.$options.chartData);
            }, 300)
        }
    },
    mounted() {
        //   获取userId
        this.userId = localStorage.getItem("userId");
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.alternating);

    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>
    .echartsAlternating{
        position:relative;
    }
    .titleShow{
        position: absolute;
        top: 0;
        right: 0;
        text-align: right;
        padding-right: 5%;
        overflow: hidden;

    }
    .titleShow i{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgb(246,127,33);
        margin-right: 5px;
        margin-bottom: 3px;
    }
    .titleShow .textTitle{
        display: inline-block;
        /* width: 9rem; */
        text-align: right;
        font-size: 12px;
        color: rgb(0,178,224);
    }
    .titleShow .textValue{
        display: inline-block;
        width: 40px;
        /* text-align: left; */
        text-align: left;
        font-size: 12px;
        color: rgb(246,127,33);
    }
.echartsAlternating {
    position: relative;
}
.titleShow {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    padding-right: 5%;
    overflow: hidden;
}
.titleShow i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(246, 127, 33);
    margin-right: 5px;
    margin-bottom: 3px;
}
.titleShow .textTitle {
    display: inline-block;
    /* width: 9rem; */
    text-align: right;
    font-size: 12px;
    color: rgb(0, 178, 224);
}
.titleShow .textValue {
    display: inline-block;
    width: 40px;
    /* text-align: left; */
    text-align: left;
    font-size: 12px;
    color: rgb(246, 127, 33);
}
</style>

 src/components/charts/imgPieChart.vue

@@ -1,224 +1,236 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart">

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

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    rectifier
  } from '@/assets/js/api'
  const pieImg = require('../../assets/images/rectifier-img.png');
  export default {
    name: "imgPieChart",
    chart: "",
    chartData: {},
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
//引入chart字体自适应
import {
    chartFontsize
} from '@/assets/js/chartFontsize'
import {
    rectifier
} from '@/assets/js/api'
const pieImg = require('../../assets/images/rectifier-img.png');
export default {
    name: "imgPieChart",
    chart: "",
    chartData: {},
    props: {
        id: {
            require: true,
            type: String,
            default: "",
        },
    },
    data() {
        return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let imgWidth = this.$refs.chart.clientWidth * 0.14;
        let imgheight = imgWidth / 0.82;
        let centerx = this.$refs.chart.clientWidth / 2;
        let centery = this.$refs.chart.clientHeight / 2;
        let option = {
          color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
          graphic: [{
            zlevel: 5,
            type: 'image',
            left: centerx - imgWidth / 2,
            top: centery - imgheight / 2,
            bounding: 'raw',
            style: {
              image: pieImg,
              width: imgWidth,
              height: imgheight,
            }
          }],
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let imgWidth = this.$refs.chart.clientWidth * 0.14;
            let imgheight = imgWidth / 0.82;
            let centerx = this.$refs.chart.clientWidth / 2;
            let centery = this.$refs.chart.clientHeight / 2;
            let option = {
                color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
                graphic: [{
                    zlevel: 5,
                    type: 'image',
                    left: centerx - imgWidth / 2,
                    top: centery - imgheight / 2,
                    bounding: 'raw',
                    style: {
                        image: pieImg,
                        width: imgWidth,
                        height: imgheight,
                    }
                }],

          series: [{
              name: '业务警种',
              type: 'pie',
              radius: ['35%', '65%'],
              itemStyle: {
                borderColor: '#021651',
                borderWidth: 6,
              },
              labelLine: {
                length: 20,
                length2: 0,
                lineStyle: {
                  color: '#007ed3'
                }
              },
              label: {
                formatter: function (params) {
                  return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
                },
                distanceToLabelLine: 0,
                rich: {
                  yellow: {
                    color: "#f67f21",
                    fontSize: chartFontsize(20),
                    fontWeight: '600',
                    padding: [chartFontsize(4), 0, 0, 0],
                    align: 'center'
                  },
                  white: {
                    color: "#ffffff",
                    align: 'center',
                    fontSize: chartFontsize(16),
                    padding: chartFontsize(4)
                  },
                  hr: {
                    borderColor: '#007ed3',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                  }
                }
              },
              data: data.data,
              zlevel: 1
            },
            {
              name: '',
              type: 'pie',
              radius: '50%',
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: 'rgba(7,56,128,0.2)'
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '46%',
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: '#00b2e0'
              },
              zlevel: 3
            },
            {
              name: '',
              type: 'pie',
              radius: '35%',
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: '#ffffff'
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        rectifier(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              data: []
            }
            let resData = res.data.data;
            for (let key in resData) {
              let obj = {};
              obj.name = key;
              obj.value = resData[key];
              optionData.data.push(obj)
            }
            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);
                series: [{
                    name: '业务警种',
                    type: 'pie',
                    radius: ['35%', '65%'],
                    itemStyle: {
                        borderColor: '#021651',
                        borderWidth: 6,
                    },
                    labelLine: {
                        length: 20,
                        length2: 0,
                        lineStyle: {
                            color: '#007ed3'
                        }
                    },
                    label: {
                        formatter: function (params) {
                            return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
                        },
                        distanceToLabelLine: 0,
                        rich: {
                            yellow: {
                                color: "#f67f21",
                                fontSize: chartFontsize(20),
                                fontWeight: '600',
                                padding: [chartFontsize(4), 0, 0, 0],
                                align: 'center'
                            },
                            white: {
                                color: "#ffffff",
                                align: 'center',
                                fontSize: chartFontsize(16),
                                padding: chartFontsize(4)
                            },
                            hr: {
                                borderColor: '#007ed3',
                                width: '100%',
                                borderWidth: 1,
                                height: 0,
                            }
                        }
                    },
                    data: data.data,
                    zlevel: 1
                },
                {
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    emphasis: {
                        scale: false
                    },
                    data: [{
                        value: 20,
                        name: ''
                    }],
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: 'rgba(7,56,128,0.2)'
                    },
                    zlevel: 2
                },
                {
                    name: '',
                    type: 'pie',
                    radius: '46%',
                    emphasis: {
                        scale: false
                    },
                    data: [{
                        value: 20,
                        name: ''
                    }],
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: '#00b2e0'
                    },
                    zlevel: 3
                },
                {
                    name: '',
                    type: 'pie',
                    radius: '35%',
                    emphasis: {
                        scale: false
                    },
                    data: [{
                        value: 20,
                        name: ''
                    }],
                    label: {
                        show: false
                    },
                    itemStyle: {
                        color: '#ffffff'
                    },
                    zlevel: 4
                },
                ]
            };
            // 设置配置项
            this.setOption(option);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            rectifier(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = {
                        data: []
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        let obj = {};
                        obj.name = key;
                        obj.value = resData[key];
                        optionData.data.push(obj)
                    }
                    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() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>

</style>

 src/components/charts/latticeBar.vue

@@ -1,246 +1,258 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart">

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

<script>
  import * as echarts from 'echarts';
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    chargeAnalysis
  } from '@/assets/js/api'
  export default {
    name: "latticeBar",
    chart: "",
    chartData: {},
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
import {
    chartFontsize
} from '@/assets/js/chartFontsize'
import {
    chargeAnalysis
} from '@/assets/js/api'
export default {
    name: "latticeBar",
    chart: "",
    chartData: {},
    props: {
        id: {
            require: true,
            type: String,
            default: "",
        },
    },
    data() {
        return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel + '<br />';
              item.map(jtem => {
                if (jtem.seriesName !== 'bg') {
                  str += jtem.seriesName + ': ' + jtem.data + '<br />'
                }
              });
              return str
            }
          },
          legend: {
            top: '2%',
            itemWidth: chartFontsize(18),
            itemHeight: chartFontsize(12),
            textStyle: {
              color: '#ffffff',
              fontSize: chartFontsize(14),
            },
            data: ['访问量', '订单量']
          },
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14),
              interval: 0
            }
          }],
          yAxis: [{
            max: 200,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14),
            },
          }],
          series: []
        };
        let max;
        data.series.map(item => {
          max = item.data[0];
          item.data.map(jtem => {
            if (jtem > max) {
              max = jtem;
            }
          })
        });
        option.yAxis[0].max = max;
        option.xAxis[0].data = data.xData;
        let legendData = [];
        data.series.map(item => {
          legendData.push(item.name);
        })
        option.legend.data = legendData;
        for (let i = 0; i < data.series.length; i++) {
          let maxArr = [];
          data.series[i].data.map(() => {
            maxArr.push(max)
          })
          let plusMinus = (i % 2);
          let offset;
          if (plusMinus == 0) {
            offset = '-65%'
          } else if (plusMinus == 1) {
            offset = '65%'
          }
          option.series.push({
            name: data.series[i].name,
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: data.series[i].color
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -20,
            data: data.series[i].data,
          });
          option.series.push({
            name: 'bg',
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: '#052b6c'
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -30,
            data: maxArr
          });
        }
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        chargeAnalysis(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              xData: [],
              series: [{
                name: '放电',
                data: [],
                color: '#90ec7d'
              }, {
                name: '充电',
                data: [],
                color: '#ff6b6b'
              }]
            }
            let resData = res.data.data;
            for (let key in resData.reCharge) {
              if (typeof resData.reCharge[key] == 'string') {
                optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
              } else {
                optionData.series[0].data.push(resData.reCharge[key])
              }
            }
            for (let key in resData.disCharge) {
              optionData.xData.push(key)
              if (typeof resData.disCharge[key] == 'string') {
                optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
              } else {
                optionData.series[1].data.push(resData.disCharge[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);
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (item) {
                        let str = item[0].axisValueLabel + '<br />';
                        item.map(jtem => {
                            if (jtem.seriesName !== 'bg') {
                                str += jtem.seriesName + ': ' + jtem.data + '<br />'
                            }
                        });
                        return str
                    }
                },
                legend: {
                    top: '2%',
                    itemWidth: chartFontsize(18),
                    itemHeight: chartFontsize(12),
                    textStyle: {
                        color: '#ffffff',
                        fontSize: chartFontsize(14),
                    },
                    data: ['访问量', '订单量']
                },
                grid: {
                    top: 40,
                    right: 20,
                    left: 50,
                    bottom: 30
                },
                xAxis: [{
                    type: 'category',
                    data: [],
                    axisLine: {
                        lineStyle: {
                            color: '#007ed3'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        fontSize: chartFontsize(14),
                        interval: 0
                    }
                }],
                yAxis: [{
                    max: 200,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#007ed3'
                        }
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        fontSize: chartFontsize(14),
                    },
                }],
                series: []
            };
            let max;
            data.series.map(item => {
                max = item.data[0];
                item.data.map(jtem => {
                    if (jtem > max) {
                        max = jtem;
                    }
                })
            });
            option.yAxis[0].max = max;
            option.xAxis[0].data = data.xData;
            let legendData = [];
            data.series.map(item => {
                legendData.push(item.name);
            })
            option.legend.data = legendData;
            for (let i = 0; i < data.series.length; i++) {
                let maxArr = [];
                data.series[i].data.map(() => {
                    maxArr.push(max)
                })
                let plusMinus = (i % 2);
                let offset;
                if (plusMinus == 0) {
                    offset = '-65%'
                } else if (plusMinus == 1) {
                    offset = '65%'
                }
                option.series.push({
                    name: data.series[i].name,
                    type: 'pictorialBar',
                    symbol: 'roundRect',
                    itemStyle: {
                        color: data.series[i].color
                    },
                    symbolRepeat: true,
                    symbolSize: ["16%", "4%"],
                    symbolMargin: 2,
                    symbolPosition: 'start',
                    symbolOffset: [offset, 0],
                    z: -20,
                    data: data.series[i].data,
                });
                option.series.push({
                    name: 'bg',
                    type: 'pictorialBar',
                    symbol: 'roundRect',
                    itemStyle: {
                        color: '#052b6c'
                    },
                    symbolRepeat: true,
                    symbolSize: ["16%", "4%"],
                    symbolMargin: 2,
                    symbolPosition: 'start',
                    symbolOffset: [offset, 0],
                    z: -30,
                    data: maxArr
                });
            }
            // 设置配置项
            this.setOption(option);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            chargeAnalysis(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = {
                        xData: [],
                        series: [{
                            name: '放电',
                            data: [],
                            color: '#90ec7d'
                        }, {
                            name: '充电',
                            data: [],
                            color: '#ff6b6b'
                        }]
                    }
                    let resData = res.data.data;
                    for (let key in resData.reCharge) {
                        if (typeof resData.reCharge[key] == 'string') {
                            optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
                        } else {
                            optionData.series[0].data.push(resData.reCharge[key])
                        }
                    }
                    for (let key in resData.disCharge) {
                        optionData.xData.push(key)
                        if (typeof resData.disCharge[key] == 'string') {
                            optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
                        } else {
                            optionData.series[1].data.push(resData.disCharge[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() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>

</style>

 src/components/charts/monomerVoltage.vue

@@ -1,209 +1,221 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="monomerVoltage">
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="monomerVoltage">

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

<script>
import * as echarts from 'echarts';
// 单体电压、内阻和温度 页面
export default {
  name: "monomerVoltage",
  chart: "",
  chartData: {},
  props: {
    id: {
      require: true,
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: ""
    },
    top: {
      type: Number,
      default: 15,
    },
    bottom: {
      type: Number,
      default: 60
    },
    space: {
      type: Number,
      default: 4
    },
  },
  data() {
    return {
      userId:""
    }
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(dataList) {
        let self = this;
        let legendData = [];
        let yAxisData = [];
        let data = [];
            // 存值
            self.$options.chartData = dataList;
            if(!dataList){
              self.$axios({
                method:"get",
                url:"/batteryAlarm/monVRTAnalysis",
                params:{
                  userId:self.userId
                }
              }).then(res=>{
                if(res.data.code == 1){
                  let result = res.data.data;
                  let index = 0;
                      for (const key in result) {
                        let obj = {
                              name: key,
                              type: 'bar',
                              data:[]
                            }
                            legendData.push(key);
                        for (const item in result[key]) {
                          if(index === 0){
                            yAxisData.push(item);
                          }
                          obj.data.push(result[key][item])
                        }
                        data.push(obj);
                        index++;
                      }
                      self.optionSet(legendData,yAxisData,data);
                }
              })
            }else{
              self.optionSet(dataList.legendData,dataList.yAxisData,dataList.data);
            }
    },
    optionSet(legendData,yAxisData,data){
      let option = {
                // title: {
                //     text: '世界人口总量',
                //     subtext: '数据来自网络'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    right:"4%",
                    data: legendData,//['单体电压', '单体内阻','单体温度'],
                    itemStyle:{
                        right:"0",
                    },
                    textStyle:{
                      color:"#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    //分格线
                    splitLine: {
                        show:true,
                        lineStyle: {
                            color: '#254389'
                        }
                    },
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    //坐标轴
                    axisLine: {
                        lineStyle:{
                          color:"#254389"
                        }
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    
                    
                    data: yAxisData,//['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例']
                },
                series: data
                // [
                //     {
                //         name: '单体电压',
                //         type: 'bar',
                //         data: [24, 18, 38, 31, 24, 13],
                //         itemStyle:{
                //             color:'#FED601'
                //         }
                //     },
                //     {
                //         name: '单体内阻',
                //         type: 'bar',
                //         data: [19, 28, 46, 24, 14, 9],
                //         itemStyle:{
                //             color:'#67E0E3'
                //         }
                //     },
                //     {
                //         name: '单体温度',
                //         type: 'bar',
                //         data: [15, 22, 36, 15, 21, 8],
                //         itemStyle:{
                //             color:'#EB6F49'
                //         }
                //     }
                // ]
            };
            this.setOption(option);
    },
    resize() {
      let self = this;
      setTimeout(function(){
        self.$options.chart.resize();
        self.setData(self.$options.chartData);
      },300)
      
    }
  },
  mounted() {
    //   获取userId
    this.userId = localStorage.getItem("userId");
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.monomerVoltage);
    name: "monomerVoltage",
    chart: "",
    chartData: {},
    props: {
        id: {
            require: true,
            type: String,
            default: "",
        },
        name: {
            type: String,
            default: ""
        },
        top: {
            type: Number,
            default: 15,
        },
        bottom: {
            type: Number,
            default: 60
        },
        space: {
            type: Number,
            default: 4
        },
    },
    data() {
        return {
            userId: ""
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(dataList) {
            let self = this;
            let legendData = [];
            let yAxisData = [];
            let data = [];
            // 存值
            self.$options.chartData = dataList;
            if (!dataList) {
                self.$axios({
                    method: "get",
                    url: "/batteryAlarm/monVRTAnalysis",
                    params: {
                        userId: self.userId
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data;
                        let index = 0;
                        for (const key in result) {
                            let obj = {
                                name: key,
                                type: 'bar',
                                data: []
                            }
                            legendData.push(key);
                            for (const item in result[key]) {
                                if (index === 0) {
                                    yAxisData.push(item);
                                }
                                obj.data.push(result[key][item])
                            }
                            data.push(obj);
                            index++;
                        }
                        self.optionSet(legendData, yAxisData, data);
                    }
                })
            } else {
                self.optionSet(dataList.legendData, dataList.yAxisData, dataList.data);
            }
        },
        optionSet(legendData, yAxisData, data) {
            let option = {
                // title: {
                //     text: '世界人口总量',
                //     subtext: '数据来自网络'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    right: "4%",
                    data: legendData,//['单体电压', '单体内阻','单体温度'],
                    itemStyle: {
                        right: "0",
                    },
                    textStyle: {
                        color: "#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    //分格线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#254389'
                        }
                    },
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    //坐标轴
                    axisLine: {
                        lineStyle: {
                            color: "#254389"
                        }
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },

    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }

                    data: yAxisData,//['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例']
                },
                series: data
                // [
                //     {
                //         name: '单体电压',
                //         type: 'bar',
                //         data: [24, 18, 38, 31, 24, 13],
                //         itemStyle:{
                //             color:'#FED601'
                //         }
                //     },
                //     {
                //         name: '单体内阻',
                //         type: 'bar',
                //         data: [19, 28, 46, 24, 14, 9],
                //         itemStyle:{
                //             color:'#67E0E3'
                //         }
                //     },
                //     {
                //         name: '单体温度',
                //         type: 'bar',
                //         data: [15, 22, 36, 15, 21, 8],
                //         itemStyle:{
                //             color:'#EB6F49'
                //         }
                //     }
                // ]
            };
            this.setOption(option);
        },
        resize() {
            let self = this;
            setTimeout(function () {
                self.$options.chart.resize();
                self.setData(self.$options.chartData);
            }, 300)

        }
    },
    mounted() {
        //   获取userId
        this.userId = localStorage.getItem("userId");
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.monomerVoltage);

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

<style scoped>

</style>

 src/components/charts/powerChart.vue

@@ -1,142 +1,155 @@
<template>
  <div class="chartCon">
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart5" ref="prossPieChart5"></pross-pie-chart>
    </div>
  </div>
    <div class="chartCon" @click="toParentPage">
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
        </div>
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
        </div>
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
        </div>
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
        </div>
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
        </div>
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart5" ref="prossPieChart5"></pross-pie-chart>
        </div>
    </div>
</template>

<script>
  import prossPieChart from "./prossPieChart"
  import {
    powerAlarmStatus
  } from '@/assets/js/api'
  export default {
    components: {
      prossPieChart
    },
    data() {
      return {}
    },
    mounted() {
import prossPieChart from "./prossPieChart"
import {
    powerAlarmStatus
} from '@/assets/js/api'
export default {
    components: {
        prossPieChart
    },
    data() {
        return {}
    },
    mounted() {

    },
    methods: {
      setData(data) {
        this.$nextTick(() => {
          if (data) {
            data.map((item, i) => {
              let chart = this.$refs[`prossPieChart${i}`];
              chart.setData(item);
              chart.resize();
            })
          } else {
            this.postData()
            setInterval(() => {
              this.postData()
            }, 3000)
          }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
        setData(data) {
            this.$nextTick(() => {
                if (data) {
                    data.map((item, i) => {
                        let chart = this.$refs[`prossPieChart${i}`];
                        chart.setData(item);
                        chart.resize();
                    })
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }

        })
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        powerAlarmStatus(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = [{
              title: '',
              data: 0,
              unit: '',
              color: '#37a9b3',
            }, {
              title: '',
              data: 0,
              unit: '',
              color: '#f3535f'
            }, {
              title: '',
              data: 0,
              unit: '',
              color: '#ff8b00'
            }, {
              title: '',
              data: 0,
              unit: '',
              color: '#757ffb'
            }, {
              title: '',
              data: 0,
              unit: '',
              color: '#4ba0d9'
            }, {
              title: '',
              data: 0,
              unit: '',
              color: '#7fc57c'
            }]
            let index = 0;
            let resData = res.data.data;
            for (let key in resData) {
              optionData[index].title = key;
              if (typeof resData[key] == 'string') {
                optionData[index].data = Number(resData[key].split('%')[0]);
                optionData[index].unit = '%';
              } else {
                optionData[index].data = resData[key];
              }
              index++;
            }
            optionData.map((item, i) => {
              let chart = this.$refs[`prossPieChart${i}`];
              chart.setData(item);
              chart.resize();
            })
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        this.$refs.prossPieChart0.resize();
        this.$refs.prossPieChart1.resize();
        this.$refs.prossPieChart2.resize();
        this.$refs.prossPieChart3.resize();
        this.$refs.prossPieChart4.resize();
        this.$refs.prossPieChart5.resize();
      }
    }
  }
            })
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            powerAlarmStatus(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = [{
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#37a9b3',
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#f3535f'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#ff8b00'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#757ffb'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#4ba0d9'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#7fc57c'
                    }]
                    let index = 0;
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData[index].title = key;
                        if (typeof resData[key] == 'string') {
                            optionData[index].data = Number(resData[key].split('%')[0]);
                            optionData[index].unit = '%';
                        } else {
                            optionData[index].data = resData[key];
                        }
                        index++;
                    }
                    optionData.map((item, i) => {
                        let chart = this.$refs[`prossPieChart${i}`];
                        chart.setData(item);
                        chart.resize();
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            this.$refs.prossPieChart0.resize();
            this.$refs.prossPieChart1.resize();
            this.$refs.prossPieChart2.resize();
            this.$refs.prossPieChart3.resize();
            this.$refs.prossPieChart4.resize();
            this.$refs.prossPieChart5.resize();
        }
    }
}
</script>

<style scoped>
  .chartCon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
.chartCon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

  .chartCon .chartItem {
    width: 50%;
    height: 31.333%;
    float: left;
    margin-bottom: 2%;
  }
.chartCon .chartItem {
    width: 50%;
    height: 31.333%;
    float: left;
    margin-bottom: 2%;
}
</style>

 src/components/charts/triangleBarChart.vue

@@ -1,227 +1,239 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart">

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

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

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let inData = []
        data.data.map(item => {
          if (item > 10) {
            inData.push(item - 10);
          } else {
            inData.push(item);
          }
        })
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel;
              item.map(jtem => {
                if (jtem.seriesName == 'outData') {
                  str += ':' + jtem.data
                }
              });
              return str
            }
          },
          grid: {
            top: 20,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: data.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14),
              interval: 0
            }
          }, {
            show: false,
            type: 'category',
            data: data.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14),
              interval: 0
            }
          }],
          yAxis: [{
            splitLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#022664'
              }
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(14)
            },
          }],
          series: [{
            name: 'outData',
            type: 'pictorialBar',
            xAxisIndex: 0,
            data: data.data,
            barCategoryGap: "0%",
            barWidth: '50%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 2,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "#65B3AD"
                },
                {
                  offset: 1,
                  color: "#9EFFDA"
                }
              ]),
              opacity: 0.48
            },
          }, {
            name: 'inData',
            type: 'pictorialBar',
            xAxisIndex: 1,
            data: inData,
            barCategoryGap: "0%",
            barWidth: '30%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "#65B3AD"
                },
                {
                  offset: 1,
                  color: "#9EFFDA"
                }
              ]),
              opacity: 1
            },
          }]
        };
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        batteryGroup(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              xData: [],
              data: []
            }
            let resData = res.data.data;
            for (let key in resData) {
              optionData.xData.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);
        }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let inData = []
            data.data.map(item => {
                if (item > 10) {
                    inData.push(item - 10);
                } else {
                    inData.push(item);
                }
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (item) {
                        let str = item[0].axisValueLabel;
                        item.map(jtem => {
                            if (jtem.seriesName == 'outData') {
                                str += ':' + jtem.data
                            }
                        });
                        return str
                    }
                },
                grid: {
                    top: 20,
                    right: 20,
                    left: 50,
                    bottom: 30
                },
                xAxis: [{
                    type: 'category',
                    data: data.xData,
                    axisLine: {
                        lineStyle: {
                            color: '#022664'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        fontSize: chartFontsize(14),
                        interval: 0
                    }
                }, {
                    show: false,
                    type: 'category',
                    data: data.xData,
                    axisLine: {
                        lineStyle: {
                            color: '#022664'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        fontSize: chartFontsize(14),
                        interval: 0
                    }
                }],
                yAxis: [{
                    splitLine: {
                        lineStyle: {
                            color: '#022664'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#022664'
                        }
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        fontSize: chartFontsize(14)
                    },
                }],
                series: [{
                    name: 'outData',
                    type: 'pictorialBar',
                    xAxisIndex: 0,
                    data: data.data,
                    barCategoryGap: "0%",
                    barWidth: '50%',
                    symbol: 'path://d="M150 50 L130 130 L170 130  Z',
                    zlevel: 2,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                            offset: 0,
                            color: "#65B3AD"
                        },
                        {
                            offset: 1,
                            color: "#9EFFDA"
                        }
                        ]),
                        opacity: 0.48
                    },
                }, {
                    name: 'inData',
                    type: 'pictorialBar',
                    xAxisIndex: 1,
                    data: inData,
                    barCategoryGap: "0%",
                    barWidth: '30%',
                    symbol: 'path://d="M150 50 L130 130 L170 130  Z',
                    zlevel: 1,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                            offset: 0,
                            color: "#65B3AD"
                        },
                        {
                            offset: 1,
                            color: "#9EFFDA"
                        }
                        ]),
                        opacity: 1
                    },
                }]
            };
            // 设置配置项
            this.setOption(option);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryGroup(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = {
                        xData: [],
                        data: []
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.xData.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() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>

</style>

 src/components/indexPanel/AddPanel.vue

New file
@@ -0,0 +1,159 @@
<template>
    <div class="params-container">
        <el-form
        ref="ruleForm"
        size="mini"
        label-position="top"
        :model="params"
        :rules="rules"
        class="params-dialog bg-white">
            <el-form-item label="机房名称" prop="StationName">
                <el-select
                v-model="homeName"
                placeholder="请选择"
                @change="change"
                filterable>
                    <el-option
                        v-for="item in homeList" :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="Address">
                <el-input
                    type="textarea"
                    :rows="3"
                    resize="none"
                    placeholder="请输入详细地址"
                    v-model="params.Address">
                    </el-input>
            </el-form-item>
            <div class="table-layout">
                <div class="table-row">
                    <div class="table-cell">
                        经度：{{point.lng}}
                    </div>
                    <div class="table-cell">
                        纬度：{{point.lat}}
                    </div>
                </div>
            </div>
            <div class="form-footer">
                <three-btn @click="validData">确定</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
import {
    addMapStation
} from "@/assets/js/api"

export default {
    name: "AddPanel",
    data() {
        return {
            homeName: "",
            homeList: [],
            point: {
                lng: 0,
                lat: 0,
            },
            params: {
                StationName1: '',        // 省
                StationName2: '',        // 市
                StationName5: '',        // 区县
                StationName3: '',        // 站点名称
                StationName: '',        // 站点全称
                Address:'',                //机房物理信息
                longitude:'',                // 经度
                latitude:'',                // 纬度
                information:"",                //备注
            },
            rules: {
                StationName:[
                    {required: true, message: '请选择要添加的机房', trigger: 'change'},
                ],
                Address: [
                    {required: true, message: '详细地址不能为空', trigger: 'change'},
                ]
            }
        }
    },
    methods: {
        // 根据选择的机房更新详细地址的省-市-区县
        change(value) {
            let infos = value.split('-');
            // 解析的长度大于2
            if(infos.length>3) {
                this.params.StationName1 = infos[0];    // 省
                this.params.StationName2 = infos[1];    // 市
                this.params.StationName5 = infos[2];    // 区县
                this.params.StationName3 = infos[3];    // 机房名称
                this.params.StationName = value;        // 机房全称
                this.params.Address = infos[0]+'-'+infos[1]+'-'+infos[2]+'-';       // 省-市-区县-
            }
        },
        init() {
            this.homeName = "";     //  初始化下拉框
            this.params.StationName1 = "";    // 省
            this.params.StationName2 = "";    // 市
            this.params.StationName5 = "";    // 区县
            this.params.StationName3 = "";    // 机房名称
            this.params.StationName = "";        // 机房全称
            this.params.Address = "";       // 地址
        },
        validData() {
            this.$refs.ruleForm.validate((valid) => {
                // 校验通过
                if (valid) {
                    // 设置经纬度
                    this.params.longitude = this.point.lng;
                    this.params.latitude = this.point.lat;
                    this.$layer.confirm('确认添加机房到该位置', {icon: 3, title: '系统提示'}, (index)=>{
                        // 关闭弹出框
                        this.$layer.close(index);
                        // 添加机房到地图
                        this.addHome();
                    });

                }else {
                    this.$layer.msg('存在校验未通过的数据！');
                    return false;
                }
            });
        },
        addHome() {
            // 请求后台添加机房到地图
            addMapStation(this.params).then(res=>{
                let rs = JSON.parse(res.data.result);
                if(rs.code === 1) {
                    this.init();        // 初始化面板
                    this.$layer.msg('添加成功！');
                    this.$emit('handleEvent', 1);
                }else {
                    this.$layer.msg('添加失败！');
                    this.$emit('handleEvent', 0);
                }
            }).catch(error=>{
                console.log(error);
            });
        },
    }
}
</script>

<style scoped>
.params-container {
    width: 320px;
    background-color: #ffffff;
}
.table-layout {
    margin-top: 16px;
}
.bg-white .table-cell {
    color: #000000;
}
</style>

 src/components/indexPanel/InfoPanel.vue

New file
@@ -0,0 +1,165 @@
<template>
    <div class="map-panel-content">
        <div class="content-item content-item-nowrap">
            蓄电池组告警数目：{{info.nums.code}}
            <a class="content-detail" href="javascript:;" @click="goBattWarn">详情>></a>
        </div>
        <div class="content-item content-item-nowrap">
            蓄电池组落后数目：{{info.nums.sum}}
            <a class="content-detail" href="javascript:;" @click="goBehind">详情>></a>
        </div>
        <div class="content-item content-item-nowrap">
            蓄电池组延时数目：{{info.nums.newsum}}
            <a class="content-detail" href="javascript:;" @click="goTimeout">详情>></a>
        </div>
        <div class="content-item">
            <el-button type="primary" size="mini" @click="goRealTime">实时数据</el-button>
            <el-button type="primary" size="mini" @click="goHistory">历史数据</el-button>
            <el-button v-if="isCanDel" type="danger" size="mini" @click="delHome">移除机房</el-button>
        </div>
        <div class="content-item">地址：{{info.Address}}</div>
    </div>
</template>

<script>
import {
    delMapHome
} from "@/assets/js/api";

export default {
    props: ['infos'],
    data() {
        return {
            isCanDel: false,
            username: sessionStorage.getItem('username'),
            info: {
                num: 369,
                StationId: "42070471",
                StationName: "贵州省-贵阳市-观山湖区-观山湖区护理学院-设备1",
                StationName3: "观山湖区护理学院",
                Address: "湖北省武汉市武昌区",
                longitude: 114.37285909,
                latitude: 30.56442241,
                information: "",
                FBSDeviceId: 910000111,
                nums: {
                    code: 0,
                    sum: 0,
                    newsum: 0
                }
            }
        }
    },
    mounted() {
        this.info = this.infos
    },
    methods: {
        // 跳转到历史数据
        goHistory() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "历史数据",
                        name: "history",
                        src: "#/history" + this.search,
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到实时数据
        goRealTime() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "实时监控",
                        name: "movingRingSysteRrealTime",
                        src: "#/moving-ring-system" + this.search,
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转告警界面
        goBattWarn() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池告警实时查询",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery" + this.search + '&fromType=fromIndex',
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到落后机房
        goBehind() {
            this.$layer.msg('该功能暂未开启');
        },
        // 跳转到延时
        goTimeout() {
            this.$layer.msg('该功能暂未开启');
        },
        // 移除机房
        delHome() {
            let content = "确认从地图上移除" + this.info.StationName
            this.$layer.confirm(content, {
                icon: 3
            }, index => {
                this.$layer.close(index);
                let loading = this.$layer.loading(1);
                delMapHome(this.info).then(res => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.code == 1) {
                        this.$layer.msg("删除成功");
                        // 关闭等待框
                        this.$layer.close(loading);
                        // 触发删除事件，告诉父组件
                        this.$emit('delHome');
                    } else {
                        // 关闭等待框
                        this.$layer.close(loading);
                        this.$layer.msg("删除失败")
                    }
                }).catch(error => {
                    console.log(error)
                    // 关闭等待框
                    this.$layer.close(loading);
                });
            });
        },
        setInfo(info) {
            this.info = info;
        },
    },
    computed: {
        search() {
            let list = this.info.StationName.split('-');
            return '?province=' + list[0] + '&city=' + list[1] + '&county=' + list[2] + '&home=' + list[3]
        },
    },
}
</script>

<style scoped>
.map-panel-content {
    width: 300px;
}

.content-item {
    padding: 4px;
    font-size: 12px;
}

.content-item-nowrap {
    white-space: nowrap;
}

.content-detail {
    margin-left: 8px;
}
</style>

 src/main.js

@@ -11,6 +11,10 @@
import '@/assets/js/rem.js'
import axios from './assets/js/axios'

import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';
Vue.prototype.$layer = layer(Vue);

Vue.prototype.$axios = axios;

Vue.use(ElementUI, {