echarts实现折线图代码-附图var option={
//标题
title : {
text: '上周销量情况(万)',
subtext: '2017年10⽉23⽇ - 2017年10⽉30⽇',
x : 'left',
//主标题⽂字配置
textStyle:{
fontWeight:'bold',
color: '#22252A',
fontSize:12,
fontFamily:'PingFangSC-Medium',
lineHeight:12
},
subtextStyle:{
fontFamily: 'PingFangSC-Medium',
fontSize: 12,
color: '#868BA1',
lineHeight: 12
}
},
grid:{
left:56,
top:78,
right:0,
width:'87%',
height:239,
},
//全局字体样式
textStyle:{
fontFamily: 'PingFangSC-Medium',
fontSize: 12,
color: '#858E96',
lineHeight: 12
},
//提⽰框组件
tooltip : {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0.70)',
borderColor:'#BFC2C5',
borderWidth:1,
textStyle:{
color: '#22252A',
}
},
//              calculable : true,
//x轴坐标
xAxis : {
show:true,
type : 'category',
//坐标轴刻度设置
axisLabel:{
margin:15,
},
//x坐标轴下刻度
axisTick:{
show:false,
},
//x坐标下数据点的位置设置
boundaryGap:false,
splitLine:{
show:false
},
//          轴线设置
axisLine:{
lineStyle:{
color:'rgba(91,147,211,0.30)',
}
},
data : ['周⼀','周⼆','周三','周四','周五','周六','周⽇'],              },
yAxis :{
type : 'value',
interval:20,
min:0,
max:100,
splitLine:{
lineStyle:{
color:['#EAECEF'],
}
},
//刻度
axisLabel:{
margin:15,
},
axisTick:{
show:false,
},
axisLine:{
lineStyle:{
color:'#fff',
width:0.5
}
}
},
series : [
{
name:'',
type:'line',
symbol:'circle',
symbolSize:8,
smooth:true,
itemStyle: {
normal: {
color: '#5B93D3',
borderColor:'#fff',
borderWidth:1
}
},
label:{
show:true,
},//提⽰框位置
data:data,
tooltip:{
position:function(p,dom,rect,size){
return [size.x-22,size.y+17];
},
padding:[12,9,12,10],
formatter: '{c0}万',
textStyle:{
fontWeight:'bold',
fontFamily: 'PingFangSC-Medium',
fontSize: 12,
color: '#22252A',
lineHeight: 12
}
},
lineStyle:{
normal:{
textstyle
width:1
}
},
areaStyle: {
normal: {
color:'rgba(91,147,211,0.30)',
opacity: 1
}
},
}
]
}
数据是从后台获取的，如有⼩伙伴需要实现这样的效果，可以修改data

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。