<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我是echarts</title>
</head>
<body>
<div id='main' style='width: 100%; height: 450px;'></div>
</body>
<script src="http://guangzhou.auto.qq.com/js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script>
getEchart();
function getEchart(){
var dataX =["2018-2-26","2018-2-24","2018-2-22","2018-2-20","2018-2-18","2018-2-16","2018-2-14","2018-2-12","2018-2-10","2018-2-8","2018-2-6","2018-2-4"],
dataY1=[523, 700, 825, 620, 873, 943, 432, 721,201,340,462,243],
dataY2=[175, 260, 345, 592, 320, 431, 142, 189,80,150,124,89];
var myChart=echarts.init(document.getElementById('main'));
var option = {
title:{
},grid:{
bottom: 70
},toolbox:{
show:true,
right:160,
feature:{
magicType: {
type: ['line', 'bar']
},
saveAsImage:{},
dataView:{},
restore: {},
}
},tooltip:{
trigger: 'axis'
},dataZoom: [
{
type:'slider',
show: true,
realtime: true,
start: 0,
end: 50
},
{
type: 'inside',
show: true,
realtime: true,
start: 0,
end: 50
}
],legend:{
data:['PV','报名人数'],
itemGap:30,
itemWidth:70,
itemHeight:12,
}, xAxis:{
data: dataX,
},yAxis:[{
name:'PV',
nameTextStyle:{
color:'#666666',
fontWeight:'bolder',
fontSize:14
},
axisLabel:{
color:'#333333',
fontSize:14
}
},{
name:'报名人数',
nameTextStyle:{
color:'#666666',
fontWeight:'blod',
fontSize:14
}
}],series:[
{
name: 'PV',
type: 'line',
data: dataY1,
yAxisIndex: 0,
symbol:'circle',
symbolSize:9,
//拐点标志样式
itemStyle: {
normal: {
color:'#FF5100',
lineStyle:{color:'#FF5100',width:'3'},
areaStyle:{type:'default'}
}
},
//渐变橙白
areaStyle:{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,213,193,0.3)'
}, {
offset: 0.8,
color: 'rgba(255,255,255,0.2)'
}])
}
}
},{
name: '报名人数',
type: 'line',
data: dataY2,
yAxisIndex: 1,
symbol:'circle',
symbolSize:9,
//拐点标志样式
itemStyle: {
normal: {
color:'#2B9BF8',
lineStyle:{color:'#2B9BF8',width:'3'},
areaStyle:{type:'default'}
}
},
//渐变蓝白
areaStyle:{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(189,221,248,1)'
}, {
offset: 0.8,
color: 'rgba(255,255,255,0.2)'
}])
}
}
}]
};
myChart.setOption(option);
}
</script>
</html>