【web开发】10、数据统计(echarts)--柱状图、折线图、饼图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、echarts是什么？

ECharts（ECharts Baidu Visualization）是一个由百度开发的优秀的开源数据可视化库，用于创建交互性和可定制性强的图表和数据可视化。它支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、热力图等，可以用于展示各种不同类型的数据。

二、使用步骤

1.引入CDN

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

2.设置高度&宽度

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器，否则图表显示不出来。

<div id="m1" style="width:100%;height: 400px;"></div>

3.后端

存取数据及返回页面

#chart.py
from django.shortcuts import render
from django.http import JsonResponse


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

def chart_bar(request):
    """构造柱状图的数据"""
    legend = ["销量", "业绩"]
    series_list = [
        {
            "name": '销量',
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20],
        },
        {
            "name": '业绩',
            "type": 'bar',
            "data": [53, 42, 36, 23, 10, 30],
        }
    ]
    x_axis = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

    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": 'IT部门'},
        {"value": 735, "name": '销售部门'},
        {"value": 580, "name": '摆烂部门'},
    ]
    result = {
        "status":True,
        "data":db_data_list,
    }
    return JsonResponse(result)

def chart_line(request):
    series_data = [820, 932, 901, 934, 1290, 1330, 1320]
    x_axis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    result={
        "status":True,
        "series_data":series_data,
        "x_axis":x_axis,
    }
    return JsonResponse(result)

4.前端

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘m1’));
// 指定图表的配置项和数据
var option ={…}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

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

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

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

                <div class="col-sm-8">
                    <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>

    </div>

{% endblock %}

{% block js %}
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script type="text/javascript">
        $(function () {
            initLine();
            initBar();
            initPie();
        })

        function initLine() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m1'));
            var option = {
                title: {
                    text: 'Stacked Line',
                    textAlign: "auto",
                    left: "center",
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            $.ajax({
                url: "/chart/line/",
                type: "get",
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        option.xAxis.data = res.x_axis;
                        option.series[0].data = res.series_data;
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                }
            })
        }

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

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '本月产品销量记录',
                    subtext: "五月",
                    textAlign: "auto",
                    left: "center",
                },
                tooltip: {},
                legend: {
                    data: [],
                    bottom: 0
                },
                xAxis: {},
                yAxis: {},
                series: []
            };
            $.ajax({
                url: "/chart/bar",
                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 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: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [],
                    }
                ]
            };

            $.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 %}