【原理】echarts双柱形图坐标轴数据差距太大，终于解决了

最新推荐文章于 2024-05-16 18:22:05 发布

一只红薯

最新推荐文章于 2024-05-16 18:22:05 发布

阅读量2.9w

点赞数 5

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

本文链接：https://blog.csdn.net/bridgethsin/article/details/78801046

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有需要用到echarts，接触到双柱形图，被坐标轴快玩死了。

差距一个数量级。几番探索明白了：

需要

yAxisIndex: 1,

官方文档： http://echarts.baidu.com/option.html#yAxis.gridIndex

源文件如下：

<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>农家书屋面积及藏书量双柱形图</title>
</head>

<body style="height:80%; width:100%;margin: 0 auto;">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script>

    <script>

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        // app.title = '嵌套环形图';

        option = {
            title: {
                text: '农家书屋面积及藏书量双柱形图',
                subtext: '面积总数：970.00(㎡) 总藏书：51490(本)',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['面积', '藏书'],
                bottom: 0
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['赵巷镇', '徐泾镇', '华新镇', '重固镇', '白鹤镇', '朱家角镇', '练塘镇', '金泽镇', '夏阳街道', '盈浦街道', '香花桥街道'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '面积(㎡)',
                    min: 0,
                    max: 1600,
                    interval: 400,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameLocation:'center',
                    nameGap:65
                },
                {
                    type: 'value',
                    name: '藏书(本)',
                    min: 0,
                    max: 60000,
                    // interval: 15000,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameLocation:'center',
                    nameGap:65,
                    nameRotate:-90
                }
            ],
            series: [
            {
                    name: '面积',
                    type: 'bar',
                    data: [229.6, 530, 684, 296, 707, 970, 796, 1366, 290, 60, 499],
                    barWidth: '30%'
                },
                {
                    name: '藏书',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [13061, 17500, 32178, 13273, 33075, 51490, 47863, 34493, 13500, 3200, 23498],
                    barWidth: '30%'
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>

作为一个前端菜鸟，有些官方的东西就算意思上明白了，还是不知道该怎么用。或者也根本不知道自己哪部分不会。

从实践中发现问题吧。

一只红薯

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【原理】echarts双柱形图坐标轴数据差距太大，终于解决了

有需要用到echarts，接触到双柱形图，被坐标轴快玩死了。差距一个数量级。几番探索明白了：需要yAxisIndex: 1,官方文档：http://echarts.baidu.com/option.html#yAxis.gridIndex源文件如下：农家书屋面积及藏书量双柱形图
复制链接

扫一扫