echarts简单使用
属于后端给数据,前端图表渲染
前端页面简单的数据统计效果图
{% extends "start.html" %}
{% block content %}
<div class="row">
<div class="parge-header">
<h1>近一年每月接口数量走势图</h1>
<div id="p5" style="max-width: 1000px;width: 900px;height:500px;max-height: 800px;"></div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
var myChart = echarts.init(document.getElementById('p5'));
myChart.setOption(option);
</script>
{% endblock %}