新模块添加

whyczyk

2021-03-23 104e60913624bad05979d1827334b3b1694353cb

新模块添加

 src/assets/images/AcInputWarp.jpg

 src/assets/images/CustomPie.jpg

 src/assets/images/MonCap.jpg

 src/assets/images/PictorialBar.jpg

 src/assets/images/RoseChart.jpg

 src/assets/js/api.js

@@ -70,4 +70,54 @@
    url: "/powerAlarm/status",
    params: data
  })
}

/* 在线电压和组端电压
 */
export const onlinegroupVolAnalysis = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/onlinegroupVolAnalysis",
    params: data
  })
}

/* 交流输入
 */
export const powerAlarmAcInput = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/acInput",
    params: data
  })
}

/* 故障
 */
export const powerAlarmError = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/error",
    params: data
  })
}

/* BTS设备状态
 */
export const batteryAlarmBtsStatus = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/btsStatus",
    params: data
  })
}

/* 单体容量
 */
export const batteryAlarmMonCapacity = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/monCapacity",
    params: data
  })
}

 src/assets/js/charts/index.js

@@ -2,9 +2,9 @@
import huodongwei from "@/assets/js/charts/persons/huodongwei";
import wangxuan from "@/assets/js/charts/persons/wangxuan";

let modularTitle = [...zengyvkai.modularTitle,...huodongwei.modularTitle];
let modularTitle = [...zengyvkai.modularTitle, ...huodongwei.modularTitle];
let modularBg = [...zengyvkai.modularBg];
let modularData = [...zengyvkai.modularData,...wangxuan.modularData];
let modularData = [...zengyvkai.modularData, ...wangxuan.modularData, ...huodongwei.modularData];

