首页 > 其他 > 详细

echarts简单使用

时间:2020-01-09 09:07:28      阅读:91      评论:0      收藏:0      [点我收藏+]
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 %}

 

 

 

 

 

 

echarts简单使用

原文:https://www.cnblogs.com/g15009428458/p/12169133.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!