Django中引入echarts图表做数据可视化

本篇博客将详细介绍Django中如何引入echarts库：

从echarts官网中选择所需要的图表的样式

选择好样式打开此页面，将红框中代码放入前端页面中

需要放入的位置：

<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart_1'));
#将option代码放入这个位置
 myChart.setOption(option);   
 </script>

在html文件< head>< /head>标签中引入echats库

<script src="{% static 'js/echarts.min.js' %}"  charset="utf-8"></script>

views.py设置方法,前提是models.py中有User这个表,name和base_ mark是表中的两个字段

def anaylize(request):
    users=User.objects.all()#获取表中的所有对象
    base_list = [] #设置为list类型，一会儿将其填入data中
    name_list= []#设置为list类型，一会儿将其填入data中
    for user in users:# 遍历
        name_list.append(user.name)
        base_list.append(user.base_mark)
    return render(request,"anaylize.html",{'name_list':name_list,'base_list':base_list})#在anaylize.html中接收两个参数，一个是name_list,一个是base_list

anaylize.html中data接收的方法：

注意：name是字符串对象，这里必须加上|safe，否则将会报错（Uncaught SyntaxError: Unexpected token &），同时data中的数据被js解析为： & #39;

    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: {{ name_list|safe }}
    },

而普通的int型的数据接收方法：（不需要|safe）

    series: [{
        data:{{base_list}},
        type: 'line',
        areaStyle: {}
    }]

向数据库中输入两条数据，重启Django应用，即可正确显示图表