【web开发】10、数据统计(echarts)--柱状图、折线图、饼图
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、echarts是什么？
- 二、使用步骤
-
- 1.引入CDN
- 2.设置高度&宽度
- 3.后端
- 4.前端
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、echarts是什么？
ECharts（ECharts Baidu Visualization）是一个由百度开发的优秀的开源数据可视化库，用于创建交互性和可定制性强的图表和数据可视化。它支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、热力图等，可以用于展示各种不同类型的数据。
二、使用步骤
1.引入CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 %}