(第七周1)P65画图
简易柱状图
{% 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>
</div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">柱状图</div>
<div class="panel-body">
<div id="m1" style="width: 600px; 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">
Panel content
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="../../static/js/echarts.js"></script>
<script type="text/javascript">
$(function () {
initBar();
})
function initBar() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('m1'));
// 指定图表的配置项和数据
var option = {
title: {
text: '员工月度业绩',
textAlign: 'auto',
left: 'center',
},
tooltip: {},
legend: {
data: ['员工A', '员工B'],
bottom: 0,
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {},
series: [
{
name: '员工A',
type: 'bar',
data: [50, 20, 36, 10, 10, 20]
},
{
name: '员工B',
type: 'bar',
data: [100, 20, 80, 100, 10, 150]
},
]
};
// 获取后台数据的数据
$.ajax({
url: "/chart_bar/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据更新到图表中
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
}
</script>
{% endblock %}