echarts 实现柱状图左右横向对比显示

最新推荐文章于 2024-06-11 09:15:43 发布

置顶 songywaa

最新推荐文章于 2024-06-11 09:15:43 发布

阅读量1w

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42288182/article/details/88887207

版权

前端专栏收录该内容

43 篇文章 2 订阅

订阅专栏

重点看代码中的注释：处理负半轴的数据显示，后台传负数，代码中处理显示时为正数

Alt

接下来直接上代码
（记得引入jquery和echarts的js文件哦！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>对比柱状图</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="barLeft" style="width:500px;height:500px;"></div>
    </div>
    <script type="text/javascript">
        var chart = echarts.init(document.getElementById('barLeft'));
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['支出','收入']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    splitLine:{
                　　　　show:false
                　　},
                    //横坐标的负半轴的  "坐标轴" 上显示是正数
                    axisLabel:{
                        show:true,//不显示坐标轴的数字
                        formatter:function(value){
                            if (value<0) {
                                return -value;
                            }
                        }
                    }
                }
            ],
            yAxis : [
                {
                    show:true,//纵坐标显示
                    type : 'category',
                    position:'left',//纵向坐标显示位置 可选为：left | right
                    axisTick : {show: false},
                    splitArea : {show : true},
                    splitLine:{
                　　　　show:false//网格线不显示
                　　 },
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            color: ['#66CC99','#CC66CC'],
            series : [

                {
                    name:'收入',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    data:[320, 302, 341, 374, 390, 450, 420]
                },
                {
                    name:'支出',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            /*
                            *处理横坐标负半轴这边的  "柱状"  显示的数
                            *后台传过来是负数，显示时是正数
                             */
                            formatter: function (value) {
                                if(value.data<0){
                                    return -value.data;
                                }
                            },
                        }
                    },
                    data:[-120, -132, -101, -134, -190, -230, -210]
                }
            ]
        };
        chart.setOption(option);
    </script>
</body>
</html>

songywaa

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
echarts 实现柱状图左右横向对比显示

重点看代码中的注释：处理负半轴的数据显示，后台传负数，代码中处理显示时为正数接下来直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>对比柱状图</title> <script type...
复制链接

扫一扫