您的位置:首页 > 其它

Echart画折线图各标签讲解

2017-12-15 15:05 204 查看
option = {
title: {
text: '标签讲解',//图标标题
x: 'center'//水平居中
},
tooltip: {//提示框信息
axisPointer: {
type: 'cross'
}
},
legend: {//图例信息
data:[ 'A','B','C'],
top:40//图例位置(可设置top,bottom,left,right)
},
grid: {//图的位置
top: 100,
bottom: 50
},
xAxis: [  //x坐标轴信息
{
name : '(下方x轴数据单位)',//坐标单位
data: [  "2013", "2014", "2015", "2016"]//坐标上数值
},{
name : '(上方x轴数据单位)',
data: [ "2013", "2014", "2015", "2016"]
}
],
yAxis: [//y坐标轴信息
{
name : '(y轴数据单位)',//坐标单位
type: 'value',
min:600,//坐标起始值
max:1800  //坐标最大值
}
],
series: [
{//A曲线
name:'A',
type:'line',
itemStyle:{
normal:{ color: "#d14a61" } //坐标圆点的颜色
},
lineStyle:{
normal:{ width:4,color: "#d14a61"  }//线条的颜色及宽度
},
label: {//线条上的数字提示信息
normal: {
show: true,
position: 'top'
}
},
smooth: true,//线条平滑
data: [1180,1244,1207,1276]
},
{
name:'B',
type:'line',
itemStyle:{
normal:{ color: "#5793f3" }
},
lineStyle:{
normal:{width:4, color: "#5793f3"  }
},
label: {
normal: {
show: true,
position: 'bottom'
}
},
smooth: true,
data: [1074,1448,1125,1570]
},{
name:'C',
type:'line',
xAxisIndex: 1,
itemStyle:{
normal:{ color: "#675bba" }
},
lineStyle:{
normal:{width:4, color: "#675bba"  }
},
label: {
normal: {
show: true,
position: 'bottom'
}
},
smooth: true,
data: [887,997,854,711]
}
]
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Echart 折线图 标签