echarts表格动态显示

echarts表单,实现y轴获取数据库数据

const lineOption = {
        title: {text: '患者核酸折线图'},
        tooltip: {trigger: 'axis'},
        legend: {data: ['患者1核酸']},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },

        yAxis: {type: 'value'},
        series: [
            {
                name: '患者1核酸',
                type: 'line',
                data:[]
            },
        ]
    };

ajax请求数据库

  let lineChart = echarts.init(document.getElementById('line'));
                 $.ajax({
                     url:"/api/huanzhehe",
                     dataType: 'json',
                     success: function(result){
                        console.log(result.data);
                        for (var i=0;i<result.length;i++){
                            lineOption.data[i]=result.data.nucleic[i];
                        }
                        lineChart.setOption(lineOption);
                     }
                 })


img


前台echarts显示不了

你可以先不请求接口,先使用静态数据,看看显示不显示。如果依然不显示,这时候就是数据的问题。
如果显示的话,就是异步数据刷新的问题。

img


前端不显示

根据您提供的代码,有以下几点需要注意的地方:

在ajax请求成功后,应该将获取到的数据存储到series数组中,并不是直接存储到xAxis.data中。可以使用push()方法将数据存储到series数组中。

在存储数据时,应该按照如下格式存储:

{
    name: '患者1核酸',
    type: 'line',
    data:[数据1, 数据2, 数据3, 数据4, 数据5, 数据6, 数据7]
},
其中,数据1到数据7分别对应每一天的数据。请注意,要保证数据的顺序与x轴的刻度一一对应。

修改后的代码如下:

const lineOption = {
    title: {text: '患者核酸折线图'},
    tooltip: {trigger: 'axis'},
    legend: {data: ['患者1核酸']},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },

    yAxis: {type: 'value'},
    series: [
        {
            name: '患者1核酸',
            type: 'line',
            data: []
        },
    ]
};

let lineChart = echarts.init(document.getElementById('line'));
$.ajax({
    url: "/api/huanzhehe",
    dataType: 'json',
    success: function (result) {
        console.log(result.data);
        let nucleicData = result.data.nucleic;
        for (let i = 0; i < nucleicData.length; i++) {
            lineOption.series[0].data.push(nucleicData[i]);
        }
        lineChart.setOption(lineOption);
    }
});
请注意,以上代码中的nucleicData是从返回结果中提取出来的核酸数据。您需要根据自己的实际情况修改这一部分的代码。

赋值有问题,数据赋给lineOption.series[0].data