echarts简单使用

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