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
119
120
121
122
123
124
125
| <template>
| <div class="helemet-echart">
| <div id="echart-cotainer" ></div>
| </div>
| </template>
|
| <script>
| import echarts from "echarts";
|
| export default {
| data (){
| return {
| option : {
| grid: {
| show :false,
| bottom: 20,
| top: 20,
| left: 40,
| right: 20
| },
| xAxis: {
| type: 'category',
| boundaryGap: false,
| data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''],
| axisLine: {
| show: false //不显示坐标轴轴线
| },
| axisTick: {
| show: false //不显示坐标轴刻度
| },
| spiltLine:{
| show: false //想要不显示网格线，改为false
| },
| axisLabel:{
| interval: 0
| }
| },
| yAxis: {
| type: 'value',
| splitLine : {
| show: false
| },
| axisLine: {
| show: false //不显示坐标轴轴线
| },
| axisTick: {
| show: false //不显示坐标轴刻度
| },
| },
| series: [
| {
| data: [820, 932, 901, 934, 1290, 1330, 1320],
| type: 'line',
| areaStyle: {},
| areaStyle: {
| normal: {
| color: '#FFF8EB' //改变区域颜色
| }
| },
| itemStyle: {
| normal: {
| lineStyle: {
| color: '#FFAA44'
| }
| }
| }
|
|
| /* itemStyle: {
| normal: {
| color: '#f7ba0e',
| label: {
| show: true,
| position: 'top',
| formatter:this.format,
| rich: {
| color1: {
| color: '#f7ba0e'
| },
| color2: {
| color: '#42a1fe'
| }
| },
| textStyle: {
| color: '#333'
| }
| }
| }
| } */
| }
| ],
|
| }
| }
| },
| mounted (){
| let myChart = echarts.init(document.getElementById('echart-cotainer'))
| myChart.setOption(this.option);
| },
| methods :{
| /* format (params) {
| console.log(params);
| for (var i = 0,
| l = this.option.xAxis.data.length; i < l; i++) {
| if (this.option.xAxis.data[i] == params.name) {
|
| var val1 = params.value || 0;
| console.log(this);
| var val2 = this.option.series[0].data[i] || 0;
|
| return '{color1|' + val1 + '}/{color2|' + val2 + '}';
| }
| }
| } */
| }
| }
| </script>
|
| <style scoped lang="scss">
| .helemet-echart {
| #echart-cotainer {
| height: 100%;
| }
| }
| </style>
|
|
