14-项目实战-图形页面

标签：实战 14 series list chart name option data 页面

# 第三方js插件
    1. highchart 国外 : https://www.hcharts.cn/demo/highcharts/column-basic
    2. echats   国内(推荐): https://echarts.apache.org/handbook/zh/get-started/#

1. 创建路由

from bbc_list.views import login, home_page, order, phone, admin, task, bill, chart
urlpatterns = [
    # 数据统计
    path("chart/list/", chart.chart_list),
    path("chart/line/", chart.chart_line),
    path("chart/bar/", chart.chart_bar),
    path("chart/pie/", chart.chart_pie),
    path("chart/highcharts/", chart.highcharts),
]

2. 创建视图函数(views-chart.py)

from django.http import JsonResponse
from django.shortcuts import render


def chart_list(request):
    """视图统计页面"""
    return render(request, "chart_list.html")


def chart_line(request):
    """折线图"""
    legend = ["数组1", "数组2"]

    series_list = [
        {
            "name": "数组1",
            "type": "line",
            "stack": "Total",
            "data": [5, 20, 36, 10, 10, 20]
        }, {
            "name": "数组2",
            "type": "line",
            "stack": "Total",
            "data": [10, 15, 30, 20, 20, 30]
        }
    ]
    x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']
    result = {
        "status": True,
        "data": {
            "legend": legend,
            "series_list": series_list,
            "x_axis": x_axis,

        }
    }
    return JsonResponse(result)


def chart_bar(request):
    """构建柱状图的数据"""

    legend = ["数据1", "数据2"]

    series_list = [
        {
            "name": '数据1',
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20]
        },
        {
            "name": '数据2',
            "type": 'bar',
            "data": [10, 15, 30, 20, 20, 30]
        }
    ]

    x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']

    result = {
        "status": True,
        "data": {
            "legend": legend,
            "series_list": series_list,
            "x_axis": x_axis,
        }
    }

    return JsonResponse(result)


def chart_pie(request):
    """构建饼状图的数据"""
    """构造饼图的数据"""
    db_data_list = [
        {"value": 1048, "name": '数据1'},
        {"value": 735, "name": '数据2'},
        {"value": 580, "name": '数据3'},
    ]

    result = {
        "status": True,
        "data": db_data_list,
    }
    return JsonResponse(result)


def highcharts(request):
    """highchart视图"""
    return render(request, "highcharts.html")

3. 创建html页面

# chart_list.html
{% extends 'one.html' %}
{% load static %}

{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">折线图</div>
        <div class="panel-body">
            <div id="m1" style="width:100%;height:300px;"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">柱状图</div>
                <div class="panel-body">
                    <div id="m2" style="width:100%;height:400px;"></div>
                </div>
            </div>
        </div>


        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">饼状图</div>
                <div class="panel-body">
                    <div id="m3" style="width:100%;height:400px;"></div>
                </div>
            </div>
        </div>

    </div>
</div>

{% endblock %}

{% block js %}

<script src="{% static 'js/echarts.js' %}"></script>
<script type="text/javascript">
//从后台获取数据
$(function(){
    initLine();

    initBar();

    initPie();
})

    //初始化折线图
    function initLine(){
        var myChart =echarts.init(document.getElementById("m1"));

        var option = {
            title:{
                text:"订单统计表",
                left:"center",
            },
            tooltip:{
                trigger:"axis"
            },
            legend:{
                data:[],
                bottom:0
            },
            toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
              },
              yAxis: {
                type: 'value'
              },
              series: []
            };

            $.ajax({
            url:"/chart/line/",
            type:"get",
            dataType:"JSON",
            success:function(res){
                if(res.status){
                    option.legend.data=res.data.legend;
                    option.xAxis.data=res.data.x_axis;
                    option.series=res.data.series_list;

                    myChart.setOption(option);
                }
            }
            })
        }



    // 初始化柱状图
    function initBar(){
        //基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById("m2"));

        //指定图表的数据和配置
        var option = {
        title: {
          text: '配送信息统计',
          textAlign:"auto", //加上之后居中
          left:"center",    //加上之后居中

        },
        tooltip: {},
        legend: {
          data: [],  //后台获取
          bottom:0  //加上这句,在下面显示
        },
        xAxis: {
          data: []  //后台获取
        },
        yAxis: {},
        series: []  //后台获取
        };
        $.ajax({
         url:"/chart/bar/",
        type:"get",
        dataType:"JSON",
        success:function(res){
            // 将后台返回的数据,更新到option中;
            if(res.status){
                option.legend.data = res.data.legend;
                option.xAxis.data = res.data.x_axis;
                option.series = res.data.series_list;

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
        })

    }




        //初始化饼状图
        function initPie(){
            // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('m3'));
      var option = {
              title: {
                text: '商品预占占比',
                subtext: '北京分部',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                bottom: 0
              },
              series: [
                {
                  name: '预算',
                  type: 'pie',
                  radius: '50%',
                  data: [],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

      $.ajax({
        url:"/chart/pie/",
        type:"get",
        dataType:"JSON",
        success:function(res){
            if(res.status){
                option.series[0].data = res.data;

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        }

      })


        }


</script>


{% endblock %}

highcharts.html

{% extends 'one.html' %}


{% block content %}
<div class="container">
    <div id="m1" style="width: 100%;height:400px;"></div>

</div>

{% endblock %}

{% block js %}
<script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
<script>
     // 图表配置
        var options = {
    chart: {
        type: 'column'
    },
    title: {
        text: '月平均降雨量'
    },
    subtitle: {
        text: '数据来源: WorldClimate.com'
    },
    xAxis: {
        categories: [
            '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '降雨量 (mm)'
        }
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '东京',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: '纽约',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    }, {
        name: '伦敦',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    }, {
        name: '柏林',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    }]};
        // 图表初始化函数
        var chart = Highcharts.chart('m1', options);

</script>

{% endblock %}

标签：实战,14,series,list,chart,name,option,data,页面
From： https://www.cnblogs.com/kh-1314/p/17058140.html

1. 创建路由

2. 创建视图函数(views-chart.py)

3. 创建html页面

highcharts.html

相关文章

赞助商

阅读排行