前置文章

数据可视化之前，先确保Django可以连接MySQL，不会连接的可以看我上一篇文章。

Django连接MySQL并在网页中显示数据

本篇是上一篇文章的一个延续，所以上一篇的准备工作，本篇文章就不再赘述。

数据库准备

静态文件配置

  • 在Hello_app目录下创建static文件夹用来存放JS，CSS，IMG文件

  • 在setting.py文件中添加 
    STATIC_URL = '/static/'
STATICFILES_DIRS = (
  os.path.join(BASE_DIR,'static'),
)
  • 在JS中添加echarts.min.js文件

    echarts.min.js下载

数据可视化

  • 在创建的index.html文件

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src = "../static/JS/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height: 400px;"></div>
  <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
          title:{
              text:'Echarts入门示例'
          },
          tooltip:{},
          legend:{
              data:['销量']
          },
          xAxis:{
              data: [
                  {% for Big_datum in Big_data %}
                      "{{ Big_datum.name }}",
                  {% endfor %}
              ]
          },
          yAxis:{},
          series:[{
                  name:'销量',
                  type:'bar',
                  data:[
                      {% for Big_datum in Big_data %}
                          {{ Big_datum.num }},
                      {% endfor %}
                  ]
          }]
      };
      myChart.setOption(option);
  </script>
</body>
</html>
  • 在pycharm的Terminal中输入

python manage.py runserver

  • 效果图

echarts代码

列出几个可视化图，尽可能地将代码进行最简化，方便记忆。

  • 饼图
var myChar = echarts.init(document.getElementById('main'));
var option = {
    title:{ //标题
        text: '各地域招聘人数对比',//主标题
        subtext: '--招聘人数对比饼图',//副标题
        x: 'center'//显示位置
          },
    legend: {//边上的图例
        orient: 'vertical',//什么样式放置,"vertical"代表垂直的
        left:'',//距离左边的距离
        data: [{% for datum in data %}
                    '{{ datum.map }}:{{ datum.num }}',//必须和显示在上的name相同
                {% endfor %}]//数据
             },
     series:{//系列列表
            type: 'pie',//类型
            center: ['70%','60%'],//圆心距离位置
            data: [{% for datum in data %}
            { value:{{ datum.num }},name: '{{ datum.map }}:{{ datum.num }}'},
                    {% endfor %}]}
        };
myChar.setOption(option);
  • 折线图
var myChar = echarts.init(document.getElementById('main'));
var option = {
    title:{
            text:'大数据每日发布岗位对比趋势',
            subtext: '每日岗位发布数量趋势',
            x: 'center'
          },
    xAxis:{
            type: 'category',
            data:[{% for SQL_datum in SQL_data %}
                  '{{ SQL_datum.day }}',
                  {% endfor %}]},
    yAxis:{
            type: 'value',
            },
    series:{
            type: 'line',
            data:[{% for SQL_datum in SQL_data %}
                        {{ SQL_datum.num }},
                    {% endfor %}]}
            };
myChar.setOption(option);
  • 柱状图
var myChar = echarts.init(document.getElementById('main'));
var option = {
    title:{
           text: '各地域大数据招聘人数',
           subtext: '招聘人数柱状图',
           x:'center',
           },
     xAxis:{
            type: 'category',
            data:[{% for SQL_datum in SQL_data %}
                  '{{ SQL_datum.map }}',
                  {% endfor %}]},
     yAxis:{
            type: 'value',
           },
     series:{
            type: 'bar',
            data: [{% for SQL_datum in SQL_data %}
                        {{ SQL_datum.num }},
                    {% endfor %}]}
            };
myChar.setOption(option);

一只小菜鸡