series not exists. Legend data should be same with series name or data name.

Question

报错：

核心代码：

def chart_bar(request):
    """构造柱状图的数据"""
    # 数据可以去数据库中获取
    legend = ['黄玉兰', '1010']
    series_list = ['1月', '2月', '4月', '5月', '6月', '7月']
    x_axis = [
        {
            "name": '黄玉兰',
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20]
        },
        {
            "name": '1010',
            "type": 'bar',
            "data": [15, 10, 66, 40, 20, 10]
        }
    ]

    result = {
        "status": True,
        "data": {
            'legend': legend,
            'series_list': series_list,
            'x_axis': x_axis,
        }
    }
    return JsonResponse(result)

在用echarts做柱状图的时候，如果是写静态页面，是可以正常使用的。如果需要前后端传数据，就报错如上，请问有伙伴知道如何解决嘛

Answer 1

引自免费微信小程序：皆我百晓生

在使用Echarts进行前后端数据交互时，您需要确保传入到Echarts配置项中的legend（图例）和series（系列）的数据是对应的。根据您的问题描述及提供的后端代码，chart_bar视图函数返回了包含legend、series_list和x_axis数据的JSON对象。前端在接收到这些数据后，需要正确地将它们填充至Echarts的配置项中。

针对您遇到的问题，解决方案如下：

假设您在前端通过Ajax获取到了后端返回的JSON数据，并将其存储在一个名为response的变量里，接下来应按照以下方式构建Echarts的option对象并初始化图表：

$.ajax({
    url: "/chart/bar",
    type: 'GET',
    success: function(response) {
        var option = {
            // 图例配置
            legend: {
                data: response.data.legend,  // 使用后端返回的图例数据
            },
            // X轴数据，这里未提供，若需要请补充
            xAxis: {
                // ...
            },
            // Y轴配置，这里默认为空，若需要请补充
            yAxis: {
                // ...
            },
            // 数据系列配置
            series: response.data.x_axis,  // 使用后端返回的series数据
        };

        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('your-chart-container-id'));
        
        // 设置图表配置项和数据
        myChart.setOption(option);
    },
    error: function(xhr, status, error) {
        console.log('Failed to load data:', xhr.responseText);
    }
});

这里的关键在于确保legend的data字段与series数组中的每个元素的name字段是一致的。根据您提供的后端代码，'黄玉兰'和'1010'已经在legend列表中，并且在x_axis中也作为两个bar系列的name出现，因此上述解决方案应该能解决您的问题。同时，请确保图表容器元素在HTML中已定义，例如： <div id="your-chart-container-id"></div>。