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

最新推荐文章于 2024-07-04 10:50:41 发布

范天缘

最新推荐文章于 2024-07-04 10:50:41 发布

阅读量1.1k

点赞数

分类专栏： echarts 前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42821697/article/details/125789988

版权

前端同时被 2 个专栏收录

104 篇文章 5 订阅

订阅专栏

echarts

27 篇文章 2 订阅

订阅专栏

前提:业务中会碰到柱状图显示数值,折线图显示百分比，这时候是不能用一条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",
              },
            ],