Echarts学习折线图

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="${ctx!}/echarts-3.8.0/dist/echarts.min.js"></script>
</head>
<body>

<h3 style="margin-left:5%">Echarts拆线图</h3>

//首先需要一个容器

</div>

</div>
<script type="text/javascript">

$(document).ready(function () {

    // 初始化echarts实例

var thirdChart = echarts.init(document.getElementById("third"));

    // 指定图表的配置项和数据

var option = {
tooltip: {
trigger: 'axis'
},
legend: { // 图例的相关配置
data:['正常','攻击'],
textStyle:{
fontSize:15,
color:'#fff'
},
itemWidth:40,//宽
itemHeight:13,//高
itemGap:5//图例间隔

grid: {

left: '3%',
right: '4%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['10','20','30','40','50','60','70','80','90','100','110'],
axisLine: {
lineStyle: {
type: 'solid',
color: '#CECECE',
width:'1'
}
},
axisLabel:{//调整x轴文字的倾斜度
rotate: 30,
interval:0
},
},
yAxis: {
type: 'value',
splitLine:{show: true},
splitArea : {show : false},
axisLine: {
lineStyle: {
type: 'solid',
color:'#CECECE',
width:'1'
}
},
},
series: [
{
name:'正常',
type:'line',
data:[],
color:['#66aede'],
smooth:0.3
},
{
name:'参照',
type:'line',
data:[10,20,30,40,50,60,70,80,90,100],
symbol:'none',
itemStyle: {
normal: {
lineStyle: {
type: 'dash',
color: '#FFF',
width: 2, }
},
}
},
{
name:'攻击',
type:'line',
data:[],
color:['#FEE48D'],
smooth:0.3
}
]
};

thirdChart.setOption(option);

// 从服务端获取数据动态加载图表。

$.ajax({
type: "GET",
dataType: "json",
url: "${ctx!}/api/v1/liftview",
success: function(data){
if(data.httpCode==200){
thirdChart.setOption({
series: [{
name: '正常',
data: data.data["0"]
}, {
name: '攻击',
data: data.data["1"]
}]
});
}
}
});

</script>

</div>
</div>
</body>
</html> Echarts学习折线图

Echarts学习 折线图

相关推荐