echarts 柱状折线图（折叠柱状图）月年汇总

最新推荐文章于 2023-12-08 00:25:13 发布
原创 最新推荐文章于 2023-12-08 00:25:13 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

文章讲述了如何使用Echarts库创建一个柱状图，其中包含按月度和年份划分的y轴，以及如何处理最后一列的年份数据，同时解释了x轴偏移设置的必要性以保持数据对齐

echarts柱状折线图 前几项是按月计算，最后一列是年份这种情况如何实现呢？

如下图

或者
在这里插入图片描述

代码如下：
图一代码：

<e-charts :option="option5" class="chart7"></e-charts>

const option5 =  {
        tooltip: {
            trigger: 'none'
        },
        lengend : {
            show: false
        },
        yAxis: [
            {
                type: 'value',
                show: true,
                id: '0',
                interval: 10,
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)',
                    }
                }, 
                axisLabel: {
                    show: false
                },
            },//y轴一 对应月份y轴
            {
                type: 'value',
                show: false,
                id: '1'
            }, //y轴二 对应年份y轴
            {
                type: 'value',
                show: false,
                id: '2'
            } //y轴三 对应折线图y轴
        ],
        xAxis: [
        {
            type: 'category',
            data: monthData, // ['7月','8月','9月','今年']
            axisLabel: {
                padding: [0,0,0,40],
                formatter: (() => {
                    return (value, index) => {
                        const isLast = value === '今年'
                        const label = isLast? `{a|${value}}` : `{b|${value}}`
                        return label
                        }})(),
                rich: {
                    a: {
                        padding: [0,0,0,20],
                        align: 'right',
                    },
                    b: {
                        padding: [0,0,0,-80],
                    }
                }
            },
            axisTick: {
                alignWithLabel: false
            } //x轴这样设置是因为数据单个对应，设置位置偏移对应x轴的文字 不然会整体看着往左边偏了
        }
        ],
        grid: {
            top: 30,
            bottom: 30,
            right: 50,
            left: 50,
        },
        series: [
            {
                type: 'bar',
                name: '受理',
                data: SLData1, // data 格式为  ['7月数据','8月数据','9月数据','']  最后一项固定为空 
                barMaxWidth: '10%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(63, 252, 185, 1)' },
                        { offset: 1, color: 'rgba(9, 157, 5, 1)' }
                    ])
                },
                label: {
                    position: 'top',
                    distance: 10,
                    show: true,
                    fontSize: '11',
                    color: '#fff'
                }
            },
            {
                type: 'bar',
                name: '设置',
                data: SZData1,  // data 格式为  ['7月数据','8月数据','9月数据','']  最后一项固定为空 
                barMaxWidth: '10%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 242, 178, 1)' },
                        { offset: 1, color: 'rgba(255, 107, 90, 1)' }
                    ])
                },
                label: {
                    position: 'top',
                    distance: 10,
                    show: true,
                    fontSize: '11',
                    color: '#fff'
                }
            },
            {
                type: 'bar',
                name: '139',
                data: OTData1,  // data 格式为  ['7月数据','8月数据','9月数据','']  最后一项固定为空 
                barMaxWidth: '10%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(90, 172, 255, 1)' },
                        { offset: 1, color: 'rgba(110, 68, 255, 1)' }
                    ])
                },
                label: {
                    position: 'top',
                    distance: 10,
                    show: true,
                    fontSize: '11',
                    color: '#fff'
                }
            },
             {
                type: 'bar',
                data: SLData, // data 格式为  ['','','','今年数据']  前三项固定为空 
                name: '受理',
                barMaxWidth: '10%',
                yAxisIndex: '2',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(63, 252, 185, 1)' },
                        { offset: 1, color: 'rgba(9, 157, 5, 1)' }
                    ])
                },
                label: {
                    position: 'top',
                    distance: 10,
                    show: true,
                    fontSize: '11',
                    color: '#fff'
                }
            },
            {
                type: 'bar',
                data: SZData,   // data 格式为  ['','','','今年数据']  前三项固定为空 
                name: '设置', 
                barMaxWidth: '10%',
                yAxisIndex: '2',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(255, 242, 178, 1)' },
                        { offset: 1, color: 'rgba(255, 107, 90, 1)' }
                    ])
                },
                label: {
                    position: 'top',
                    distance: 10,
                    show: true,
                    fontSize: '11',
                    color: '#fff'
                }
            },
            {
                type: 'bar',
                data: OTData,  // data 格式为  ['','','','今年数据']  前三项固定为空 
                name: '139',
                barMaxWidth: '10%',
                yAxisIndex: '2',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(90, 172, 255, 1)' },
                        { offset: 1, color: 'rgba(110, 68, 255, 1)' }
                    ])
                },
                 label: {
                    position: 'top',
                    distance: 10,
                    show: true,
                    fontSize: '11',
                    color: '#fff'
                }
            },
            {
                name: '受理',
                type: 'line',
                yAxisIndex: '1',
                xAxisIndex: '1',
                data: SLData1, // data 格式为  ['7月数据','8月数据','9月数据','']  最后一项固定为空 
                lineStyle: {
                    type:'dotted'  
                },  
                color: 'rgba(28, 191, 124, 1)'
            },
            {
                name: '设置',
                type: 'line',
                yAxisIndex: '1',
                xAxisIndex: '1',
                data: SZData1, // data 格式为  ['7月数据','8月数据','9月数据','']  最后一项固定为空 
                lineStyle: {
                    type:'dotted'  
                },
                color: 'rgba(252, 228, 168, 1)',
                
            },
            {
                name: '139',
                type: 'line', 
                yAxisIndex: '1',
                xAxisIndex: '1',
                data: OTData1, // data 格式为  ['7月数据','8月数据','9月数据','']  最后一项固定为空 
                lineStyle: {
                    type:'dotted'  
                },
                color: 'rgba(88, 168, 255, 1)'
            }
        ]
}
// 设置x轴偏移到柱状图正下方
option5.xAxis[1] = {
    type: 'value',
    max: option5.xAxis[0].data.length * 100,
    show: false
}

