需求概要:画一个折线图,Y轴2个,series数据即折线有3条,意味着有2条折线公用一个Y轴。
关键点:yAxis为一个length为2个数组,series为一个length为3的数组,legend同样为3个。其中,series中需要设置yAxisIndex指定其使用哪一个y轴。nameTextStyle中的padding保证Y轴的name不与value刻度重叠。
options如下:
{
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": [
"Transaction Amount",
"Operating Profit",
"Operating Profit Rat"
]
},
"grid": {
"top": "10%",
"left": "5%",
"right": "5%",
"bottom": "3%",
"containLabel": true
},
"xAxis": [
{
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
],
"axisTick": {
"alignWithLabel": true
}
}
],
"yAxis": [
{
"type": "value",
"name": "Transaction Amount & Operating Profit",
"nameLocation": "middle",
"nameTextStyle": {
"padding": [
0,
0,
30,
0
],
"fontWeight": "bold",
"fontFamily": "Segoe-UI-Bold",
"fontSize": "13",
"color": "#232253"
}
},
{
"type": "value",
"name": "Operating Profit Ratio (In %)",
"nameLocation": "middle",
"nameTextStyle": {
"padding": [
30,
0,
0,
0
],
"fontWeight": "bold",
"fontFamily": "Segoe-UI-Bold",
"fontSize": "13",
"color": "#232253"
},
"position": "right"
}
],
"series": [
{
"name": "Transaction Amount",
"type": "line",
"smooth": true,
"data": [
120,
132,
101,
134,
90,
230,
210
]
},
{
"name": "Operating Profit",
"type": "line",
"smooth": true,
"data": [
220,
182,
191,
234,
290,
330,
310
]
},
{
"name": "Operating Profit Rat",
"yAxisIndex": 1,
"type": "line",
"smooth": true,
"data": [
150,
232,
201,
154,
190,
330,
410
]
}
]
}