我需要知道如何在Ngx-Echarts中动态添加新数据系列,该数据系列是EChart的Angular包装器。使用Ngx-Echarts我无法弄清楚。使用带有简单setSeries函数的普通Echart显然更容易。但是我在Ngx-Echarts的文档中找不到任何addSeries函数。
我现在可以实现这一点,以便每次添加新系列时都必须重新初始化整个图表对象实例。但是必须有一种更轻松,更聪明的方式来做到这一点。当前方式的核心如下所示:
<div echarts [options]="options" [merge]="updateOptions1" class="demo-chart"
(chartInit)="onChartInit($event)">
</div>
public seriesMap: Map<number, any[]> = new Map<number, any[]>();
public sensorList: Sensor[] = [
{
sensorId: 1, samplingFreaquence: 5, unitOfMeasure: "rpm", sensorValueType: 1, sensorValueHigh: 1000,
sensorDescription: "Akselin pyörimisnopeusanturi",
sensorValueLow: 200
},
{
sensorId: 2, samplingFreaquence: 5, unitOfMeasure: "C", sensorValueType: 1, sensorValueHigh: 1000,
sensorDescription: "Öljyn lämpötila",
sensorValueLow: 200
},
{
sensorId: 3, samplingFreaquence: 5, unitOfMeasure: "Bar", sensorValueType: 1, sensorValueHigh: 1000,
sensorDescription: "Järjestelmä paine",
sensorValueLow: 200
}
];
private echartsIntance;
public updateOptions1 = null;
public options: any;
private chosenSensors = new Set<number>()
private dataPointCount: number = 15;
constructor() {
}
ngOnInit() {
// initialize hashmap with sensor ids-values
this.sensorList.forEach(sensor => {
this.seriesMap.set(sensor.sensorId, null);
});
}
initChart(xAxisData: string[]) {
this.options = null;
this.options = {
title: {
left: 'center',
text: 'Generated Device Data Per Sensor',
},
legend: {
data: [],
// align: 'left',
x: 100,
y: 30
},
calculable: true,
// tooltip: { trigger: 'axis'},
dataZoom: {
show: true,
realtime: true,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [...xAxisData],
splitLine: {
show: true
}
}
],
yAxis: [
{
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: true
},
axisLabel: {
formatter: '{value}'// °C'
},
name: 'Sensor values',
nameLocation: 'middle',
nameGap: 50
},
],
};
}
createXAxisData() {
let xAxisData: string[] = [];
for (let i = 0; i < this.dataPointCount; i++) {
xAxisData.push('2013-03-' + i);
}
return xAxisData;
}
buildSeries(chosenSensors: Set<number>) {
this.initChart(this.createXAxisData());
// empty all data-arrays in value-property
this.seriesMap.forEach((val: any[], key: number) => {
val = null
})
// for each chosen sensor generate dataArray and add it to the emptied value-property
chosenSensors.forEach((chosenSensor, j) => {
this.seriesMap.set(chosenSensor, []);
for (let i = 0; i < this.dataPointCount; i++) {
this.seriesMap.get(chosenSensor).push(
(Math.sin(i / 5) * (i / 5 - 10 * j) + i / 6) * (j + 3) * 3
);
}
});
this.updateData()
}
updateData() {
// dataobject must be nulled/emptied
this.updateOptions1 = null;
this.options.legend.data.length = 0;
// loop each chosen sensor
this.chosenSensors.forEach((chosenSensor: number) => {
// accrue existing series if any
let existingData = [];
if (this.updateOptions1 != null) {
existingData = [...this.updateOptions1.series];
}
// add / update legends also
const sensor = this.sensorList.find(sensor => sensor.sensorId === chosenSensor);
this.options.legend.data.push(sensor.sensorDescription + ' (' + sensor.unitOfMeasure + ')');
// update series and legend data in chart
this.updateOptions1 = {
series: [...existingData, {
name: sensor.sensorDescription + ' (' + sensor.unitOfMeasure + ')',
type: 'line',
data: [...this.seriesMap.get(chosenSensor)],
],
legend: {
data: [...this.options.legend.data]
},
tooltip: { trigger: 'axis' },
};
});
}
因此,我需要添加序列而不重新创建整个图表对象。