错误的显示如下 红色代表今年 ，就不是最后一列汇总今年的数据了
在这里插入图片描述

图二代码：

<div class="btm-zhu">
    <e-charts :option="option3" class="chart2"></e-charts>   
</div>

const option3 = computed(()=>{
    return {
        tooltip: {
            trigger: 'none'
        },
        color: ['rgba(31, 219, 181, .6)','#1B77E3'],
        yAxis: [
            {
                type: 'value',
                show: false,
                // max: 100,
                id: '0'
            },  //y轴一 对应月份y轴
            {
                type: 'value',
                show: false,
                id: '1'
            }, //y轴二 及年份对应y轴
            {
                type: 'value',
                show: false,
                max: 100,
                id: '2'
            } // y轴三
        ],
        grid: {
            top: 40,
            right: 0,
            x: 10,
            x2: 10,
            y2: 30
        },
        xAxis: {
            type: 'category',
            data: monthData // 此处对应 7月 ，8月， 9月， 今年 （x轴底部单位）
        },
        splitLine: {
            show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
            interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有        
            color: ['#ccc'], //color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
            width: 3, // 分隔线线宽
            type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: '本月',
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                type: 'bar',
                barMaxWidth: '24',
                barGap: '-110%',  
                z: 2,
                label: {
                    show: true,
                    fontSize: 10,
                    color: '#fff'
                },
                yAxisIndex: '0',
                data: mdData3  // data中存7 8 9 月数据1 
            },
            {
                type: 'bar',
                barMaxWidth: '30',
                z: 1,
                label: {
                    show: true,
                    position: 'top',
                    distance: '-20',
                    fontSize: 10,
                    color: '#fff'
                },
                yAxisIndex: '0',
                data: mdData4 // data中存7 8 9 月数据2
            },
            {
                type: 'bar',
                barMaxWidth: '24',
                barGap: '-110%',  
                z: 2,
                label: {
                    show: true,
                    fontSize: 10,
                    color: '#fff'
                },
                tooltip: {
                    show: true
                },
                yAxisIndex: '1',
                data: mdData1 // data中存 今年数据1
            },
            {
                type: 'bar',
                barMaxWidth: '30',
                z: 1,
                label: {
                    show: true,
                    position: 'top',
                    distance: '-20',
                    fontSize: 10,
                    zIndex: 10,
                    color: '#fff'
                },
                yAxisIndex: '1',
                data: mdData2 // data中存今年数据2
            },
            {
                type: 'bar',
                barMaxWidth: '50',
                label: {
                    show: true,
                    position: 'top',
                    distance: '0',
                    fontSize: 10,
                    color: '#fff',
                    formatter: (params)=> {
                        switch (params.dataIndex) {
                            case 0:
                                return ((mdData3[0]/mdData4[0])*100).toFixed(2)+"%";
                            case 1: 
                                return ((mdData3[1]/mdData4[1])*100).toFixed(2)+"%";
                            case 2: 
                                return ((mdData3[2]/mdData4[2])*100).toFixed(2)+"%";
                            case 3: 
                                return ((mdData1[3]/mdData2[3])*100).toFixed(2)+"%"
                        }
                        
                    }

                },
                itemStyle: {
                    color: 'transparent'
                },
                yAxisIndex: '2',
                data: [100,100,100,100], //data存百分比数据  透明的 不然没法显示顶部白色文字占比
            }
           
        ]
    }
})

