提交内容

whychdw

2019-10-10 20e9ed291e6ff2eceed90ee41e0a9cb4ccb2a28b

 dist/js/components.js

@@ -285,6 +285,7 @@
    }
});

// 柱状图
Vue.component('high-bar-chart', {
    props: {
        id: {
@@ -316,6 +317,9 @@
            default: function _default() {
                return {};
            }
        },
        monHanderClick: {
            type: Function
        }
    },
    template: '\n        <div class="high-chart-container">\n            <div :id="id" class="high-chart" :style="getStyle"></div>\n        </div>\n    ',
@@ -369,6 +373,9 @@
                series: [{
                    name: this.name,
                    data: [],
                    events: {
                        click: self.monHanderClick
                    },
                    dataLabels: {
                        enabled: true
                    }
@@ -436,4 +443,170 @@
        var self = this;
        this.init();
    }
});

// 折线状图
Vue.component('high-line-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 {};
            }
        },
        monHanderClick: {
            type: Function
        }
    },
    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: 'line'
                },
                credits: { // 版本信息
                    enabled: false
                },
                legend: { // 指示
                    enabled: false
                },
                title: {
                    text: this.title
                },
                subtitle: {
                    text: this.subtitle
                },
                xAxis: [{
                    categories: [],
                    crosshair: true,
                    labels: {
                        autoRotation: [-5]
                    }
                }],
                yAxis: [{
                    title: {
                        text: yText
                    },
                    lineWidth: 1
                }],
                tooltip: {},
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: this.name,
                    data: [],
                    events: {
                        click: self.monHanderClick
                    },
                    dataLabels: {
                        enabled: false
                    },
                    marker: {
                        enabled: false
                    }
                }]
            });
        },
        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();
    }
});