echart图表折线图的学习
echart图表折线图的学习
- 首先需要引入Echart
- Echart需要一个有宽高的正常容器
*我们接下来要在js中获取DOM然后进行下一步操作
ehcart.init()
*获取了DOM我们要开始设置Echart内容,然后放在DOM中
var option ={} 这个对象就是我们来设置echart内容的对象,所有操作都在这里进行
- 整体效果
要注意::javascript的type是 javascript
上面的就是基本配置,配置好后就可以上手学习了
下面展示一些 代码片
。
var myApp = echarts.init(document.getElementById('app'));
var option ={
title:{
text:'折线图',
subtext:'没啥写的',//副标题
x:'center'
},
legend:{
data:['llr'],
// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平)| 'vertical'(垂直)
orient:'horizontal' ,
// 默认放置全图居中 x坐标
// x:'left',
// 默认放置全图顶端 Y坐标
// y:'top'
},
grid:{//直角坐标系网格
top:'16%',// y:'16%'
left:'3%',
right:'8%',
bottom:'3%',
containLabel:true//grid区域是否包含坐标轴的刻度标签。
},
tooltip:{// 坐标轴指示器配置
// 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
// 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
// 'none'什么都不触发 trigger触发类型
trigger:'axis',//效果是一条线
position:['50%','50%'],//提示框信息出现的位置,默认是跟随鼠标显示
borderWidth:2,
padding:[5,10],
borderColor:'yellow',
textStyle:{
color:'red',
fontSize:15,
height:20,
lineHeight:20,
},
axisPointer:{
type:'cross',//X Y 指示器类型 默认直线 line 直线 shadow阴影 none无 cross十字准星
// axis:'y',//致使其坐标轴,默认auto x y radius angle auto 就是横竖选择(没事还是默认好)
snap:false,//指示器自动吸附 到点上 ,默认是自动
label:{//指示器文本样式
color:'#0f0',
// show
margin:3
},
animation:true,
animationThreshold:200
}
},
xAxis: {
name:'周几',
type: 'category',//类目轴 坐标轴类型
boundaryGap: true ,//坐标轴两边留白,就是数据不粘着Y轴显示
axisTick:{//底部 x 坐标轴刻度相关设置
show:true,
alignWithLabel:true,//在boundaryGap为true时才能生效 可以保证刻度线和标签对齐
interval:1,//隔一个刻度显示
length:10,//刻度长短
inside:true,//坐标轴刻度是否朝内 默认朝外
lineStyle:{
// color:'',
shadowBlur:10,//阴影 必须要有阴影颜色
shadowColor:'red',
shadowOffsetX:70,//阴影偏移距离
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{//坐标轴轴线设置 x轴线设置
// show:
lineStyle:{//坐标轴样式
// 设置x轴颜色
color:'#912CEE',
shadowBlur:10,
// shadowColor:'#0f0',
// opactiy:0.5
}
},
nameLocation:'center',//坐标轴名称 Name '周几' 位置 start center end
nameTextStyle:{//坐标轴名称样式设置
color:'red',
fontStyle:'italic',
fontSize:20,
// align:'left'//文字水平对齐方式,默认auto
// verticalAlign:'top',
// backgroundColor:'red'
},
nameGap:-100, //坐标轴名称与轴线之间的距离
inverse:true,//反向坐标轴
// splitNumber:10, //在类目轴中无效 坐标轴的分割段数
},
yAxis: {
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name:'访问量',
markArea:{//标域
data: [ [{
name: '标域',
// x:'20%', //标域位置
// y:'20%',
xAxis: 'Tue'
}, {
xAxis: 'Fri'
}], [{
name: 'Series.markArea',
xAxis: 'Sun'
}, {
xAxis: 'Sat'
}] ]
}
}]
}
myApp.setOption(option);
多学习多总结多挑战