安装包 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);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
<div style="width:100%;height:300px" id='tu'>
</div>
如果需要宽度自适应,在width的设置上使用百分比
import ECharts from 'echarts';
网上抄的一个自适应宽度的指令
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[autofit]'
})
export class AutoFitLayout {
constructor(public element: ElementRef, public renderer: Renderer) {
//因为ionic的默认padding宽度是16
renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
}
}
这个指令的问题在于,如果平板端使用了splitpane的话,获取到的宽度就不正常了.在手机窄屏的情况下没有问题,如果宽屏就用百分比来实现好了.
image.png
有高手知道如何改进这个指令的,希望不吝赐教.
