ECharts折线图 - 爱码网

ECharts官方实例连接

https://echarts.baidu.com/examples/editor.html?c=line-stack

<html>
<head>
  <title>周统计数据分析</title>
  <meta name="decorator" content="grid-select"/>
  <script src="${staticPath}/uadmin/js/echarts.min.js"></script>
</head>
<body title="周统计数据分析">

     <div id="main" style="width: 1000px;height:500px;"></div>
    
 <script type="text/javascript">
        // 指定图表的配置项和数据
        var myChart = echarts.init(document.getElementById('main')); 
     	// 使用刚指定的配置项和数据显示图表。

        // 请求后台数据方法路径
$.post('${adminPath}/weeklyData').done(function(result) {
        var arrDate = [];
        weekInputFact = [],
        workTime = []
        for(var i = 0 ;i < result.length; i++) {
        // X轴数据
        arrDate.push(result[i].week);
        // Y轴数据
        weekInputFact.push(result[i].weekInputFact);
        workTime.push(result[i].workTime);
        }
        myChart.setOption({
        tooltip: {
        trigger: 'axis'
        },
        legend: {
        data: ['周投入成本', '周投入量']
        },
        grid: {
        left: '2%',
        right: '7%',
        bottom: '3%',
        containLabel: true
        },
        // X轴数据
        xAxis: {
        type: 'category',
        boundaryGap: false,
        data: arrDate
        },
        yAxis: {
        type: 'value'
        },
        series: [{
        name: '周投入成本',
        type: 'line',
        data: weekInputFact
        }, {
        name: '周投入量',
        type: 'line',
        data: workTime
        }]
        });
        console.log(result);
        }); 

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
效果图：

ECharts折线图