From 20e9ed291e6ff2eceed90ee41e0a9cb4ccb2a28b Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期四, 10 十月 2019 09:57:15 +0800
Subject: [PATCH] 提交内容
---
dist/js/components.js | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 173 insertions(+), 0 deletions(-)
diff --git a/dist/js/components.js b/dist/js/components.js
index 4ad4289..84f3689 100644
--- a/dist/js/components.js
+++ b/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();
+ }
});
\ No newline at end of file
--
Gitblit v1.9.1