200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > echarts图表柱状图和折线图使用不同的y轴

echarts图表柱状图和折线图使用不同的y轴

时间:2020-07-03 16:38:33

相关推荐

echarts图表柱状图和折线图使用不同的y轴

前提:业务中会碰到柱状图显示数值,折线图显示百分比,这时候是不能用一条y轴的,会导致折线图都在最底下

这时候我们认识一下yAxisIndex属性

yAxisindex是定义当前图形使用哪个y轴的索引,从0开始,yAxis属性必须为数组才生效.。

yAxis要定义两条

yAxis: [{type: "value",show: true,},{type: "value",show: true,min: 0,max: 100,axisLabel: {formatter: "{value} %",},},],

图形数据定义yAxis索引

series: [{name: "结婚",type: "bar",data: data2,color: "#1DA8DD",},{name: "离婚",type: "bar",data: data3,yAxisIndex: 0,color: "#007DE2",},{name: "离结比",type: "line",data: data1,yAxisIndex: 1, //看这里。。。。。smooth: true,color: "#3888fa",},],

显示成功

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。