前置文章

数据可视化之前,先确保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>
    
  • pycharmTerminal中输入

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);

一只小菜鸡