在html中声明
<div echarts [options]=" echartsLine" id="lineChart" class="lineChart">
在angular4的ts文件中
import * as echarts from 'echarts';
@Component({
selector: 'app-line',
templateUrl: './app-line.component.html',
styleUrls: ['./app-line.component.scss']
})
export class AppLineComponent implements OnInit {
lineChart:any;
echartsLine:any;
ngOnInit() {
this.lineChart = echarts.init(document.getElementById('lineChart'));
this.echartsLine = {
animation: false,
title: {
text: ''
},
tooltip: {
trigger: 'axis',
textStyle: {
fontFamily: 'globalFirstFont'
},
axisPointer: {
type: 'none'
},
calculable: true,
grid: {
left: '0%',
right: '0%',
bottom: '22%',
containLabel: false
},
//折线图滑动通过zoom
dataZoom: [
{
type: 'slider',
show: false,
realtime: false,
start: 0,
end: 100,
handleSize: 8,
height: 0,
},
{
type: 'inside',
realtime: false,
},
],
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 0,
type: 'solid',
}
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#FFF',
fontSize: 15,
}
},
data: this.xAxisData1//(这是可变数据),
},
yAxis: {
type: 'value',
show: false,
},
series: [
{
name: ‘’,
type: 'line',
stack: 'line',
symbol: 'circle',
symbolSize: 12,
selectedMode: 'single',
itemStyle: {
normal: {
color: '#FCDB93',
borderColor: '#FFF',
borderWidth: 2,
lineStyle: {
width: 4,
color: '#FFF'
}
}
},
data:this.seriesData1//(这是可变数据),
}
]
};
this.lineChart.setOption(this.echartsLine, true);
}