191 lines
5.8 KiB
HTML
191 lines
5.8 KiB
HTML
{% extends 'layout.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:400px;"></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">
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<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.min.js' %}"></script>
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
initBar(); // 柱状图
|
||
initPie(); //饼图
|
||
initLine(); // 折线图
|
||
})
|
||
|
||
/**
|
||
* 初如化柱状图
|
||
* **/
|
||
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请求到后端取数据
|
||
$.ajax({
|
||
url: '/chart/bar/',
|
||
type: 'get',
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
// 将后端返回的数据，更新到option中
|
||
option.legend.data = res.data.data_list;
|
||
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;
|
||
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请求到后端取数据
|
||
$.ajax({
|
||
url: '/chart/pie/',
|
||
type: 'get',
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
// 将后端返回的数据，更新到option中
|
||
option.series[0].data = res.data;
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
/**
|
||
* 初如化折线图
|
||
* **/
|
||
function initLine() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('m1'));
|
||
|
||
// 指定图表的配置项和数据
|
||
var option;
|
||
option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [], // 后端获取
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
data: [],
|
||
type: 'line',
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
|
||
// 发起ajax请求到后端取数据
|
||
$.ajax({
|
||
url: '/chart/line/',
|
||
type: 'get',
|
||
dataType: 'JSON',
|
||
success: function (res) {
|
||
// 将后端返回的数据，更新到option中
|
||
console.log(res)
|
||
option.xAxis.data = res.data.xaxis
|
||
option.series[0].data = res.data.series_list
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
|
||
</script>
|
||
{% endblock %} |