cockpit.git - Gitblit

parent: bfd192a0 | 补丁 | 提交 | show whitespace

whychdw

2021-03-23 9993be09d9fff8f69b0b9cc88c90eecc6b1e772c

提交内容

2个文件已修改

4个文件已添加

	package-lock.json	14549 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/AcInput.vue	146 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/CustomPie.vue	310 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/PictorialBar.vue	145 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/RoseChart.vue	136 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 package-lock.json

Diff too large

 package.json

@@ -26,8 +26,8 @@
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11",
    "qs": "^6.6.0"
    "qs": "^6.6.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,

 src/components/charts/AcInput.vue

New file
@@ -0,0 +1,146 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                熔丝告警
            </div>
        </div>
    </div>
</template>

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

export default {
    name: "AcInput",
    chart: "",
    chartData: "",
    props: {
        acColor: {
            type:String,
            default: "#813a74"
        },
        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: [
                    {
                        name: "",
                        type: 'gauge',
                        radius: '90%',
                        startAngle: 180.5,
                        endAngle: -0.5,
                        min: 0,
                        max: 100,
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 40,
                                color: [
                                    [
                                        value / 100, acColor
                                    ],
                                    [
                                        1, resColor
                                    ]
                                ]
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF0000',
                            }
                        },
                        data: [{
                            value: value,
                            name: '年售电量情况'
                        }]
                    }
                ]
            };

            // 设置配置项
            this.setOption(option);
        },
        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);

        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;

}
</style>

 src/components/charts/CustomPie.vue

New file
@@ -0,0 +1,310 @@
<template>
    <div class="echarts-wrapper">
        <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';

export default {
    name: "CustomPie",
    chart: "",
    chartData: "",
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        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: [
                    {
                        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);
        },
        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);

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

<style scoped>

</style>

 src/components/charts/PictorialBar.vue

New file
@@ -0,0 +1,145 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
</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);
    },
    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,
          },
          axisLine: {
            lineStyle: {
              color: "#007DD140",
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#007DD140',
              type: 'dashed',
            }
          }
        },
        series: [
          {
            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"
            }
          },
        ]
      };

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

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

<style scoped>

</style>

 src/components/charts/RoseChart.vue

New file
@@ -0,0 +1,136 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
</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);
    },
    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: [
          {
            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);
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  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);
  }
}
</script>

<style scoped>

</style>

			@@ -26,8 +26,8 @@
			"babel-eslint": "^10.1.0",
			"eslint": "^6.7.2",
			"eslint-plugin-vue": "^6.2.2",
			"vue-template-compiler": "^2.6.11",
			"qs": "^6.6.0"
			"qs": "^6.6.0",
			"vue-template-compiler": "^2.6.11"
			},
			"eslintConfig": {
			"root": true,

New file
			@@ -0,0 +1,146 @@
			<template>
			<div class="echarts-wrapper">
			<div class="echarts-content" ref="chart"></div>
			<div class="echarts-text-wrapper">
			<div class="color-strip" :style="{'backgroundColor':resColor}"></div>
			<div class="echarts-text">
			熔丝告警
			</div>
			</div>
			</div>
			</template>

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

			export default {
			name: "AcInput",
			chart: "",
			chartData: "",
			props: {
			acColor: {
			type:String,
			default: "#813a74"
			},
			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: [
			{
			name: "",
			type: 'gauge',
			radius: '90%',
			startAngle: 180.5,
			endAngle: -0.5,
			min: 0,
			max: 100,
			title: {
			show: false
			},
			detail: {
			show: false
			},
			axisLine: {
			show: true,
			lineStyle: {
			width: 40,
			color: [
			[
			value / 100, acColor
			],
			[
			1, resColor
			]
			]
			}
			},
			axisTick: {
			show: false,
			},
			splitLine: {
			show: false,
			},
			axisLabel: {
			show: false
			},
			pointer: {
			show: false,
			},
			itemStyle: {
			normal: {
			color: '#FF0000',
			}
			},
			data: [{
			value: value,
			name: '年售电量情况'
			}]
			}
			]
			};

			// 设置配置项
			this.setOption(option);
			},
			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);

			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;

			}
			</style>

New file
			@@ -0,0 +1,310 @@
			<template>
			<div class="echarts-wrapper">
			<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';

			export default {
			name: "CustomPie",
			chart: "",
			chartData: "",
			data() {
			return {}
			},
			methods: {
			setOption(opt) {
			this.$options.chart.setOption(opt);
			},
			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: [
			{
			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);
			},
			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);

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

			<style scoped>

			</style>

New file
			@@ -0,0 +1,145 @@
			<template>
			<div class="echarts-wrapper">
			<div class="echarts-content" ref="chart"></div>
			</div>
			</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);
			},
			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,
			},
			axisLine: {
			lineStyle: {
			color: "#007DD140",
			}
			}
			},
			yAxis: {
			splitLine: {
			lineStyle: {
			color: '#007DD140',
			type: 'dashed',
			}
			}
			},
			series: [
			{
			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"
			}
			},
			]
			};

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

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

			<style scoped>

			</style>

New file
			@@ -0,0 +1,136 @@
			<template>
			<div class="echarts-wrapper">
			<div class="echarts-content" ref="chart"></div>
			</div>
			</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);
			},
			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: [
			{
			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);
			},
			resize() {
			this.$options.chart.resize();
			}
			},
			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);
			}
			}
			</script>

			<style scoped>

			</style>