echars 柱状图 堆叠状态 --》二次封装

<template>
    <!-- 柱状图    堆叠
       1. 调用页面引入 
                    import EcharsColumnStack from '@/components/echarsColumnStack.vue';
                    注:自定义的组件名称 不要使用关键字
                    components: {EcharsColumnStack}

       2. 调用页面入参: 

            <EcharsColumnStack :dataList = "valObj"></EcharsColumnStack>
            
               valObj: {
                title: "图表的标题名称",
                tooltip:
                    " 这是提示信息",
                 700,
                height: 600,
                color: ["#7ae4a2", "#04c2ce", "#FDD000", "#c9cacb", "#f31122", "#0089FF"], //颜色 数组
                echarsTooltipStr: "设备: ", //鼠标滑过 tooltip提示文字
                Rotate: true, //当数据大于五条时,是否倾斜显示
                isScroll: false, //当数据大于十条时,是否显示滚动条,一般情况下选择了倾斜就不在显示滚动条
                percentage: true, //y轴是否显示百分比 , 当echarsData中的val为百分比时,设为true,否则false
                legendList: ["未知", "工作", "待机", "停机", "故障", "调试"], //是否显示legend
                xData:["sb001_测试请勿动", "配置","sb001_测试请勿动", "配置","LilDevcie0726"],
                series:[
                    {name: "未知", type: "bar", barWidth: "30", stack: "status", data: [0.75, 100, 100,0,0]},
                    {name: "工作", type: "bar", barWidth: "30", stack: "status", data: [47.93, 0, 0,0,0]},
                    {name: "待机", type: "bar", barWidth: "30", stack: "status", data: [7.720000000000001, 0, 0,0,0]},
                    {name: "停机", type: "bar", barWidth: "30", stack: "status", data: [36.02, 0, 0,0,0]},
                    {name: "故障", type: "bar", barWidth: "30", stack: "status", data: [2.1399999999999997, 0, 0,0,0]},
                    {name: "调试", type: "bar", barWidth: "30", stack: "status", data: [5.4399999999999995, 0, 0,0,0]}
                ]
            }
    -->
    <div class="echart_box_stack">
        <div class="echart_tit" v-show="dataList.title">{{dataList.title}}
            <el-tooltip placement="bottom-start" effect="light" v-show="dataList.tooltip">
                <div slot="content" v-html="dataList.tooltip">
                </div>
                <i class="el-icon-question"></i>
            </el-tooltip>
        </div>
        <div class="echart_column_stack" :style="{dataList.width+'px',height:dataList.height+'px'}" id="echarsColumnStack"></div>
    </div>
</template>

<script>
export default {
    props: {
        dataList: {
            type: Object,
            default: function() {
                return {
                     1400, //地图宽
                    height: 800 //地图高
                };
            }
        }
    },
    data() {
        return {};
    },
    mounted() {
        this.initEcharsColumnStack();
    },
    methods: {
        //初始化echars柱状图,
        initEcharsColumnStack() {
            let that = this;
            let xAxisData = [],
                yAxisData = [];
            let isRotate = "";
            let dataZoom = [];
            if (this.dataList.xData.length > 10) {
                //默认显示10条数据（当数据多余10条时，出滚动条）
                dataZoom = [
                    {
                        //区域缩放
                        type: "slider", //slider表示有滑动块的，inside表示内置的
                        show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
                        height: 8, //滚动条高度
                        start: 0, //数据窗口范围的起始百分比,表示0%
                        end: (10 / this.dataList.xData.length) * 100 //默认显示10条数据（当数据多余10条时，出滚动条）
                    }
                ];
            } else {
                dataZoom = [
                    {
                        //区域缩放
                        type: "slider", //slider表示有滑动块的，inside表示内置的
                        show: false //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
                    }
                ];
            }

            if (this.dataList) {
                //x轴小于等于5不旋转，否则旋转45
                if (this.dataList.xData.length <= 5) {
                    isRotate = 0;
                } else {
                    isRotate = 45;
                }

                let myChart = this.$echarts.init(document.getElementById("echarsColumnStack"));
                myChart.clear();

                let option = {
                    color: this.dataList.color,
                    tooltip: {
                        trigger: "axis",
                        textStyle: {
                            align: "left"
                        },
                        formatter: function(params) {
                            let strReturn =
                                that.dataList.echarsTooltipStr + params[0].name + "<br/>";
                            for (let i = 0; i < params.length; i++) {
                                that.dataList.percentage
                                    ? (strReturn +=
                                          params[i].seriesName + "：" +  Number(params[i].value).toFixed(2) + "%<br/>")
                                    : (strReturn +=
                                          params[i].seriesName + "：" +  Number(params[i].value).toFixed(2) + "<br/>");
                            }
                            return strReturn;
                        }
                    },

                    xAxis: [
                        {
                            type: "category",
                            data: this.dataList.xData, //xAxisData   rotateData
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: this.dataList.Rotate ? isRotate : 0,
                                formatter: function(value, index) {
                                    //value：data中的每一项
                                    var regChinese = new RegExp("[\u4E00-\u9FFF]+", "g"); //判断是否包含汉字
                                    var chineseLength = 4;
                                    var englishLength = 8;
                                    if (regChinese.test(value)) {
                                        if (value.length > chineseLength) {
                                            return value.substring(0, 4) + "...";
                                        } else {
                                            return value;
                                        }
                                    } else {
                                        if (value.length > englishLength) {
                                            return value.substring(0, 8) + "...";
                                        } else {
                                            return value;
                                        }
                                    }
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            //minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
                            axisLabel: {
                                formatter: this.dataList.percentage ? "{value} %" : "{value}"
                            }
                        }
                    ],
                    dataZoom: this.dataList.isScroll ? dataZoom : "",
                    series: this.dataList.series
                };
                //legend
                this.dataList.legendList
                    ? (option.legend = {
                          data: this.dataList.legendList
                      })
                    : "",
                    myChart.setOption(option);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.echart_box_stack {
    margin: 4px;
    position: relative;
    z-index: 1;
}
.echart_tit {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
     100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 14px;
    box-sizing: border-box;
}
</style>