单体容量提交

whychdw

2021-03-23 abbcac7c3a1bff07ef9c8bb296b51512337c17f4

单体容量提交

 src/components/charts/CircleChart.vue

New file
@@ -0,0 +1,215 @@
<template>
    <div class="echarts-wrapper" ref="wrapper">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>

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

export default {
    name: "CircleChart",
    chart: "",
    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
        },
    },
    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;
            }
        }
    },
    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;
}
</style>

 src/components/charts/MonCap.vue

New file
@@ -0,0 +1,86 @@
<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>
  </layout-box>
</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',
          }
        ]
      }
    }
  },
  mounted() {
    this.$refs.circleChart.setData(this.chart.circle);
  }
}
</script>

<style scoped>

.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;
}
</style>