Echarts学习 折线图
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="${ctx!}/echarts-3.8.0/dist/echarts.min.js"></script>
</head>
<body>
<script type="text/javascript">
tooltip: {
trigger: 'axis'
},
legend: { // 图例的相关配置
data:['正常','攻击'],
textStyle:{
fontSize:15,
color:'#fff'
},
itemWidth:40,//宽
itemHeight:13,//高
itemGap:5//图例间隔
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
}
]
};
</div>
</body>
</html>
<html>
<head>
<title></title>
<script src="${ctx!}/echarts-3.8.0/dist/echarts.min.js"></script>
</head>
<body>
<div class="bodymain">
<div class="row" style="margin:0">
<div class="col-xs-6" style="margin-right:1.5%">
<h3 style="margin-left:5%">Echarts拆线图</h3>
//首先需要一个容器
<div id="third" style="width:100%;height:356px;"></div>
</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>