From 20e9ed291e6ff2eceed90ee41e0a9cb4ccb2a28b Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期四, 10 十月 2019 09:57:15 +0800
Subject: [PATCH] 提交内容
---
src/js/components.js | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 176 insertions(+), 1 deletions(-)
diff --git a/src/js/components.js b/src/js/components.js
index dd726c1..622b879 100644
--- a/src/js/components.js
+++ b/src/js/components.js
@@ -343,6 +343,7 @@
},
});
+// 鏌辩姸鍥�
Vue.component('high-bar-chart', {
props: {
id: {
@@ -374,6 +375,9 @@
default(){
return {}
}
+ },
+ monHanderClick: {
+ type: Function,
}
},
template: `
@@ -383,7 +387,7 @@
`,
data() {
return {
- chart: ''
+ chart: '',
}
},
watch: {
@@ -430,6 +434,9 @@
series: [{
name: this.name,
data: [],
+ events: {
+ click: self.monHanderClick,
+ },
dataLabels: {
enabled: true
}
@@ -496,4 +503,172 @@
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(){
+ return {}
+ }
+ },
+ monHanderClick: {
+ type: Function,
+ }
+ },
+ template: `
+ <div class="high-chart-container">
+ <div :id="id" class="high-chart" :style="getStyle"></div>
+ </div>
+ `,
+ data() {
+ return {
+ chart: '',
+ }
+ },
+ watch: {
+ height: function(value) {
+ this.chart.setSize(undefined, value);
+ }
+ },
+ methods: {
+ init: function() {
+ 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(options) {
+ var categories = options.categories;
+ var data = options.data;
+ this.setCategories(categories);
+ this.setExtremes(null, null);
+ this.setData(data);
+ },
+ setCategories: function(categories,) {
+ this.chart.xAxis[0].setCategories(categories, false); // 涓嶆洿鏂�
+ },
+ setExtremes: function(min, max) {
+ this.chart.yAxis[0].setExtremes(min, max, false); // 涓嶆洿鏂�
+ },
+ setData: function(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() { // 鏍煎紡鍖栧崟浣�
+ var unit = this.unit?'锛�'+this.unit+'锛�':'';
+ return unit;
+ },
+ getColors: function() {
+ var defaults = {
+ min: '#ed4014',
+ max: '#19be6b',
+ normal: '#2db7f5',
+ };
+ var colors = this.colors;
+ var result = $.extend({}, defaults, colors);
+ return result;
+ },
+ },
+ computed: {
+ getStyle: function() {
+ return {
+ height: this.height
+ }
+ }
+ },
+ mounted() {
+ var self = this;
+ this.init();
+ }
});
\ No newline at end of file
--
Gitblit v1.9.1