Echarts通过Ajax异步加载数据

绑定数据的方式有两种，一种是写写好一些图表参数，然后数据留空，然后在异步读取数据的时候，绑定数据。还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。

数据源准备

通过接口获取数据并返回json数据

def get_all_enroll_data(request):
    course_dict = {
        '0': 'Python全栈',
        '1': 'Java',
        '2': '前端',
        '3': 'Go语言',
        '4': '软件测试',
        '5': '运维',
        '6': '产品经理'
    }
    query = '''
    SELECT
        COUNT(*) as "value"
    FROM
        CRM_customerinfo 
    WHERE
        delete_flag = 0 
        AND pub_private = 1 
        AND `status` = 1 
        AND consult_courses=%s;
    '''
    data_list = []
    from django.db import connection
    with connection.cursor() as cursor:
        for i in range(7):
            data = {"name": "", "value": ""}
            cursor.execute(query, params=[i])
            rows = cursor.fetchone()
            data["name"] = course_dict[str(i)]
            data["value"] = rows[0]
            data_list.append(data)
    return JsonResponse({"allCustomerChartData": {"data": data_list})

返回数据：

[

　　{'name': 'Python全栈', 'value': 4},

　　{'name': 'Java', 'value': 7},

　　{'name': '前端', 'value': 5},

　　{'name': 'Go语言', 'value': 21},

　　{'name': '软件测试', 'value': 8},

　　{'name':lue': 7},

　　{'name': '产品经理', 'value': 6}

]

前端页面编写

引入相关js文件

<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/echarts.common.min.js"></script>

定义Echarts展示的div块

原生的图表script

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption(
        {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '科目报名人数',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 1048, name: 'Python全栈'},
                        {value: 735, name: 'Java'},
                        {value: 580, name: '前端'},
                        {value: 484, name: 'Go语言'},
                        {value: 300, name: '软件测试'},
                        {value: 200, name: '运维'},
                        {value: 350, name: '产品经理'}
                    ]
                }
            ]
        }
    )
</script>

上面的数据是固定的，那怎么样才能根据接口返回的数据进行变化呢，下面贴出我的代码，有注释

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    // 指定图表的配置项和数据
    var allCustomerChart = echarts.init(document.getElementById('allCustomer'));

    var allCustomerChart_option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '科目报名人数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: 'Python全栈'},
                    {value: 735, name: 'Java'},
                    {value: 580, name: '前端'},
                    {value: 484, name: 'Go语言'},
                    {value: 300, name: '软件测试'},
                    {value: 200, name: '运维'},
                    {value: 350, name: '产品经理'}
                ]
            }
        ]
    };

    // Ajax异步加载
    getChart();
    function getChart(){
        var allCustomerChartData = []
        allCustomerChart.showLoading();    // 加载数据时展示 loading 图案
        $.ajax({
            type:"GET",
            url:"/get_all_enroll_data/",    // 请求接口
            dataType:"json",
            async:true,
            success:function(data){
                console.log(data);
                allCustomerChart.hideLoading();     //加载完毕后隐藏 loading 图案
                var dataStage = data.allCustomerChartData.data;   // 这里 dataStage 是我们后台返回的数据，json 格式
                for(var i in dataStage) {
                    var statisticsObj = {name:'',value:''};   //因为 ECharts 里边需要的的数据格式是这样的
                    statisticsObj.name = dataStage[i].name;
                    statisticsObj.value = dataStage[i].value;
                    allCustomerChartData.push(statisticsObj);   // 把拿到的异步数据 push 进自己建的数组里
                }
                console.log(allCustomerChartData);
　　　　　　　　　　// 根据自定义需要设置 setOption，这里只需要配置 series 里面的 具体数据
                allCustomerChart.setOption({
                            series: [
                                {
                                    name: '科目报名人数',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: allCustomerChartData    // 加载在图表上的数据
                                }
                            ]
                });
            },
            error:function(data){
               alert("发生错误!");
            }
        });
    }
    allCustomerChart.setOption(allCustomerChart_option);  // 再次 setOption，将上面重新赋值数据的 series 替换 allCustomerChart_option 中的serie，然后setOptions
</script>

这样就完成了，你修改数据库的数据，前端图表就根据接口返回做响应变化啦