ngx-echarts响应式图表
程序员文章站
2023-11-03 09:36:28
本篇博客主要是介绍了如何使用ngx-echarts绘制响应式图表 ......
一、代码
html代码
1 <!-- html -->
2 <nz-card style="background-color: #0e0b2a;border: 0px;color: #8cc5fe;min-height: 180px;width: 100%;height: 100%;">
3 <div style="padding: 4px 12px;height: 200px;">
4 <label>
5 {{title}}
6 </label>
7 <div echarts id="powerline" [options]="option" (chartinit)="onchartinit($event)" [loading]="isloading" [loadingopts]="loadingopts" [autoresize]="'true'" style="position: relative;left: 4px;-webkit-tap-highlight-color: transparent;user-select: none;overflow-y: hidden;width: 100%;height: 100%;" class="demo-chart"></div>
8 </div>
9 </nz-card>
ts代码
1 import { component, oninit, input, simplechanges, hostlistener, elementref } from '@angular/core';
2 import * as echarts from 'echarts';
3 import { fromevent } from 'rxjs';
4
5 @component({
6 selector: 'app-powerline',
7 templateurl: './powerline.component.html',
8 styleurls: ['./powerline.component.css']
9 })
10 export class powerlinecomponent implements oninit {
11 @input() title:string;
12 @input() value:any;
13
14
15
16 public option:any;
17 public echartsinstance: any;
18
19 //时间轴
20 private timeline_data:any;
21 //功率曲线轴
22 private power_data:any;
23
24 //自定义监听事件
25 private pageresize:any;
26 constructor(private el:elementref) {
27 //监听窗口resize事件，调用重绘图表方法，重新绘图
28 this.pageresize = fromevent(window, 'resize').subscribe(() => {
29 this.resizechart();
30 });
31 }
32
33 //ngx-echarts初始化，获得图表实例
34 onchartinit(event) {
35 this.echartsinstance = event;
36 }
37
38
39 //重新绘制图表
40 resizechart() {
41 if (this.echartsinstance) {
42 this.echartsinstance.resize();
43 }
44 }
45
46 ngoninit() {
47
48 }
49
50 ngonchanges(changes: simplechanges): void {
51 // this.power_data = this.processpowerlinedata();
52 this.option = {
53 title: {
54 text: '',
55 },
56 tooltip: {
57 trigger: 'axis'
58 },
59 legend: {
60 data:['功率'],
61 bottom :10,
62 },
63 grid:{
64 x:35,
65 y:25,
66 x2:30,
67 y2:50,
68 borderwidth:1
69 },
70 toolbox: {
71 show: false,
72 feature: {
73 magictype: {show: false, type: ['stack', 'tiled']},
74 saveasimage: {show: false}
75 }
76 },
77 xaxis: {
78 name:'时间',
79 type: 'category',
80 namegap :6,
81 nametextstyle :{
82 color :'#364c64',
83 },
84 boundarygap: false,
85 axisline :{
86 show:true,
87 linestyle :{
88 color:'#083b73',
89 width :0,
90 //shadowoffsety :10,
91 },
92 },
93 axistick :{
94 show:false,
95 },
96 splitline :{
97 show:false,
98 },
99 axislabel:{
100 color :'#364c64' ,
101
102 },
103 data: this.processtimelinedata(),
104 },
105 yaxis: [{
106 type: 'value',
107 name:'功率（kw）',
108 max:1000,
109 nametextstyle :{
110 color :'#364c64',
111 },
112 axisline :{
113 show:true,
114 linestyle :{
115 color:'#19193f',
116 width :2,
117 //shadowoffsety :10,
118 },
119 },
120 axistick :{
121 show:false,
122 },
123 splitline :{
124 show:false,
125 },
126 axislabel:{
127 color :'#364c64' ,
128 margin:35,
129 textstyle: {
130 align:'left',
131 // baseline:'left',
132 // left:-40,
133 }
134
135 },
136
137 },{
138 type: 'value',
139 name:'',
140 max:2500,
141 axisline :{
142 show:true,
143 linestyle :{
144 color:'#19193f',
145 width :2,
146 },
147 },
148 axistick :{
149 show:false,
150 },
151 splitline :{
152 show:false,
153 },
154 axislabel:{
155 color :'#22a0f3' ,
156
157 },
158
159 }],
160 series: [{
161 name: '功率',
162 type: 'line',
163 symbol: 'none',
164 itemstyle :{
165 show: false,
166 color :'#22a0f3',
167 borderwidth :1,
168 },
169 linestyle :{
170 color:'#22a0f3',
171 //type:'dashed',
172 },
173 smooth: true,
174 data:this.processpowerlinedata(),
175 // data:this.power_data,
176 // data: [300, 590, 350, 790, 360, 550, 450,300, 590, 350, 790,300, 590, 350, 790, 360, 550, 450,300, 590, 350,300, 590,580]
177 }]
178 };
179
180 }
181
182
183 //处理功率曲线时间轴数组
184 processtimelinedata(){
185 const _self=this;
186 _self.timeline_data = [];
187 if(_self.value){
188 if(0 != _self.value.length){
189 _self.value.map(
190 item =>{
191 let tem_a = item.time;
192 if(tem_a.length ==1){
193 tem_a = "0" + item.time + ":00";
194 }else if(tem_a.length == 2){
195 tem_a = item.time + ":00";
196 }else{
197 tem_a = item.time + ":00";
198 }
199 // parseint(item.tem_a)
200 _self.timeline_data.push(tem_a);
201 }
202 )
203 }else{
204 _self.timeline_data = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',"24:00"];
205 }
206 }else{
207 _self.timeline_data = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',"24:00"];
208 }
209 return _self.timeline_data;
210 }
211
212 //处理功率曲线数据数组
213 processpowerlinedata(){
214 const _self=this;
215 _self.power_data = [];
216 if(_self.value){
217 if(0 != _self.value.length){
218 _self.value.map(
219 item =>{
220 _self.power_data.push(parseint(item.powerp)) ;
221 }
222 )
223 }else{
224 _self.power_data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
225 }
226 }else{
227 _self.power_data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
228 }
229 return _self.power_data;
230 }
231
232
233 ngondestroy(): void {
234 //销毁功率因数曲线的订阅事件
235 if(this.pageresize){
236 this.pageresize.unsubscribe();
237 }
238 }
239
240 }
二、截图
改变窗口大小前：
改变窗口大小后：
三、说明
注意：ngx-echarts想要图表能够随着窗口大小自适应，有两个关键点：
① 容纳图表的容器支持自适应
② 监听窗口的resize事件，当监听到变化时候，重新绘制图表