export default {
    modularTitle,

 src/assets/js/charts/persons/huodongwei.js

@@ -1,13 +1,226 @@
let modularTitle = [
    {
        title: '蓝色头部-1',
        selected: false,
        name: 'bigscreenTitle1',
        img: require("@/assets/images/bigscreenTitle1.png")
    },
];
let modularTitle = [{
    title: '蓝色头部-1',
    selected: false,
    name: 'bigscreenTitle1',
    img: require("@/assets/images/bigscreenTitle1.png")
}, ];
let modularBg = [];
let modularData = [];
let modularData = [{
    img: require("@/assets/images/AcInputWarp.jpg"),
    chartData: {
        name: '交流输入',
        id: 21,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'AcInputWarp',
        setData: [{
            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',
        }]
    }
}, {
    img: require("@/assets/images/CustomPie.jpg"),
    chartData: {
        name: '故障',
        id: 22,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'CustomPie',
        setData: [{
                value: 400,
                name: '通讯故障',
                color: '#5062DE'
            },
            {
                value: 735,
                name: '直流总故障',
                color: '#FD5E02'
            },
            {
                value: 580,
                name: '防雷器故障',
                color: '#8C6BFA'
            },
            {
                value: 484,
                name: '开关柜故障',
                color: '#F58881'
            },
            {
                value: 300,
                name: '监控器故障',
                color: '#EDE611'
            },
            {
                value: 200,
                name: '交流总故障',
                color: '#43F9FD'
            },
        ]
    }
}, {
    img: require("@/assets/images/PictorialBar.jpg"),
    chartData: {
        name: '在线电压和组端电压',
        id: 23,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'PictorialBar',
        setData: {
            xData: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
            series: [{
                    name: "在线电压",
                    data: [{
                            name: '高告警数量',
                            value: 2
                        },
                        {
                            name: '低告警数量',
                            value: 15
                        },
                        {
                            name: '告警机房数',
                            value: 32
                        },
                        {
                            name: '告警总数比例',
                            value: 23
                        },
                        {
                            name: '告警机房总数',
                            value: 39
                        },
                    ],
                    color: '#E85D22'
                },
                {
                    name: "组端电压",
                    data: [{
                            name: '高告警数量',
                            value: 22
                        },
                        {
                            name: '低告警数量',
                            value: 25
                        },
                        {
                            name: '告警机房数',
                            value: 35
                        },
                        {
                            name: '告警总数比例',
                            value: 18
                        },
                        {
                            name: '告警机房总数',
                            value: 55
                        },
                    ],
                    color: '#2EEA9D'
                }
            ]
        }
    }
}, {
    img: require("@/assets/images/RoseChart.jpg"),
    chartData: {
        name: 'BTS设备状态',
        id: 24,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'RoseChart',
        setData: [{
                value: 6,
                name: '在线浮充数量',
                color: '#E85D22'
            },
            {
                value: 7,
                name: '充电数量',
                color: '#76CFDD'
            },
            {
                value: 10,
                name: '内阻测试数量',
                color: '#FEDB5B'
            },
            {
                value: 8,
                name: '故障数量',
                color: '#8278E9'
            },
            {
                value: 4,
                name: '核容数量',
                color: '#9EE6B8'
            },
        ]
    }
}, {
    img: require("@/assets/images/MonCap.jpg"),
    chartData: {
        name: '单体容量',
        id: 25,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'MonCap',
        setData: {
            circle: [{
                    name: '告警数',
                    value: 380,
                    color: '#00DFFC',
                },
                {
                    name: '告警占比',
                    value: 180,
                    color: '#FF8B34',
                },
                {
                    name: '告警总数',
                    value: 180,
                    color: '#ED4882',
                },
                {
                    name: '告警机房数',
                    value: 280,
                    color: '#2EEA9D',
                },
                {
                    name: '告警机房占比',
                    value: 70,
                    color: '#F3E501',
                }
            ]
        }
    }
}, ];

export default {
    modularTitle,

 src/components/charts/AcInput.vue

@@ -4,51 +4,46 @@
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                熔丝告警
                {{title}}
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
    import * as echarts from "echarts";

export default {
    name: "AcInput",
    chart: "",
    chartData: "",
    props: {
        acColor: {
            type:String,
            default: "#813a74"
    export default {
        name: "AcInput",
        chart: "",
        chartData: "",
        data() {
            return {
                acColor: '#813a74',
                resColor: '#ff649d',
                title: ''
            }
        },
        resColor: {
            type:String,
            default: "#ff649d"
        },
    },
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(value) {
            let acColor = this.acColor;
            let resColor = this.resColor;
            let option = {
                title: {
                    text: value+'%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 40,
                    }
                },
                series: [
                    {
        methods: {
            setOption(opt) {
                this.$options.chart.setOption(opt);
            },
            setData(sendData) {
                this.$options.chartData = sendData;
                this.acColor = sendData.acColor;
                this.resColor = sendData.resColor;
                this.title = sendData.title;
                let option = {
                    title: {
                        text: sendData.data + '%',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: "#fff",
                            fontSize: 40,
                        }
                    },
                    series: [{
                        name: "",
                        type: 'gauge',
                        radius: '90%',
@@ -68,10 +63,10 @@
                                width: 40,
                                color: [
                                    [
                                        value / 100, acColor
                                        sendData.data / 100, this.acColor
                                    ],
                                    [
                                        1, resColor
                                        1, this.resColor
                                    ]
                                ]
                            }
@@ -94,53 +89,56 @@
                            }
                        },
                        data: [{
                            value: value,
                            value: sendData,
                            name: '年售电量情况'
                        }]
                    }]
                };

                // 设置配置项
                this.setOption(option);
            },
            resize() {
                setTimeout(() => {
                    this.$options.chart.resize();
                    if (JSON.stringify(this.$options.chartData) != '{}') {
                        this.setData(this.$options.chartData);
                    }
                ]
            };

            // 设置配置项
            this.setOption(option);
                }, 300)
            }
        },
        resize() {
            this.setData(this.$options.chartData);
            this.$options.chart.resize();
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        let value = 10;
        this.setData(value);
        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>
.echarts-text-wrapper {
    position: absolute;
    top: 56%;
    left: 22.5%;
    width: 55%;
    text-align: center;
}
.color-strip {
    height: 4px;
}
.echarts-text {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 32px;
    background-color: #083880;
    border: 1px solid #01b1e0;
    border-radius: 16px;
    .echarts-text-wrapper {
        position: absolute;
        top: 56%;
        left: 22.5%;
        width: 55%;
        text-align: center;
    }

}
    .color-strip {
        height: 4px;
    }

    .echarts-text {
        display: inline-block;
        margin-top: 8px;
        padding: 8px 20px;
        background-color: #083880;
        border: 1px solid #01b1e0;
        border-radius: 16px;
        font-size: 12px;
    }
</style>

 src/components/charts/AcInputWarp.vue

New file
@@ -0,0 +1,120 @@
<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>
</template>

<script>
  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)
          }

        })
      },
      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 .chartItem {
    width: 50%;
    height: 50%;
    float: left;
    position: relative;
  }
