Echart畫折線圖各標籤講解
阿新 • • 發佈:2019-02-10
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]
}
]
};