提交内容

whychdw

2019-08-31 74d8534a366850995e2403ebe4af58097eb67843

 src/js/components.js

@@ -157,4 +157,186 @@
    computed: {
        
    }
});

Vue.component('bar-chart', {
    props: {
        width: {
            type: String,
            default: 'auto'
        },
        height: {
            type: String,
            default: '100px'
        },
        'showValue': {
            type: Boolean,
            default: true,
        },
        range:{
            type: Object,
            default(range) {
                var result = {
                    min: 0,
                    minFlag: false,
                    max: 1,
                    maxFlag: false,
                };
                return result;
            }
        },
        colors:{
            type: Object,
            default(option) {
                var defaults = {
                    normal: '#5cadff',
                    max: '#19be6b',
                    min: '#ed4014',
                };
                var colors = {};
                if(option) {
                    colors = $.extend({}, defaults, option);
                }else {
                    colors = defaults;
                }
                return colors;
            }
        }
    },
    template: `
        <div class="bar-echart">
            <div class="echart" :style="style"></div>
        </div>
    `,
    data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height,
            },
            option: {}, 
        }
    },
    methods: {
        setOption: function(opt) {
            var defaults = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 1,
                    splitLine: {
                        show: false
                    }
                },
                series: []
            };
            this.option = $.extend(true, {}, defaults, opt);

            // 设置图谱显示范围
            this._setRange();

            // 设置文本
            this._setLabel();

            // 设置柱状图的颜色
            this._setColor();
            this.graph.setOption(this.option);
            this.graph.resize();
        },
        _setRange: function() {     // 设置范围
            var option = this.option;
            var series = option.series;
            // option的最值进行处理
            if(series.length == 0 || series[0].data.length == 0) {
                option.yAxis.min = 0;
                option.yAxis.max = 1;
            }else {
                var data = series[0].data;
                var min = getMinFromArr(data);
                var max = getMaxFromArr(data);
                // 设置最小值
                if(this.range.minFlag == false || this.range.min == undefined) {
                    min = Math.floor(min*0.9);
                }else {
                    min = this.range.min>min?Math.floor(min*0.9):this.range.min;
                }

                // 设置最大值
                if(this.range.maxFlag == false || this.range.max == undefined) {
                    max = Number((max*1.15).toFixed(1))
                }else {
                   max= this.range.max<max?Number((max*1.15).toFixed(1)):this.range.max;
                }
                option.yAxis.min = min;
                option.yAxis.max = max;
            }
        },
        _setColor: function() {     // 设置颜色
            var option = this.option;
            var colors = this.colors;
            var series = option.series[0];
            if(series) {
                var data = series.data;
                if(series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                var maxflag = true;
                var minflag = true;
                series.itemStyle.normal.color = function setColor(value) {
                    var min = getMinFromArr(data);
                    var max = getMaxFromArr(data);
                    if(value.value==max) {
                        return colors.max;
                    }else if(value.value == min) {
                        return colors.min;
                    }else {
                        return colors.normal;
                    }
                };
            }
        },
        _setLabel: function() {
            var option = this.option;
            var series = option.series[0];
            if(series) {
                if(series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                series.itemStyle.normal.label = {
                    show: this.showValue,
                    position: 'top'
                };
            }
        },
        resize: function() {
            var option = this.graph.getOption();
            this.setOption(option);
        },
    },
    mounted: function() {
        // console.log(this.$el);
        var $root = $(this.$el);
        var graphEl = $root.find('.echart').get(0);
        this.graph = echarts.init(graphEl);
        this.graph.setOption({});
    },
});