echarts柱状图使用dataset,如何让两种数据对应两个y轴,并且高度也是跟随对应的y轴变化

1301588656
  • 26

问题描述

echarts柱状图使用dataset,一种是图中蓝色的长方形,想要对应右侧的y轴,另一种是黄色的长方形想要对应左侧的y轴。现在双Y轴都已经设置好,但是如何让两种数据对应两个y轴,并且高度也是跟随对应的y轴变化。(例如最高的蓝色长方形数据已经是200了,但它的高度其实是看的左侧的y轴,所以并没有到顶)

问题截图

Snipaste_2020-06-28_11-21-15.png

option配置项代码如下

option = {
    legend: {
        right: '10%'
    },
    tooltip: {},
    dataset: {
        dimensions: ['name', 'num', 'worth'],
        source: data
    },
    xAxis: { type: 'category' },
    yAxis: [
        {
            name: '价值',
            type: 'value',
            min: 0,
            max: 400,
            interval: Math.ceil(400 / 5),
            axisLabel: {
                formatter: '{value}k' //自定义y轴坐标轴的刻度标签
            }
        },
        {
            name: '数量',
            type: 'value',
            min: 0,
            max: 200,
            interval: Math.ceil(200 / 5),
            axisLabel: {
                formatter: '{value}'
            }
        },

    ],
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        { name: '数量', type: 'bar', barWidth: 30, },
        { name: '价值', type: 'bar', barWidth: 30, },
    ],
    color: ['#3485ef', '#ef9134'],
}

2020-06-29
问题解决了,加一个 yAxisIndex就好了,附上代码

option = {

                    // title:{
                    //   text:'物资数量统计',
                    //     left:'8%',
                    //     padding:[
                    //         0,
                    //         0,
                    //         0,
                    //
                    //     ]
                    // },
                    legend: {
                        right:'10%'
                    },
                    tooltip: {},
                    dataset: {
                        dimensions: ['name', 'num', 'worth'],
                        source: data
                    },
                    xAxis: {type: 'category'},
                    yAxis: [
                        {
                            name:'价值',
                            type:'value',
                            min: 0,
                            max: 400,
                            interval: Math.ceil(400 / 5),
                            axisLabel: {
                                formatter: '{value}k' //自定义y轴坐标轴的刻度标签
                            }
                        },
                        {
                            name:'数量',
                            type:'value',
                            min: 0,
                            max: 200,
                            interval: Math.ceil(200 / 5),
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },

                    ],
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {name: '数量', type: 'bar',barWidth : 30,yAxisIndex:1}, //关键修改地方
                        {name: '价值', type: 'bar',barWidth : 30,yAxisIndex:0}, //关键修改地方
                    ],
                    color:
                        ['#3485ef', '#ef9134'],
                }

`~~~~

回复
阅读 1.3k
1 个回答
✓ 已被采纳

series 的第一项里,加个 yAxisIndex: 1 指定一下 Y 轴就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