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