html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../bootstrapJ/global/plugins/echarts-2.2.7/build/dist/echarts-all.js">script>
head>
<body>
<div id="box" style="height:400px;width:600px;padding: 20px">div>
body>
<script>
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
var option = {
tooltip : {
show:true,
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985' //实现折线图鼠标移入显示的颜色
}
}
},
//调整折线图的位置
grid: {
top:"20px",
left: '2%',
right: '9%',
bottom: '5%',
containLabel: true
},
legend: {
orient: 'vertical',
// data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
data:[''],//echarts 不显示
},
toolbox: {
show : true,
feature : {
// mark : {show: true},
//dataView : {show: true, readOnly: false},
//magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
// restore : {show: true},
// saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
axisLine: {
symbol: ['none', 'arrow'], //设置x轴或y轴箭头
lineStyle: {
color: '#B5B5B5',
width: 2, //这里是为了突出显示加上的
}
},
//刻度是向内还是向外
axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//网格颜色
}
},
axisLabel:{ //调整x轴的lable
//interval:0, //按x轴的长度显示的刻度的个数 例如：本来显示20个刻度，因为x轴端只显示了10个，
rotate:0, //实现x轴的刻度的标识实现旋转，
textStyle:{
fontSize:10,// 让字体变大
color:"#B5B5B5"
}
},
name: "(日期)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //设置x轴的标题的位置
},
boundaryGap : false,
data:['2016-01','2016-07','2016-08','2016-09']
// data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'VALUE',
splitNumber:2,//所以将 splitNumber设成3
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: '#B5B5B5',
width: 2, //这里是为了突出显示加上的
}
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',//
color:'#FCFCFC'///网格颜色
}
},
//刻度是向内还是向外
axisTick:{
inside:true,
length:1,
},
axisLabel:{ //调整x轴的lable
textStyle:{
fontSize:10,// 让字体变大
color:"#B5B5B5"
}
},
name: "(人数)",
nameLocation:"end", //实现标题显示的位置
nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: 'top',
// align:"left",
padding:[50,0,-6,0]
},
//axisLine : {onZero: false},
/* boundaryGap : false,
axisLabel : {
formatter: '{value} '
},
data:['AA-','AA','AA+']*/
}
],
series : [
{
name:'搜索引擎',
type:'line',
stack: '总量',
smooth:true,
itemStyle : {
normal : {
color:'#5787EB',//设置折线折点颜色
lineStyle:{
color:'#5787EB'//设置折线线条颜色
}
}
},
data:[5820, 832, 801, 834]
//data:['aa','AA']
}
]
};
myChart.setOption(option);
script>
html>
