echarts折线图怎么设置左侧是数值，右侧是百分⽐
最近项⽬才开始使⽤ echarts 遇到了⼀些问题，记录下，先看下效果图(请忽略数据)：
⽂章⽬录
问题⼀：怎么设置y轴左边的数值，右侧是百分⽐？
解决⽅案
先说⼀下如何实现双y轴，echarts中有个控制y轴的属性叫yAxis，这个属性当我们⾥⾯只设置⼀个需求时，它可以为对象，当我们要设置很多需求时，它还可以是个数组，所以我们要设置双y轴，它就需要为数组，看代码：
yAxis:[
{
type:"value",
name:"对话/访问",
....
},
{
type:"value",
name:"对话率%",
....
}
]
,
这时候就有两个y轴了，⼀个为 访问/对话 另⼀个为 对话率，在series中我们要不同数据对应不同y轴显⽰，我们要通过 yAxisIndex 来控制要对应显⽰的y轴在yAxis数组中的下标，如：
{
name:"对话率",
yAxisIndex:1,
}
这个数据对应的就是下标为0的次数y轴，那么我们怎么才能让概率轴以百分⽐数显⽰呢，既然是控制y轴当然得在yAxis的对应对象⾥操作：
{
type:"value",
name:"对话率%",
min:0,
max:200,
axisLabel:{
show:true,
interval:"auto",
formatter:"{value}%"
},
}
问题⼆：echarts 折线图数据对应不上y轴是怎么回事？
解决⽅案
如果上⾯你设置了还是不⾏，那么可能是 stack 的值问题，需要修改每个 stack 都不⼀样，就不会叠加y轴，如下：
series:[
{
name:"访问次数",
stack:"访问次数",
...
},
{
name:"对话量",
stack:"对话量",
...
},
{
name:"对话率",
stack:"对话率",
...
}
]
完整代码demo
myChart.setOption({
title:{
text:"浏览-对话趋势",
left:"center"
},
tooltip:{
trigger:"axis"
},
legend:{
data:["访问次数","对话量","对话率"],
bottom:"5%"
},
grid:{
left:"2%",
right:"4%",
bottom:"15%",
containLabel:true
},
toolbox:{
feature:{
// 去掉图⽚下载
// saveAsImage: {}
}
},
xAxis:{
type:"category",
type:"category",
boundaryGap:false,
data:[
"08-30",
"08-31",
"09-01",
"09-02",
"09-03",
"09-04",
"09-05",
]
},
yAxis:[
{
type:"value",
name:"对话/访问",
// nameLocation:'center',            nameTextStyle:{
color:"#89A54E"
},
axisLabel:{
textStyle:{
color:"#89A54E"
}
},
axisLine:{
show:false
},
axisTick:{ show:false} },
{
nameTextStyle:{
color:"#4572A7"
},
type:"value",
name:"对话率%",
position:"right",
axisLine:{
show:false
},
axisTick:{ show:false},            min:0,
max:200,
axisLabel:{
textStyle:{
color:"#4572A7"
},
show:true,
interval:"auto",
formatter:"{value}%"
},
show:true
}
],
series:[
{
name:"访问次数",
type:"line",
stack:"访问次数",
smooth:true,
icon:"line",
itemStyle:{
normal:{
color:"#88e5ff",
lineStyle:{
color:"#88e5ff"
color:"#88e5ff"
}
}
},
areaStyle:{ normal:{ color:"#88e5ff"}},// 添加颜⾊区域            data:[0,0,0,134,0,0,0]
},
{
name:"对话量",
type:"line",
stack:"对话量",
smooth:true,
itemStyle:{
normal:{
color:"#a8f5a1",
lineStyle:{
color:"#a8f5a1"
}
}
},
areaStyle:{ normal:{ color:"#a8f5a1"}},
data:[220,182,191,234,290,330,310]
},
{
name:"对话率",
yAxisIndex:1,
textstyle
type:"line",
stack:"对话率",
smooth:true,
itemStyle:{
normal:{
color:"#b78ffc",
lineStyle:{
color:"#b78ffc"
}
}
},
areaStyle:{ normal:{ color:"#b78ffc"}},
data:[50,100,120,55,23,78,200]
}
]
});

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