主要是靠设置多个y轴及x轴， y轴是为了年份数据不按月份数据为单位，会出现年份数据特别高，月份数据特别矮的情况
x轴则是按所需展示月份进行设置 当label数据特别多时 可以采用重复设置series内数据的方式， 一个label设置为inner
一个设置为outside这种形式 当label在柱状图顶部并且位置一样的时候可以采用设置柱状图为透明底，高度为100%的形式。

解释一下为什么要设置x轴偏移：
是因为 数据和x轴对应情况下，年份数据设置为空 [‘7月数据’,‘8月数据’,‘9月数据’,’ '] echarts 会保留年份数据的空白位置宽度，和x轴对应起来就是歪的
在这里插入图片描述

红色年份数据为空字符串 保留位置的情况下 7月会往右偏，所以和7 8 9 月数据对应看起来是往右偏了，所以要设置x轴偏移调回来

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堆叠立体柱状图+混合折线+轮播
最新发布
weixin_72552407的博客
05-08 1137
堆叠 立体 柱状图
echarts漂亮的柱状图按月统计
07-20
基于echarts实现的漂亮的柱状图按月统计，彩色样式。
echarts按照时间显示柱状图_Echarts制作时间柱形离散分布图
weixin_33816685的博客
02-23 4981
话不多说， 先上效果：时间离散分布图制作步骤：1 找到echarts官方自定义原型图：官方自定义x-range原型图2 再观察源代码， 发现这块代码决定了数据的颜色显示， 从而出现x-range展示多个数据柱形的效果， 因为我们只需要显示一个数据， 所以就定义一种颜色即可， 因为需要按日期进行tooltip提示， 所以就按照实际单月日期填充数据， 颜色不变ok, 在不改变官方其他代码的情况下，...
pyecharts——绘制柱形图折线图
fyd4777leo的博客
12-08 1657
自2013年6月百度 EFE ( Excellent FrontEnd ）数据可视化团队研发的 ECharts 1.0发布到 GitHub 网站以来， ECharts 一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python 作为数据分析领域最受欢迎的语言，也加入 ECharts 的使用行列，并研发出方便 Python 开发者使用的数据可视化工具，由此便诞生了 pyecharts 库。
echarts 折线图 + 柱状图
热门推荐
aibujin的博客
05-16 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts——柱状图+折线图
月来better
07-18 1902
echarts——柱状图+折线图
echarts组合层叠柱状和折线并可缩放图
元元猿的博客
10-09 2752
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
echart实现3D柱状图效果
01-31
ECharts 是百度开发的一款开源的、轻量级的数据可视化工具，支持多种图表类型，如柱状图、折线图、饼图等，并且具有良好的交互性和自适应性。ECharts.gl 是 ECharts 的一个扩展库，专门用于3D图表的绘制，它基于 ...
MFC下MSChart柱状图、折线图、饼状图示例
07-17
MFC下MSChart控件就是为此目的设计的，它允许开发者在Visual Studio 2010环境中创建柱状图、折线图和饼状图。这个例子展示了如何在MFC应用中集成并使用MSChart控件。 MSChart控件是Microsoft Chart Controls的一...
Echarts 柱状图和折线图
01-26
百度开源图表插件Echarts示例。包含柱状图和折线图在一块的调用示例。
Echarts折线图和柱状图的使用
07-31
代码包括jsp文件，js文件，java文件。展示了Echarts中折线图和柱状图的使用，以及折线图的点击事情和自定义按钮等功能。
ECharts根据本周, 本月, 本年, 自定义展示折线图
qq_43340606的博客
06-23 7679
1. eChartsOptions配置 2. pickerOprions配置 (为了限制自定义日期的范围) 3. 配置数据, 并初始化折线图 4. 卸载时需要销毁实例 5. 大功告成
Echarts柱状折线图
不见长安见晨雾
07-05 917
<html> <head> <style> #EcharBox { margin: 0 auto; width: 95%; height: 400px; } </style> </head> <body> <div id="EcharBox"></div> </body> <s
Vue系列第八篇：echarts绘制柱状图和折线图
hsy12342611的专栏
08-06 1027
echarts绘制柱状图和折线图
echarts绘制一个柱状折线图
qq_43807473的博客
12-07 838
echarts绘制一个柱状图，柱状折线图。
笔记：Echarts - 柱状折线图
qq_39108466的博客
11-08 573
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>柱状折线图demo</title> <style> .section { width: 915px; border: 1px solid #ccc; }
ECharts 教程
W_H_M_2018的博客
04-08 564
ECharts 教程 ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 阅读本教程前，您需要了解的知识： 阅读本教程，您需要...
Echarts-柱状图、折线图
ygkyufcl的博客
01-11 336
options={ title: { text: title, left: '5%', top: '5', textStyle: { fontSize: 14, color: 'black' }, padding: 10 }, grid: { top: '25%',
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值