用echarts做如图,x轴左右都是正数的倒立柱形图展示

最新推荐文章于 2024-05-24 11:26:40 发布
最新推荐文章于 2024-05-24 11:26:40 发布
阅读量5.2k 收藏 4
点赞数 1
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39936341/article/details/82384208
版权
本文介绍如何使用ECharts绘制两个并排显示的柱状图，分别展示调查数据与年末数据中男女不同年龄段的人口统计数据。通过JavaScript动态获取数据，并将部分数据转换为负值以便在左侧显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.建好存放图形的div

<div id="txzsTab" title="图形展示" bodyStyle="padding:0px 10px 0px 20px;" style="padding:0px;overflow:hidden;">
    <div id="lineChart" class="mini-col-6 text-l" style="height: 600px;"></div>
    <div id="lineChart2" class="mini-col-6 text-r" style="height: 600px;"></div>
</div>

2.js方法

<script type="text/javascript">
<!--图表展示-->
//获取ChartSeries数据
function getChartSeries() {
    var data = {};
    var gridData = grid.getData();
    var series = new Array();
    var series2 = new Array();
    var legendData = new Array();
    var legendData2 = new Array();

    legendData.push("调查数据男性人数");
    var serie0 = {};
    serie0.name = "调查数据男性人数";
    serie0.type = "bar";
    serie0.stack = "人数";
    serie0.label={
        normal:{
            show: false,
            formatter: function (value) {
                return Math.abs(value.data); //将负值转回正数
            }
        }
    }
    var serie0_data=new Array();

    legendData.push("调查数据女性人数");
    var serie1 = {};
    serie1.name = "调查数据女性人数";
    serie1.type = "bar";
    serie1.stack = "人数";
    var serie1_data=new Array();

    legendData2.push("年末数据男性人数");
    var serie2 = {};
    serie2.name = "年末数据男性人数";
    serie2.type = "bar";
    serie2.stack = "人数";
    serie2.label={
        normal:{
            show: false,
            formatter: function (value) {
                return Math.abs(value.data); //将负值转回正数
            }
        }
    }
    var serie2_data=new Array();

    legendData2.push("年末数据女性人数");
    var serie3 = {};
    serie3.name = "年末数据女性人数";
    serie3.type = "bar";
    serie3.stack = "人数";
    var serie3_data=new Array();

    serie0_data.push(0);
    serie0_data.push(0);
    serie0_data.push(0);
    serie0_data.push(-(gridData[1].dcnanxsl+gridData[2].dcnanxsl));

    serie1_data.push(0);
    serie1_data.push(0);
    serie1_data.push(0);
    serie1_data.push(gridData[1].dcnvxsl+gridData[2].dcnvxsl);

    serie2_data.push(0);
    serie2_data.push(0);
    serie2_data.push(0);
    serie2_data.push(-(gridData[1].nmnanxsl+gridData[2].nmnanxsl));

    serie3_data.push(0);
    serie3_data.push(0);
    serie3_data.push(0);
    serie3_data.push(gridData[1].nmnvxsl+gridData[2].nmnvxsl);

    for(var i=3;i<gridData.length-2;i++){
        serie0_data.push(-(gridData[i].dcnanxsl))
        serie1_data.push(gridData[i].dcnvxsl);
        serie2_data.push(-(gridData[i].nmnanxsl));
        serie3_data.push(gridData[i].nmnvxsl);
    }

    //把要放到左边的数据先变成负值
    serie0_data.push(-(gridData[gridData.length-2].dcnanxsl+gridData[gridData.length-1].dcnanxsl));
    serie1_data.push(gridData[gridData.length-2].dcnvxsl+gridData[gridData.length-1].dcnvxsl);
    serie2_data.push(-(gridData[gridData.length-2].nmnanxsl+gridData[gridData.length-1].nmnanxsl));
    serie3_data.push(gridData[gridData.length-2].nmnvxsl+gridData[gridData.length-1].nmnvxsl);

    serie0.data=serie0_data;
    series[0] = serie0;

    serie1.data=serie1_data;
    series[1] = serie1;

    serie2.data=serie2_data;
    series2[0] = serie2;

    serie3.data=serie3_data;
    series2[1] = serie3;

    data.series = series;
    data.series2 = series2;
    data.legendData = legendData;
    data.legendData2 = legendData2;
    return data;
}

