echarts数据渲染

对于 echarts数据渲染数据处理 vue element ui echarts数据渲染

就是要循环处理数据，循环渲染，大佬来远程看看

能不能把事情说清楚

给个效果图和 测试数据 看看

直接在绑定数据那里遍历，组装数据

xAxis: {
  data: this.mychart4Y.map((item) => {
    return item.name;
  }),
},

提供一下数据下载链接呢

vue echarts数据渲染，数据处理参考https://blog.csdn.net/SmartJunTao/article/details/125309447?utm_source=app&app_version=5.5.0

我在写的这个跟你这个数据格式差不多，我是这样写的：
let temperature = [];
let humidity = [];
let allTime = [];
this.devId = [];
this.ips = [];
this.humOptions = [];
this.TOptions = [];
if (result.length > 0) {
for (let i = 0; i < result.length; i++) {
this.devId.push(result[i].devid);
this.ips.push(result[i].ip);
humidity = [];
for (let j = 0; j < result[i].humidness.length; j++) {

                    humidity.push(result[i].humidness[j].number);
                }
                temperature = [];
                allTime = [];
                for (let k = 0; k < result[i].temps.length; k++) {

                    temperature.push(result[i].temps[k].number);
                    allTime.push(result[i].temps[k].date.format('yyyy-MM-DD HH:mm:ss'));
                }
                let maxTemp = Math.max.apply(null, temperature);
                let minTemp = Math.min.apply(null, temperature);
                let maxHum = Math.max.apply(null, humidity);
                let minHum = Math.min.apply(null, humidity);
                maxTemp = Math.ceil(maxTemp);
                minTemp = Math.floor(minTemp);
                maxHum = Math.ceil(maxHum);
                minHum = Math.floor(minHum);
                this.humOption = {
                    color: [
                        '#5470c6'
                    ],
                    title: {
                        text: '湿度'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        show: false
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: allTime
                    },
                    yAxis: {
                        type: 'value',

                        axisLabel: {
                            formatter: '{value}%'
                        },
                        min: minHum,
                        max: maxHum
                    },
                    series: [
                        {
                            name: '最高湿度',
                            type: 'line',
                            data: humidity,
                            markPoint: {
                                data: [
                                    {
                                        type: 'max',
                                        name: 'Max',
                                        itemStyle: {
                                            color: maxHum > (this.textDesc[0] ? this.textDesc[0].maxHumidity : 70) ? '#c12e34' : '#1da57a'
                                        }

                                    },
                                    {
                                        type: 'min',
                                        name: 'Min',
                                        itemStyle: {
                                            color: minHum < (this.textDesc[0] ? this.textDesc[0].minHumidity : 30) ? '#fcce10' : '#1da57a'
                                        }
                                    }
                                ],
                                symbolSize: 60
                            }
                        },
                        {
                            name: '最低湿度',
                            type: 'line',
                            data: humidity,
                            markPoint: {
                                data: [{ name: '周最低', value: minHum }]
                            }
                        }
                    ]
                };
                this.TOption = {
                    color: [
                        '#91cc75'
                    ],
                    title: {
                        text: '温度'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        show: false
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: allTime
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} °C'
                        },
                        min: minTemp,
                        max: maxTemp
                    },
                    series: [
                        {
                            name: '最高温度',
                            type: 'line',
                            data: temperature,
                            markPoint: {
                                data: [
                                    {
                                        type: 'max',
                                        name: 'Max',
                                        itemStyle: {
                                            color: maxTemp > (this.textDesc[0] ? this.textDesc[0].maxTemperature : 28) ? ' #c12e34' : '#1da57a'
                                        }
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min',
                                        itemStyle: {
                                            color: minTemp < (this.textDesc[0] ? this.textDesc[0].minTemperature : 10) ? '#fcce10' : '#1da57a'
                                        }
                                    }
                                ],
                                symbolSize: 60
                            }
                        },
                        {
                            name: '最低温度',
                            type: 'line',
                            data: temperature,
                            markPoint: {
                                data: [{ name: '周最低', value: minTemp }]
                            }
                        }
                    ]
                };
                this.humOptions.push(this.humOption);
                this.TOptions.push(this.TOption);
            }

        }

在你的绑定数据那里循环遍历返回的数据即可，但是如果数据量特别大的话个人建议最好分页处理，否则页面渲染会比较慢，影响用户体验

渲染层错误，网络层错

可以参考我的这篇博文，https://blog.csdn.net/hhl18730252820/article/details/124333050?spm=1001.2014.3001.5502
它是基于Vue使用echats的一些步骤和一个动态渲染曲线图的案例