1 基於Echars圖表數據分析（HTML部分：創建div-->調用js）

{% for main in main_count %}
    <div id="{{ main|safe }}" style="width:1280px;height:850px;"></div>
{% endfor %}

<script type="text/javascript">
    var i = 0;
    getId = function () {
        return i++;
    };
    var j = 0;
    getIdj = function
 
 () {
        return j++;
    };
    //get_jobname = function (i){
    //    var name = new Array();
    //   name={{ jobname|safe }};
    //return name[i];
    //};
    window.onload=function(){
        {% for tmp_one in data_pie %}
            pie_js({{ tmp_one|safe }},getId());
        {% endfor %}
    }
</
 
script>

2 js部分（接收後臺傳遞的數據前端顯示渲染）

function pie_js(data,main){
    var myChart = echarts.init(document.getElementById(main));
    var option = {
        title: {
            text: data[0]+‘數據分析‘,
            subtext:‘職位總數:‘+data[1]
        },
        tooltip : {
            trigger: ‘item‘,
            formatter: 
 
"{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            type: ‘scroll‘,
            orient: ‘vertical‘,
            right: 10,
            top: 50,
            bottom: 20,
            data: data[2]
        },

        grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘3%‘,
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: [‘line‘, ‘bar‘]},
                restore : {show: true},
            }
        },
        series: [
            {
                name: ‘訪問來源‘,
                type: ‘pie‘,
                radius: [‘40%‘, ‘50%‘],
                label: {
                    normal: {
                        formatter: ‘{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ‘,
                        backgroundColor: ‘#eee‘,
                        borderColor: ‘#aaa‘,
                        borderWidth: 1,
                        borderRadius: 4,

                        rich: {
                            a: {
                                color: ‘#999‘,
                                lineHeight: 22,
                                align: ‘center‘
                            },

                            hr: {
                                borderColor: ‘#aaa‘,
                                width: ‘100%‘,
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: ‘#eee‘,
                                backgroundColor: ‘#334455‘,
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                name: ‘崗位薪資及崗位數‘,
                type: ‘pie‘,
                data: data[4]
            }
        ]
    };
    // 使用剛指定的配置項和數據顯示圖表
    myChart.setOption(option);
}

3 Django後臺從數據庫查詢數據傳遞數據至html

return render(request,‘echartapp/PieAnalysis.html‘,
                  {
                      ‘hist_sort‘:hist_sort,
                      ‘jobname‘:jobname_key,
                      ‘main_count‘:len_jobname,
                      ‘data_pie‘:all_data,
                  }
                  )

備註:

【1】往js傳遞參數需在<script>內部先定義:var address ={{ address|safe}};

【2】循環傳遞數據變量需在<script>內部先定義函數：pie_js({{ tmp_one|safe }},getId());

【3】計數功能

hist = {}
    for word in jobname_list:
        if word not in hist:  # 生成列表並統計個數
            hist[word] = 1
        else:
            hist[word] = hist[word] + 1
    # 字典排序[(‘BJJSZC‘, 17402), (‘WHJSZC‘, 8799), (‘python_BJ‘, 145), (‘python_WH‘, 49)]
    hist_sort = sorted(hist.items(), key=lambda x: x[1], reverse=True)

++++++++++++++++++++++++++++++++++++++++++

51job數據可視化分析練習