3002/gitddsy3/templates/front/yq.html

{% extends 'front/base.html' %}
{% block main %}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style>
    .box{
      border-top:2px solid #f0f0f0;
      background:#fff;
      padding-top:15px;
    }
    li{
      display:block;
      margin:20px 6px;
    }
</style>
 <div class="boxcontent">
     <li style="border-bottom:2px solid #2f63ba;margin:20px;">疫情可视化</li>
 </div>
 <div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    $.get('/yqData',function(data){
       if(data.code==200){
          getEchartsDraw(data,'main',data.qznum,'bar');
          getEchartsDraw(data,'main2',data.zynum,'line');
        }else{
         swal("未能请求到数据!");
        }
    })

    function getEchartsDraw(data,dom,ydata,ttype){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(dom));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '疫情国内确诊人数柱状图'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: data.date
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: ttype,
                data: ydata
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }
    </script>
{% endblock %}