//切换tab
tabs.on('activechanged',function (e) {
    if (e.index == 1) {
        if(grid.getTotalCount()>1){
            setEcharts(getChartSeries());
            setEcharts2(getChartSeries());
        }else{
            mini.showTips({
                content: "请先进行统计，再查看图表展示",
                state: "warning",
                x: "center",
                y: "center",
                timeout: 3000
            });
            return;
        }

    }
})

//调查数据
function setEcharts(obj) {
    if (obj !=null || obj !=''){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('lineChart'));
        myChart.clear();

        option = {
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show:true,
                        excludeComponents :['toolbox'],
                        pixelRatio: 2
                    }
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function(params){ // 改鼠标悬浮提示值格式
                    var relVal = params[0].name+"<br/>";
                    relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";
                    relVal += params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                    return relVal;
                }
            },
            legend: {
                data:obj.legendData
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    // min:-80,                    //自定义设置x轴最小值
                    // max:80,                  //自定义设置x轴最大值
                    // splitNumber:8,           //自定义设置x轴值间隔数量
                    axisLabel:{
                        formatter:function(value) {
                            return Math.abs(value);   //负数取绝对值变正数
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : ['0 to 4','5 to 9','10 to 14','15 to 19','20 to 24','25 to 29','30 to 34','35 t0 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65 to 69','70 to 74','75 to 79','80 and over ']
                }
            ],
            series : obj.series
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}

//年末数据
function setEcharts2(obj) {
    if (obj !=null || obj !=''){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('lineChart2'));
        myChart.clear();

        option = {
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show:true,
                        excludeComponents :['toolbox'],
                        pixelRatio: 2
                    }
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function(params){ // 改鼠标悬浮提示值格式
                    var relVal = params[0].name+"<br/>";
                    relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";
                    relVal += params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                    return relVal;
                }
            },
            legend: {
                data:obj.legendData2
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    // min:-80,                    //自定义设置x轴最小值
                    // max:80,                  //自定义设置x轴最大值
                    // splitNumber:8,           //自定义设置x轴值间隔数量
                    axisLabel:{
                        formatter:function(value) {
                            return Math.abs(value);   //负数取绝对值变正数
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : ['0 to 4','5 to 9','10 to 14','15 to 19','20 to 24','25 to 29','30 to 34','35 t0 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65 to 69','70 to 74','75 to 79','80 and over ']
                }
            ],
            series : obj.series2
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}

