1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| <script>
| import ECharts from "echarts";
| import BaseChart from "@/components/echarts/BaseChart";
|
| export default {
| extends: BaseChart,
| props: {
| name: {
| type: String,
| default: "",
| },
| unit: {
| type: String,
| default: "",
| },
| },
| data() {
| return {
| };
| },
| methods: {
| fullScreen() {
| return false;
| },
|
| setData(data) {
| let option = this.getOption(data);
| this.setOption(option);
| },
|
| getOption(data = []) {
| const unit = this.unit;
| let xLabel = [];
| let sData = [];
| data.forEach((v) => {
| xLabel.push(v.time);
| sData.push(v.value);
| });
|
| return {
| grid: {
| left: '2%',
| right: '2%',
| bottom: "2%",
| top: '10%',
| containLabel: true,
| },
| // tooltip: {},
| tooltip: {
| trigger: 'axis', // 'axis' 表示在数据轴上触发悬停
| // axisPointer: { // 指示器，有以下三种选择：
| // type: 'line' // 'line'、'shadow'
| // },
| formatter(params) {
| return params[0].name + '<br >' + (params[0].value + unit);
| }
| },
| xAxis: {
| type: "category",
| data: xLabel,
| axisPointer: {
| type: "shadow"
| },
| // axisLine: {
| // show: false, // 隐藏x轴轴线
| // },
| // axisTick: {
| // show: false, // 隐藏x轴刻度线
| // },
| axisLabel: {
| show: true, // 显示分类名
| position: "inside", // 将分类名放置在x轴内部
| },
| },
| yAxis: {
| type: "value",
| name: unit,
| nameLocation: 'end',
| nameTextStyle: {
| align: "center",
| verticalAlign: "top"
| },
| // show: false,
| min: function (data) {
| let min = data.min;
| if (min == Infinity) {
| return 0;
| }
| return Math.min(Math.round((min - min * 0.15) * 100) / 100, 0);
| },
| max: function (data) {
| let max = data.max;
| if (max == -Infinity) {
| max = 1;
| }
| return Math.round((max + max * 0.15) * 100) / 100;
| }
| },
| series: [
| {
| data: sData,
| type: "bar",
| label: {
| show: true,
| position: 'top',
| }
| // connectNulls: true,
| // symbolSize: 0
| },
| ],
| };
| },
| },
| mounted() {
| this.setData();
| },
| };
| </script>
|
|
