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

发布于 2022-09-12 03:26:33 字数 3564 浏览 21 评论 0

问题描述

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'],
                }

`~~~~

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

如果没有你 2022-09-19 03:26:33

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文