<script src="${ctxStatic}/echarts-3.8.4/echarts/dist/echarts.js"></script>
<style type="text/css">
.lineChart {
backgroun:#FFF;
height: 300px;
width: 100% !important;
overflow: hidden;
padding : 4px;
margin-bottom: 4px;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
<%--折线图--%>
<script type="text/javascript">
$(document).ready(function() {
var url="${ctx}/answer/answerQuestionnaire/getChartDataFor12Month";
$.ajax({
url:url,
type:"POST",
beforeSend: function(){
},
success:function(data)
{
debugger;
var xAxisData = JSON.parse(data).data["xAxisData"];
var yAxisData = JSON.parse(data).data["yAxisData"];
var standardData = JSON.parse(data).data["standardData"];
//初始化echarts实例
var myChart = echarts.init(document.getElementById('lineChart'));
//使用制定的配置项和数据显示图表
var option=setOptions(xAxisData,yAxisData,standardData);
myChart.setOption(option);
}, error: function(){
alert('error');
}
});
function setOptions(xAxisData,yAxisData,standardData) {
var legends=['每月平均值'];
var series=[];
var colors = ['#5793f3', '#d14a61', '#675bba'];
series.push({
name:legends[0],
type:'line',
itemStyle : { normal: {label : {show: true}}},
smooth: true,
markLine: {
data: [
{
name: '标准值',
yAxis: 70
}
]
},
data: yAxisData
});
var option = {
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
data:legends
},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
formatter: function (params) {
return '每月平均值 ' + params.value
+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');
}
}
},
data: xAxisData
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return '每月平均值' + params.value
+ (params.seriesData.length ? ':' + params.seriesData[0].data : '');
}
}
},
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: series
};
return option;
}
});
</script>
<div id="lineChart" class="lineChart"></div>