1,遍历可以绑定了datasetId的数组 2,查找对应的图表id 3,datasetId和图表是一对多关系 4,代码:
function updateChartProps(id: undefined, option: { series: any[]; },charts: any[], changeCharts: { (charts: object[]): void; (arg0: any): void; (arg0: any): void; }){
charts.map(chart => {
if (chart.id === id) {
chart.option = option;
}
return chart;
});
changeCharts(charts)
}
function updateChart(chartData: string | any[], option: { series: any[]; } | undefined, id: undefined,charts: any[], changeCharts: { (charts: object[]): void; (arg0: any): void; }){
if (!chartData) return;
if (option && option.series && option.series.length > 0) {
//console.log('getProps',type,this.props, chartData);
option.series = option.series.map((serie, index) => {
if (!!chartData && chartData.length > 0) {
if (chartData.length < index) {
index = chartData.length;
}
const newSer = Object.assign({}, serie, chartData[index]);
return newSer;
} else {
return serie; //seriesItemTemplate
}
});
if (!!updateChartProps) {
updateChartProps(id, option,charts,changeCharts);
}
}
}
function loadWebsocket(markPreview:boolean,charts: any[], changeCharts: { (charts: object[]): void; (arg0: any): void; },) {
let hasDataSetIdCharts: any[] = [];
charts.map((obj) => {
if (obj.hasOwnProperty('dataSetId') && obj.dataSetId) {
hasDataSetIdCharts.push(obj.dataSetId);
}
});
markPreview&&changeCharts(charts);
const socket = new WebSocket("ws://" + 'ip' + ":9080");
//接收消息
socket.onmessage = function (event) {
if (event && event.data) {
const socketData = JSON.parse(event.data);
charts.map((item) => {
if (item.hasOwnProperty('dataSetId') && item.dataSetId == socketData.dataSetId) {
updateChart(JSON.parse(socketData.data),item.option, item.id, charts, changeCharts)
}
})
}
}
//连接建立的回调函数
socket.onopen = function (event) {
// console.log(event)
socket.send(
hasDataSetIdCharts.join(',')
)
}
//连接断掉的回调函数
socket.onclose = function (event) {
console.log(event);
}
}