安裝包 echarts
npm install echarts --save
npm install @types/echarts --save
使用echarts
在html文件中添加了用id綁定的div
然后在ts文件中import echarts
createCharts() {
var myChart = ECharts.init(document.getElementById('tu') as HTMLDivElement);
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表丘喻。
myChart.setOption(option);
}
<div style="width:100%;height:300px" id='tu'>
</div>
如果需要寬度自適應(yīng),在width的設(shè)置上使用百分比
import ECharts from 'echarts';
網(wǎng)上抄的一個自適應(yīng)寬度的指令
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[autofit]'
})
export class AutoFitLayout {
constructor(public element: ElementRef, public renderer: Renderer) {
//因為ionic的默認(rèn)padding寬度是16
renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
}
}
這個指令的問題在于,如果平板端使用了splitpane的話,獲取到的寬度就不正常了.在手機(jī)窄屏的情況下沒有問題,如果寬屏就用百分比來實現(xiàn)好了.
image.png
有高手知道如何改進(jìn)這個指令的,希望不吝賜教.