</script>
vue2/3 - echarts图表库的折线图X轴数据太多导致重叠在一起，echarts折线图柱形图等横轴x的数据很多无法排列开都堆在了一起（因X轴类目过多导致重叠显示不全的问题，详细解决办法教程）
高级前端工程师
01-23 1万+
vue2，vue3，echarts，图表库，折线图，柱形图，x轴数据过多导致坐标轴数据重叠，横轴X数据过多显示不下怎么办，echarts X轴数据过多导致重叠展示不全问题，解决ECharts 因X轴类目过多导致重叠显示不全的问题，Echarts X轴数据过多导致重叠显示不全的问题，echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全问题解决办法，ECharts X 轴标签过长导致文字重叠，关乎echarts中x轴数据太多,溢出的处理，echart X轴数据过多展示不全，echart
Echarts 展示——让柱状图在图表中展示，离开X轴
最新发布
虎康的博客
05-31 346
话不多说，直接源码展示。
Echarts混合图（柱状图、折线图）倒立对比展示
03-13
该文档是用于介绍echarts图形中的柱状图和折线图混合示例，因为官方文档事例中有，这里介绍的是柱状图与折线图Y轴上下对应，折线图正常显示，柱状图倒立展示，共用一个X轴的比较图例情况。
echarts柱形图倒立，两边都是正数
低调哥的博客
01-04 8167
//流失用户监控柱形图 var itemStyle = { normal: { }, emphasis: { barBorderWidth: 1, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0
echarts x轴左右都是正数 将负数转化为正数
不积跬步何以至千里
12-11 1479
原图 代码 option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter:function(params) { var relVal = params[0].name; for (var i = 0, l = params.length; i <
Echarts正负轴-柱形条形图
热门推荐
shzhanghuan的博客
09-16 3万+
Echarts正负轴-柱形 option = { title: { text: “生产监控系统”, subtext: “实时产能监控”, left: “center” }, tooltip : { trigger: ‘axis’, axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : ‘shadow’ // 默认为直线，可选为：‘li...
echarts正负柱形图设置x轴和tooltip显示值都为正数，自定义颜色显示，设置y轴显示单位
qq_52685664的博客
12-13 3923
option = { color:['#189dfe','#f0c219'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { const Total = Math.abs(params[0].value) +Math.abs(params[1].value) ...
Echarts正负条形图将x轴都设置成正数
qq_37916164的博客
05-24 1220
【代码】Echarts正负条形图将x轴都设置成正数。
vue使用echarts实现水平柱形图实例
10-14
在dtuDistributionCurve.js文件中，我们定义了柱形图的具体配置项option，其中包括了x轴、y轴的详细设置以及两组柱形图系列。每组柱形图系列中，可以通过itemStyle来定义柱子的样式，例如颜色、边框宽度等；通过...
Echarts 展示——实现将X轴放在图表顶部并且自动播放展示提示信息内容
虎康的博客
05-20 800
以下是一个简单的示例，演示了如何使用 ECharts 来创建一个柱状图，并将 Y 轴进行倒序排序：并且该案例中还添加了。使用 ECharts 来实现对 Y 轴的倒序排序时，可以通过设置 yAxis 的。如下图所示，实现柱状图中反转倒着绘制。
echart - 柱形图
Zerofishcoding的博客
03-11 1023
初始化柱状图 function initBar(category, data){ // srcipt标签式引入 //基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('bar')); var titleText = isStatis...
echarts正负极柱状图
花椒和蕊的博客
09-18 3483
<template> <div> <div class="headText">投资计划预警</div> <div class="bodyblock"> <div class="main2"> <div class="fxplain2" ref="fxplain_ref2" :style="{ height: zoomNum * 305 +.
echarts 柱状图数据颠倒
隔壁老王的博客
04-26 2439
yAxis: { inverse:true} //Y轴数据翻转。xAxis:{position: ‘top’} //x轴到顶部。
ECharts实现柱状图正负数显示在同一侧
huangfuyk.的博客
04-10 6543
想必大家工作中也有用到过ECharts，但是大部分的需求应该都是相对简单的展示，比如说使用柱状图时，当数值为正与负值时显示在两侧，如下这样（一左一右或一上一下）： 那么如果我想让他们无论正负均显示在同一侧呢？ 1、可参考如下简单示例： var data1 = [100, 200, 300, 400, 500, 600, 650]; // 真实值，用来控制柱状图的高低 var data2 = [-100, 200, -300, 400, -500, 600, -650]; // 显示值，用来显示在柱.
【echarts】柱状图坐标轴数据倒置
zhaojingj_的博客
10-18 3995
echarts 柱状图坐标轴数据倒置 xAxis:{position: 'top'} //让x轴在顶部 yAxis: { inverse:true} //让Y轴数据逆向
echarts实现正负轴柱状图
蜗牛~~
07-31 3068
【代码】echarts实现正负轴柱状图。
echarts柱状图实现左右横向对比
weixin_47194802的博客
05-06 1729
其实是两组数据，其中一组数据改为负数，然后 在展示的时候，在将负数取反。这里数据如果初始为正，先便利一遍加负号。第二处修改数据，转负为正。
echarts 柱状图 X轴 上下颠倒
H_Wnnnn的博客
12-02 1917
效果图: 代码: let xData = [ '开关电源', '铅酸电池', 'UPS设备', '普通空调', '机房环境', '智能电表' ]; let yData = ['-111', '-100', '-95', '-80', '-60', '-45']; option = { backgroundColor: '#080938', grid: { top: '10%', left: '-5%', bottom: '5%',
34Echarts - 柱状图（正负条形图）
阿甘兄
04-30 7565
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts柱形图 设置X轴字体大小
07-27
要设置 Echarts 柱形图的 X 轴字体大小，你可以使用 Echarts 提供的 `xAxis.axisLabel.fontSize` 属性来实现。以下是一个示例配置代码： ```javascript option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], axisLabel: { fontSize: 12 // 设置 X 轴字体大小为 12 } }, yAxis: { type: 'value' }, series: [{ data: [10, 20, 30, 40, 50], type: 'bar' }] }; ``` 在上述代码中，通过 `xAxis.axisLabel.fontSize` 属性设置了 X 轴标签的字体大小为 12。你可以根据需要调整该数值来适配你的图表样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值