<th:block th:include="include :: header('百度ECharts')"/>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>折线图</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="graph_flot.html#">选项1</a>
</li>
<li><a href="graph_flot.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="echarts" id="echarts-line-chart"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
cache: false,
async: false,
url: "/dev/test/list",
type: "post",
// datatype: "json",
success: function (data) {
// var str, str1;var lineChartData=[91, 91, 95 , 93, 92, 93, 94];
// var lineChartDataX=['周一','周二','周三','周四','周五','周六','周日']
var MAX = 8;
var lineChartData=new Array();
var lineChartDataX=new Array();
var breakdownRate=new Array();
// console.log(data.myList[0]);
// console.log(data.dates[0]);
// console.log(data.breakdownRate[0]);
for (var i = 0; i < MAX; i++){
lineChartData[i] = data.myList[i];
lineChartDataX[i] = data.dates[i];
breakdownRate[i] = data.breakdownRate[i];
}
var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
var lineoption = {
title: {
text: '设备开机、停机率'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['设备开机率', '设备故障停机率']
},
grid: {
x: 40,
x2: 40,
y2: 24
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: lineChartDataX
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '设备开机率',
type: 'line',
data: lineChartData,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '设备故障停机率',
type: 'line',
data: breakdownRate,
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
lineChart.setOption(lineoption);
$(window).resize(lineChart.resize);
}
});
});
</script>