</style>

 src/components/charts/CircleChart.vue

@@ -5,211 +5,216 @@
</template>

<script>
import * as echarts from 'echarts';
    import * as echarts from 'echarts';

export default {
    name: "CircleChart",
    chart: "",
    props: {
        id: {
            require: true,
            type: String,
            default: "",
    export default {
        name: "CircleChart",
        chart: "",
        chartData: null,
        props: {
            id: {
                require: true,
                type: String,
                default: "",
            },
            name: {
                type: String,
                default: ""
            },
            top: {
                type: Number,
                default: 0,
            },
            bottom: {
                type: Number,
                default: 60
            },
            space: {
                type: Number,
                default: 4
            },
        },
        name: {
            type: String,
            default: ""
        },
        top: {
            type: Number,
            default: 0,
        },
        bottom: {
            type: Number,
            default: 60
        },
        space: {
            type: Number,
            default: 4
        },
    },
    data() {
        return {
            color: ['#FF8700', '#ffc300', '#00e473', '#009DFF']
        }
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(data) {
            let name = this.name;
            let top = this.top;
            let bottom = this.bottom;
            let diff = 100 - bottom - top;
            let space = this.space;
            let height = diff / data.length;


            // 数据处理
            let sum = 0;
            let color = [];
            data.forEach((v) => {
                sum = sum + v.value;
                color.push(v.color);
            });

            // 图表option整理
            let series = [];
            let lineYAxis = [];
            data.forEach((v, i) => {
                let center = top + i * height + height / 2;
                let start = 100 - center * 2 + space / 2;
                let end = start - space;

                let radius = [start + '%', end + '%'];

                series.push({
                    name: name,
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    radius: radius,
                    center: ["50%", "50%"],
                    label: {
                        show: false
                    },
                    data: [{
                        value: v.value,
                        name: v.name
                    }, {
                        value: sum - v.value,
                        name: '',
                        itemStyle: {
                            color: "rgba(0,0,0,0)"
                        }
                    }]
                });

                series.push({
                    name: '',
                    type: 'pie',
                    silent: true,
                    z: 1,
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: radius,
                    center: ["50%", "50%"],
                    label: {
                        show: false
                    },
                    data: [{
                        value: 7.5,
                        itemStyle: {
                            color: "#031D67"
                        }
                    }, {
                        value: 2.5,
                        name: '',
                        itemStyle: {
                            color: "rgba(0,0,0,0)"
                        }
                    }]
                });

                v.percent = (v.value / sum * 100).toFixed(1) + "%";
                lineYAxis.push({
                    value: i,
                    textStyle: {
                        rich: {
                            circle: {
                                color: color[i],
                                padding: [0, 2]
                            }
                        }
                    }
                });
            });

            let option = {
                color: color,
                grid: {
                    top: top + '%',
                    bottom: bottom + '%',
                    left: "50%",
                    containLabel: false
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function (params) {
                            let item = data[params];
                            return '{line|}{circle|●}{name|' + item.name + '}'
                        },
                        interval: 0,
                        inside: true,
                        textStyle: {
                            color: "#333",
                            fontSize: 14,
                            rich: {
                                name: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            }
                        },
                        show: true
                    },
                    data: lineYAxis
                }],
                xAxis: [{
                    show: false
                }],
                series: series
            };
            // 设置配置项
            this.setOption(option);
        },
        resize() {
            this.changeWrapper();
            this.$options.chart.resize();
        },
        changeWrapper() {
            let wrapper = this.$refs.wrapper;
            if (wrapper.offsetHeight > wrapper.offsetWidth) {
                wrapper.style.height = wrapper.offsetWidth + 'px';
                wrapper.style.marginTop = -wrapper.offsetWidth / 2 + 'px';
                wrapper.style.top = '50%';
            } else {
                wrapper.style.height = "100%";
                wrapper.style.marginTop = 0;
                wrapper.style.top = 0;
        data() {
            return {
                color: ['#FF8700', '#ffc300', '#00e473', '#009DFF']
            }
        }
    },
    mounted() {
        // 修改容器的大小
        this.changeWrapper();
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        },
        methods: {
            setOption(opt) {
                this.$options.chart.setOption(opt);
            },
            setData(data) {
                this.$options.chartData = data;
                let name = this.name;
                let top = this.top;
                let bottom = this.bottom;
                let diff = 100 - bottom - top;
                let space = this.space;
                let height = diff / data.length;

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

                // 数据处理
                let sum = 0;
                let color = [];
                data.forEach((v) => {
                    sum = sum + v.value;
                    color.push(v.color);
                });

                // 图表option整理
                let series = [];
                let lineYAxis = [];
                data.forEach((v, i) => {
                    let center = top + i * height + height / 2;
                    let start = 100 - center * 2 + space / 2;
                    let end = start - space;

                    let radius = [start + '%', end + '%'];

                    series.push({
                        name: name,
                        type: 'pie',
                        clockWise: false,
                        hoverAnimation: false,
                        radius: radius,
                        center: ["50%", "50%"],
                        label: {
                            show: false
                        },
                        data: [{
                            value: v.value,
                            name: v.name
                        }, {
                            value: sum - v.value,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)"
                            }
                        }]
                    });

                    series.push({
                        name: '',
                        type: 'pie',
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: radius,
                        center: ["50%", "50%"],
                        label: {
                            show: false
                        },
                        data: [{
                            value: 7.5,
                            itemStyle: {
                                color: "#031D67"
                            }
                        }, {
                            value: 2.5,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)"
                            }
                        }]
                    });

                    v.percent = (v.value / sum * 100).toFixed(1) + "%";
                    lineYAxis.push({
                        value: i,
                        textStyle: {
                            rich: {
                                circle: {
                                    color: color[i],
                                    padding: [0, 2]
                                }
                            }
                        }
                    });
                });

                let option = {
                    color: color,
                    grid: {
                        top: top + '%',
                        bottom: bottom + '%',
                        left: "50%",
                        containLabel: false
                    },
                    yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            formatter: function (params) {
                                let item = data[params];
                                return '{line|}{circle|●}{name|' + item.name + '}'
                            },
                            interval: 0,
                            inside: true,
                            textStyle: {
                                color: "#333",
                                fontSize: 14,
                                rich: {
                                    name: {
                                        color: '#fff',
                                        fontSize: 14,
                                    },
                                }
                            },
                            show: true
                        },
                        data: lineYAxis
                    }],
                    xAxis: [{
                        show: false
                    }],
                    series: series
                };
                // 设置配置项
                this.setOption(option);
            },
            resize() {
                this.changeWrapper();
                setTimeout(() => {
                    this.$options.chart.resize();
                    this.setData(this.$options.chartData);
                }, 300)
            },
            changeWrapper() {
                let wrapper = this.$refs.wrapper;
                if (wrapper.offsetHeight > wrapper.offsetWidth) {
                    wrapper.style.height = wrapper.offsetWidth + 'px';
                    wrapper.style.marginTop = -wrapper.offsetWidth / 2 + 'px';
                    wrapper.style.top = '50%';
                } else {
                    wrapper.style.height = "100%";
                    wrapper.style.marginTop = 0;
                    wrapper.style.top = 0;
                }
            }
        },
        mounted() {
            // 修改容器的大小
            this.changeWrapper();
            // 基于准备好的dom，初始化echarts实例
            this.$options.chart = echarts.init(this.$refs.chart);

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

<style scoped>
.echarts-wrapper {
    position: relative;
}
    .echarts-wrapper {
        position: relative;
    }
</style>

 src/components/charts/CustomPie.vue

@@ -5,304 +5,362 @@
</template>

<script>
import * as echarts from 'echarts';
import sigh from './images/sigh.png';
import {chartFontsize} from '@/assets/js/chartFontsize';

export default {
    name: "CustomPie",
    chart: "",
    chartData: "",
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
    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 {}
        },
        setData(data) {
            this.$options.chartData = 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: [
                    {
        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],//缩放
                        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;
                    }],
                    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',
                            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]
                                    }
                                },
                                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,
                        },
                        labelLine: {
                            length: 30,
                            length2: 10,
                            lineStyle: {
                                color: '#0073C5',
                                width: 1,
                            }
                        {
                            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]
                        },
                        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
                            };
                        {
                            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]
                        },
                        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
                            };
                        {
                            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]
                        },
                        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
                            };
                        {
                            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]
                        },
                        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
                            };
                        {
                            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]
                        },
                        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: {
                        {
                            name: '',
                            type: 'pie',
                            radius: [0, '35%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [0],
                            itemStyle: {
                                color: '#007ED3'
                            }
                        },
                        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)
                    }
                ]
            };
            // 设置配置项
            this.setOption(option);
                }).catch((err) => {
                    console.log(err)
                });
            },
            resize() {
                setTimeout(() => {
                    this.$options.chart.resize();
                    if (JSON.stringify(this.$options.chartData) != '{}') {
                        this.setData(this.$options.chartData);
                    }
                }, 300)
            }
        },
        resize() {
            this.setData(this.$options.chartData);
            this.$options.chart.resize();
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        let data = [
            {value: 400, name: '通讯故障', color: '#5062DE'},
            {value: 735, name: '直流总故障', color: '#FD5E02'},
            {value: 580, name: '防雷器故障', color: '#8C6BFA'},
            {value: 484, name: '开关柜故障', color: '#F58881'},
            {value: 300, name: '监控器故障', color: '#EDE611'},
            {value: 200, name: '交流总故障', color: '#43F9FD'},
        ];
        this.setData(data);
        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>

 src/components/charts/MonCap.vue

@@ -1,86 +1,164 @@
<template>
  <layout-box title="单体容量">
    <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 class="flex-box">
    <div class="flex-box-body">
      <circle-chart id="circleChart" ref="circleChart"></circle-chart>
    </div>
  </layout-box>
    <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 LayoutBox from "@/components/LayoutBox";
import CircleChart from "@/components/charts/CircleChart";
export default {
  name: "MonCap",
  components: {CircleChart, LayoutBox},
  data() {
    return {
      chart: {
        circle: [
          {
            name: '低告警数量',
            value: 380,
            color: '#00DFFC',
          },
          {
            name: '告警总数比例',
            value: 180,
            color: '#FF8B34',
          },
          {
            name: '告警总数',
            value: 180,
            color: '#ED4882',
          },
          {
            name: '告警机房总数',
            value: 280,
            color: '#2EEA9D',
          },
          {
            name: '告警机房数比例',
            value: 70,
            color: '#F3E501',
  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)
          }
        ]

        })
      },
      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();
      }
    }
  },
  mounted() {
    this.$refs.circleChart.setData(this.chart.circle);
  }
}
</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-footer {
  padding:0 8px;
}
.list-view li {
  list-style: none;
}
.list-view-item {
  white-space: nowrap;
  padding: 8px 0;
}
  .flex-box-body {
    flex: 1;
    height: 100%;
  }

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

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

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

 src/components/charts/PictorialBar.vue

