Echarts从URL获取数据失败求助：折线图无法正常显示

嘿，我来帮你搞定这个问题！你之前的代码没法正常工作，核心原因是ECharts的series配置里根本没有url这个属性，所以你直接加进去ECharts完全不会识别，自然也就不会去请求数据啦。

要实现从URL加载数据并渲染折线图，你需要用AJAX手动请求数据，拿到数据后再更新图表的配置。下面是具体的实现步骤和代码示例：

正确的实现思路 #

1. 先初始化ECharts实例，并设置好基础的图表配置（x轴、y轴等），series的data先留空或者设为默认空数组
2. 用AJAX请求目标URL获取数据
3. 把返回的JSON数据解析成数组
4. 更新ECharts的option，将获取到的数据赋值给series的data，然后重新渲染图表

代码示例（原生JS Fetch版） #

// 先获取页面上的ECharts容器（假设容器id是main）
var chartContainer = document.getElementById('main');
// 初始化ECharts实例
var myChart = echarts.init(chartContainer);

// 基础配置，data暂时为空
var baseOption = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'line'
    }]
};

// 先渲染基础的空图表
myChart.setOption(baseOption);

// 用Fetch请求数据
fetch('https://www.myurl.com/echartstest.php')
    .then(response => {
        // 确保请求成功
        if (!response.ok) {
            throw new Error('请求失败');
        }
        return response.json(); // 解析返回的JSON数组
    })
    .then(fetchedData => {
        // 更新图表数据
        myChart.setOption({
            series: [{
                data: fetchedData
            }]
        });
    })
    .catch(error => {
        console.error('加载数据出错:', error);
    });

代码示例（jQuery AJAX版） #

如果你项目里已经在用jQuery，也可以用这种方式：

var myChart = echarts.init($('#main')[0]);

var baseOption = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'line'
    }]
};

myChart.setOption(baseOption);

$.ajax({
    url: 'https://www.myurl.com/echartstest.php',
    type: 'GET',
    dataType: 'json',
    success: function(fetchedData) {
        myChart.setOption({
            series: [{
                data: fetchedData
            }]
        });
    },
    error: function(xhr, status, err) {
        console.error('加载数据出错:', err);
    }
});

注意事项 #

• 确保你的数据接口返回的是合法的JSON格式，也就是你提到的[820, 932, 901, 934, 1290, 1330, 1320]，这样解析的时候才不会报错
• 如果你的ECharts页面和数据接口不在同一个域名下，需要确保接口已经配置了CORS跨域允许，否则浏览器会阻止跨域请求

内容的提问来源于stack exchange，提问作者gigapico00