Django+Echarts+Ajax动态加载横、纵坐标数据

四方显神 / 2024-09-25 / 原文

前端html页面（不是重点，可以直接不看）：

    <!-- 第三部分 可视化展示模块 start-->
    <div id="diff_analysis3_graphic" style="width:1200px;margin: 0 auto;margin-top:40px;">
        <div class="StatHome mainHeaderStyle">

            <div class="StatHomeContentOne" style="height:64px;width:100%;background:#17273a;">
                <p class="listHeaderStyle">expression display</p>
            </div>

            <div class="row" style="margin-top:10px;">
                <section id="intro" class="wow fadeIn" style="height:100px;z-index:0; margin:0px 0 0 0;">
                    <form>
                        <div class="form-group col-md-3">
                            <label for="tool2select_gene" style="color: #0a121c;font-size: 16px">
                                Gene Symbol:</label>
                            <br>
                            <select class="form-control" id="tool2select_gene"
                                    style="width: 100%;">
                                <option value="" class="hidden">Search or select</option>
                                <option>A2M</option>
                                <option>ABCB7</option>
                                <option>AC000120.1</option>
                                <option>AC004837.2</option>
                                <option>AC006460.2</option>
                                <option>AC011005.4</option>
                            </select>
                        </div>
                        <div class="form-group col-md-2" style="margin-top:31px;">
                            <button type="button" id="tool2btn"
                                    class="btn btn-primary">plot
                            </button>
                        </div>
                    </form>

                </section>

                <!-- 对图表的文字补充-->
                <div style="text-align: center;">
                    <p class="card-text">
                        Gene expression profiles of all tumor samples and paired normal tissues. (Bar
                        chart)
                    </p>
                    <p>
                        The height of the bar chart represents the average expression level of certain tumor types or
                        normal
                        tissues.
                    </p>
                    <p>   </p>
                </div>


                <!--为echart准备一个具备大小的dom 大小还要调整 -->
                <div id="chart1" style="width: 1000px;height: 300px;margin-left: 10px"></div>

            </div>

        </div>


    </div>
    <!--第三部分 end-->

html中的js部分（重点）：

<script>

    $("#tool2btn").click(function () {
        if ($("#tool2select_gene").val() == "") {
            alert("Please select a gene.")
        } else {

            // echart初始化
            var chart1 = echarts.init(document.getElementById("chart1"));
            // 配置和数据
            var option1 = {
                title: {
                    text: 'Expression-FPKM', // 还可以有副标题subtitle

                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Tumor', 'Normal']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: 'Tumor',
                    type: 'bar',
                    data: []
                }, {
                    name: 'Normal',
                    type: 'bar',
                    data: []
                }],
                // 设置横坐标滚动条
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 50
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 50
                    }
                ]
            }
            chart1.setOption(option1);
            chart1.showLoading(); //数据未加载完全之前先loading
            var diseases = [];    //数据集（实际用来盛放X轴坐标值）
            var tumorValue = [];    //肿瘤样本表达量（实际用来盛放Y坐标值）
            var normalValue = []; //正常样本表达量

            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    symbol: $("#tool2select_gene").val(),
                },
                url: '/cuDB/analysis/differential/plot',
                success: function (plot_data) {
                    console.log(plot_data)
                    if (plot_data) {
                        for (var i = 0; i < plot_data.length; i++) {
                            diseases.push(plot_data[i].disease);
                            tumorValue.push(plot_data[i].tumor);
                            normalValue.push(plot_data[i].normal)
                        }
                        chart1.hideLoading();    //隐藏加载动画
                        chart1.setOption({        //加载数据图表
                            xAxis: {
                                data: diseases
                            },
                            series: [{
                                name: 'tumor',
                                data: tumorValue
                            }, {
                                name: 'normal',
                                data: normalValue
                            }
                            ]
                        });
                    }
                }
            });
        }
    });
</script>

后端views.py代码：

def diffAnalysisPlot(request):
    symbol = request.POST.get("symbol")
    result = list(DiffExpressionTable.objects.filter(symbol=symbol).values())
    return JsonResponse(result, safe=False)