fj-dc-ui/.svn/pristine/8b/8b9488599f4e402785f3b62750949de0047287cd.svn-base

<!--  -->
<template>
    <div>
         <div style="width:100%;" :style="{'height': colHeight - 40 + 'px'}"  ref="normal_bar_chart"></div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import echarts from 'echarts'
export default {
    //import引入的组件需要注入到对象中才能使用
    props:['barData_zy','pieData_zy'],
    components: {},
    data() {
    //这里存放数据
        return {
            colHeight:window.innerHeight - 300,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        // barData_zy(){
        //     this.init_Serious_BarLineChart();
        // }
    },
    //方法集合
    methods: {
        
        init_Serious_BarLineChart:function(){
            var _self = this;
            var scale = 1;
            let chart = echarts.init(this.$refs['normal_bar_chart']);
            var rich = {
                yellow: {
                    color: "#ffc72b",
                    fontSize: 30 * scale,
                    padding: [5, 4],
                    align: 'center'
                },
                black: {
                    // color: "#3a3a3a",
                    fontSize: 30 * scale,
                    padding: [5, 4],
                    align: 'center'
                },
                blackSmall: {
                    // color: "#3a3a3a",
                    fontSize: 16 * scale,
                    padding: [5, 4],
                    align: 'center'
                },
                total: {
                    // color: "#ffc72b",
                    fontSize: 40 * scale,
                    align: 'center'
                },
                white: {
                    // color: "#fff",
                    align: 'center',
                    fontSize: 14 * scale,
                    padding: [21, 0]
                },
                blue: {
                    color: '#49dff0',
                    fontSize: 16 * scale,
                    align: 'center'
                },
                hr: {
                    borderColor: '#3a3a3a',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                }
            }
            let option = {
                title: {
                    text: _self.barData_zy.count + '个问题分布情况',
                    textStyle: {
                        align: 'center',
                        // color: '#fff',
                        fontSize: 20,
                    },
                    top: '3%',
                    left: '5%',
                },
                // backgroundColor: '#0f375f',
                grid: {
                    top: "15%",
                    bottom: "5%",
                    left: "2%",
                    right: "30%",
                    containLabel: true
                },
                tooltip: {
                   trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    }
                },
                legend: {
                    data: ["占比","一般问题","较重问题", "严重问题"],
                    top: "5%",
                    textStyle: {
                        // color: "#ffffff"
                    }
                },
                xAxis: {
                    data:_self.barData_zy.name,
                    axisLine: {
                        show: true //隐藏X轴轴线
                    },
                    
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisLabel: {
                        rotate:15,
                        show: true,
                        textStyle: {
                            // color: "#ebf8ac" //X轴文字颜色
                        }
                    },
                    axisLine: {
                                lineStyle: {
                                    // color: '#01FCE3'
                                    }
                            },
                },
                yAxis: [{
                        type: "value",
                        name: "个",
                        nameTextStyle: {
                            // color: "#ebf8ac"
                        },
                        splitLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                // color: "#ebf8ac"
                            }
                        },
                    },
                    {
                        type: "value",
                        name: "占比",
                        nameTextStyle: {
                            // color: "#ebf8ac"
                        },
                        position: "right",
                        splitLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            show: true,
                            formatter: "{value} %", //右侧Y轴文字显示
                            textStyle: {
                                // color: "#ebf8ac"
                            }
                        }
                    },
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 50,
                        max: 100,
                        splitNumber: 8,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                            }
                        }
                    }
                ],
                series: [{
                        name: "占比",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        showAllSymbol: true, //显示所有图形。
                        symbol: "circle", //标记的图形为实心圆
                        symbolSize: 10, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#49dff0"
                        },
                        lineStyle: {
                            color: "#49dff0"
                        },
                        areaStyle:{
                            color: "rgba(5,140,255, 0.2)"
                        },
                        // data: [23,21,16,16,16,8]
                        data: _self.barData_zy.nhs_zb



                    },
                    {
                        name: "一般问题",
                        stack: "总量",
                        type: "bar",
                        barWidth: 25,
                        itemStyle: {
                            normal: {
                                color: "#5ce9c7"
                            }
                        },
                        // data: [47,47,35,36,35,15]
                        data: _self.barData_zy.normal,
                    },
                    {
                        name: "较重问题",
                        stack: "总量",
                        type: "bar",
                        barWidth: 25,
                        itemStyle: {
                            normal: {
                                color: "#fed172"
                            }
                        },
                        // data: [47,47,35,36,35,15]
                        data: _self.barData_zy.heavier,
                    },
                    {
                        name: "严重问题",
                        stack: "总量",
                        type: "bar",
                        barWidth: 25,
                        itemStyle: {
                            normal: {
                                color: "#fb6086"
                            }
                        },
                        // data: [7,4,3,2,2,5]
                        data: _self.barData_zy.serious,
                    },
                    
                    {
                        name: '严重程度分布情况',
                        type: 'pie',
                        radius:'20%',
                        center: ['85%', '20%'],
                        // hoverAnimation: false,
                        color: ['#5ce9c7', '#fed172', '#fb6086'],
                        label: {
                            normal: {
                                formatter: function(params, ticket, callback) {
                                    var total = 0; 
                                    var percent = 0; 
                                    _self.pieData_zy.forEach(function(value, index, array) {
                                        total += value.value;
                                    });
                                    if(total != 0){
                                        percent = ((params.value / total) * 100).toFixed(1);
                                        return '{blackSmall|' + params.name + '}{black|' + params.value + '}\n{blue|' + percent + '%}';
                                    }else{
                                        return '{blackSmall|' + params.name + '}{black|' + params.value + '}\n{blue|' + "0" + '%}';
                                    }
                                
                                },
                                rich: rich
                            },
                        },
                        data: _self.pieData_zy,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '典型问题分布',
                        type: 'pie',
                        radius:'20%',
                        center: ['85%', '65%'],
                        // hoverAnimation: false,
                        color: ['#fb6086', '#fed172'],
                        label: {
                            normal: {
                                formatter: function(params, ticket, callback) {
                                    var total = 0; 
                                    var percent = 0; 
                                    _self.pieData_zy.forEach(function(value, index, array) {
                                        total += value.value;
                                    });
                                    if(total != 0){
                                        percent = ((params.value / total) * 100).toFixed(1);
                                        return '{blackSmall|' + params.name + '}{black|' + params.value + '}\n{blue|' + percent + '%}';
                                    }else{
                                        return '{blackSmall|' + params.name + '}{black|' + params.value + '}\n{blue|' + "0" + '%}';
                                    }
                                
                                },
                                rich: rich
                            },
                        },
                        data: [
                            {
                                "value":32,
                                "name": "典型问题"
                            },
                            {
                                "value":23,
                                "name": "非典型问题"
                            },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);
            window.addEventListener("resize", () => { 
                chart.resize();
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init_Serious_BarLineChart();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>