修改内容

whychdw

2019-09-05 a021b459247a5cf825c2a132f3da1e5d31e8037c

 dist/js/components.js

@@ -100,4 +100,340 @@
        }
    },
    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: function _default(range) {
                var result = {
                    min: 0,
                    minFlag: false,
                    max: 1,
                    maxFlag: false
                };
                return result;
            }
        },
        colors: {
            type: Object,
            default: function _default(option) {
                var defaults = {
                    normal: '#5cadff',
                    max: '#19be6b',
                    min: '#ed4014'
                };
                var colors = {};
                if (option) {
                    colors = $.extend({}, defaults, option);
                } else {
                    colors = defaults;
                }
                return colors;
            }
        }
    },
    template: '\n        <div class="bar-echart">\n            <div class="echart" :style="style"></div>\n        </div>\n    ',
    data: function data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height
            },
            option: {}
        };
    },

    methods: {
        setOption: function setOption(opt) {
            var self = this;
            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.resize();
            this.graph.setOption(this.option, true);
        },
        _setRange: function _setRange() {
            // 设置范围
            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 _setColor() {
            // 设置颜色
            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 _setLabel() {
            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 resize() {
            var option = this.graph.getOption();
            this.setOption(option);
        }
    },
    mounted: function mounted() {
        // console.log(this.$el);
        var $root = $(this.$el);
        var graphEl = $root.find('.echart').get(0);
        this.graph = echarts.init(graphEl);
        this.graph.setOption({});
    }
});

Vue.component('high-bar-chart', {
    props: {
        id: {
            type: String,
            required: true
        },
        name: {
            type: String,
            default: ''
        },
        unit: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '200px'
        },
        colors: {
            type: Object,
            default: function _default() {
                return {};
            }
        }
    },
    template: '\n        <div class="high-chart-container">\n            <div :id="id" class="high-chart" :style="getStyle"></div>\n        </div>\n    ',
    data: function data() {
        return {
            chart: ''
        };
    },

    watch: {
        height: function height(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function init() {
            var self = this;
            var yText = this.name + this.getUnit();
            this.chart = Highcharts.chart(this.id, {
                chart: {
                    type: 'column'
                },
                credits: { // 版本信息
                    enabled: false
                },
                legend: { // 指示
                    enabled: false
                },
                title: {
                    text: this.title
                },
                subtitle: {
                    text: this.subtitle
                },
                xAxis: [{
                    categories: [],
                    crosshair: true
                }],
                yAxis: [{
                    title: {
                        text: yText
                    },
                    lineWidth: 1
                }],
                tooltip: {},
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: this.name,
                    data: [],
                    dataLabels: {
                        enabled: true
                    }
                }]
            });
        },
        setOption: function setOption(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function setCategories(categories) {
            this.chart.xAxis[0].setCategories(categories, false); // 不更新
        },
        setExtremes: function setExtremes(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false); // 不更新
        },
        setData: function setData(data) {
            var result = [];
            var max = getMaxFromArr(data);
            var min = getMinFromArr(data);
            var colors = this.getColors();
            for (var i = 0; i < data.length; i++) {
                var _data = data[i];
                var tmp = {
                    y: _data
                };
                if (_data == min) {
                    tmp.color = colors.min;
                } else if (_data == max) {
                    tmp.color = colors.max;
                } else {
                    tmp.color = colors.normal;
                }
                result.push(tmp);
            }
            this.chart.series[0].setData(result);
        },
        getUnit: function getUnit() {
            // 格式化单位
            var unit = this.unit ? '（' + this.unit + '）' : '';
            return unit;
        },
        getColors: function getColors() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5'
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        }
    },
    computed: {
        getStyle: function getStyle() {
            return {
                height: this.height
            };
        }
    },
    mounted: function mounted() {
        var self = this;
        this.init();
    }
});