@@ -5,139 +5,182 @@
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PictorialBar",
  chart: "",
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
  import * as echarts from "echarts";
  import {
    onlinegroupVolAnalysis
  } from '@/assets/js/api'
  export default {
    name: "PictorialBar",
    chart: "",
    chartData: {},
    props: {
      id: {
        type: String,
        default: ""
      }
    },
    setData() {
      let option = {
        legend: {
          data: ['在线电压', '组端电压'],
          top: '4%',
          right: '8%',
          icon: 'rect',
          textStyle: {
            color: '#fff',
          }
        },
        xAxis: {
          type: 'category',
          data: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
          axisLabel: {
            color: '#fff',
            interval: 0,
    data() {
      return {}
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let option = {
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          axisLine: {
            lineStyle: {
              color: "#007DD140",
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            data: ['在线电压', '组端电压'],
            top: '4%',
            right: '8%',
            icon: 'rect',
            textStyle: {
              color: '#fff',
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#007DD140',
              type: 'dashed',
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff',
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: "#007DD140",
              }
            },
            data: data.xData,
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                color: '#007DD140',
                type: 'dashed',
              }
            }
          }
        },
        series: [
          {
            name: "在线电压",
          },
          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',
            data: [
              {
                name: '高告警数量',
                value: 2
              },
              {
                name: '低告警数量',
                value: 15
              },
              {
                name: '告警机房数',
                value: 32
              },
              {
                name: '告警总数比例',
                value: 23
              },
              {
                name: '告警机房总数',
                value: 39
              },
            ],
            itemStyle: {
              color: "#E85D22"
            }
          },
          {
            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',
            barGap: '-1%',
            data: [
              {
                name: '高告警数量',
                value: 22
              },
              {
                name: '低告警数量',
                value: 25
              },
              {
                name: '告警机房数',
                value: 35
              },
              {
                name: '告警总数比例',
                value: 18
              },
              {
                name: '告警机房总数',
                value: 55
              },
            ],
            itemStyle: {
              color: "#2EEA9D"
            }
          },
        ]
      };
              color: item.color
            },
            data: item.data
          })
        })

      // 设置配置项
      this.setOption(option);
        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)
      }
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

    this.setData();
    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>

 src/components/charts/RoseChart.vue

