Tip: After the article is written, the table of contents can be automatically generated. For how to generate it, please refer to the help document on the right.
Article directory
Preface
提示：这里可以添加本文要记录的大概内容：
For example: With the continuous development of artificial intelligence, machine learning technology is becoming more and more important. Many people have started learning machine learning. This article introduces the basic content of machine learning.
提示：以下是本篇文章正文内容，下面案例可供参考
1. What are echarts?
ECharts (ECharts Baidu Visualization) is an excellent open source data visualization library developed by Baidu for creating interactive and customizable charts and data visualizations. It supports a variety of chart types, including line charts, bar charts, pie charts, scatter charts, radar charts, heat maps, etc., and can be used to display various types of data.
2. Usage steps
1.Introduce CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
2. Set height & width
Before drawing, we need to prepare a DOM container with defined height and width for ECharts, otherwise the chart will not be displayed.
<div id="m1" style="width:100%;height: 400px;"></div>
3.Backend
Access data and return pages
#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.Front end
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('m1'));
// Specify the configuration items and data of the chart
var option ={…}
// Use the configuration just specified Items and data display charts.
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 %}