@@ -5,67 +5,68 @@
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "RoseChart",
  chart: "",
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
  import * as echarts from 'echarts';
  import {
    batteryAlarmBtsStatus
  } from '@/assets/js/api'
  export default {
    name: "RoseChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        type: String,
        default: ""
      }
    },
    setData(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: [
          {
    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){
              color(params) {
                return data[params.dataIndex].color;
              },
            },
@@ -77,7 +78,7 @@
              rich: {
                a: {
                  fontSize: 16,
                  color:'#fff',
                  color: '#fff',
                },
                hr: {
                  width: '100%',
@@ -86,9 +87,9 @@
                },
                value: {
                  fontSize: 18,
                  color:'#CE6D28',
                  color: '#CE6D28',
                  fontWeight: 'bold',
                  padding:[5, 0, 0, 0]
                  padding: [5, 0, 0, 0]
                }
              },
            },
@@ -101,34 +102,90 @@
              }
            },
            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)
          }
        ]
      };

      // 设置图表配置项
      this.setOption(option);
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
            this.setData(this.$options.chartData);
          }
        }, 300)
      }
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

    this.setData([
      {value: 6, name: '在线浮充数量', color: '#E85D22'},
      {value: 7, name: '充电数量', color: '#76CFDD'},
      {value: 10, name: '内阻测试数量', color: '#FEDB5B'},
      {value: 8, name: '故障数量', color: '#8278E9'},
      {value: 4, name: '核容数量', color: '#9EE6B8'},
    ]);
    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>