【echarts】ECharts柱状图(横向+双Y轴)-部分配置项

转载 已于 2023-03-24 16:59:35 修改 · 3.4k 阅读 · 16 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/weixin_46917162/article/details/119844275
文章标签：

#echarts #前端 #javascript

于 2022-10-13 07:52:41 首次发布
本文介绍如何使用ECharts配置横向柱状图及双Y轴图表，并提供具体配置代码示例，包括自定义提示信息、图例设置等，适用于网页数据可视化需求。

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

@TOC

。

1.横向柱状图+自定义提示信息

1.1效果图:

在这里插入图片描述
在这里插入图片描述
2.option的配置:

var option1 = {
                //提示框，默认显示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
                    },
                    // 控制提示格式
                    formatter: function(param){
                        return `${param[0].axisValue}: <br/>${param[0].value}人`
                    }
                },
                //控制直角坐标系与容器上下左右的距离
                grid: {
                    left: '2%',
                    right: '12%',
                    bottom: '0',
                    top: '4%',
                    containLabel: true,//gid区域是否包含坐标轴的刻度标签。
                },
                // x轴（指的是水平的那条线）相关配置
                xAxis: [
                    {
                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            // inside: true, // 标签是否朝内,默认false
                            interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: 0, // 旋转角度
                            margin: 5, // 刻度标签与轴线之间的距离
                            color: '#000',  // 标签颜色默认取轴线的颜色 
                            fontSize: 12//标签字号
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为true
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示,默认false
                            lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                            }
                        },
                    }
                ],
                // y轴（垂直的那条线）设置
                yAxis: [
                    {
                        type: 'category',
                        data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            inside: false, // 是否朝内
                            color: '#000',
                            fontSize: 12
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为false
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示
                            lineStyle: {
                            // color: '#FFFFFF',
                            width: 1,
                            type: 'solid'
                            }
                        },
                        boundaryGap: true,//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
                        axisTick: {//坐标轴刻度相关
                            alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
                        },
                        inverse:true,//翻转y轴数据
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                        barWidth: 10,//柱子宽度
                        data: [10,50,30,26,17,47],//值数据，与类型数据一一对应
                        itemStyle: {
                            // emphasis: {
                            //     barBorderRadius: 7,
                            // },
                            normal: {//柱子相关设置
                                barBorderRadius: [0,7,7,0],//设置柱子圆角;左上-右上-右下-左下
                                label: {//柱子标签相关
                                    show: true,
                                    position: 'right',//柱子标签位置
                                    textStyle: {//柱子标签文本设置
                                        color: '#000',
                                        fontSize: 12
                                    },
                                },
                                color: new echarts.graphic.LinearGradient(//柱子加渐变色
                                    0, 0, 1, 0,
                                    [
                                        {offset: 0, color: '#F9456D'},//柱图渐变色
                                        // {offset: 0.5, color: '#44C0C1'},//柱图渐变色
                                        {offset: 1, color: '#FDEEB0'},//柱图渐变色
                                    ]
                                )
                            },
                        }
                    }
                ],
            };

2.双Y轴+图例

在这里插入图片描述
在这里插入图片描述
2.2option的配置:

var option1 = {
                //提示框，默认显示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                //控制直角坐标系与容器上下左右的距离
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '15%',
                    top: '14%',
                    containLabel: true,//gid区域是否包含坐标轴的刻度标签。
                },
                //图例相关
                legend: {
                    top:'90%',
                    left:'center',
                    data:['喜爱人数','实际运动人数'],//与series两个对象中的name对应
                    itemGap: 15, // 图例间隔
                    itemWidth: 8, //图例大小(小方块)
                    itemHeight: 8, //图例大小
                    orient: 'vertical',// horizontal   vertical
                    icon: "rectangle", //图例的形状
                    textStyle: { //图例文字的样式
                        color: '#000',
                        fontSize: 12
                    },
                },
                // x轴（指的是水平的那条线）相关配置
                xAxis: [
                    {
                        type: 'category',
                        data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            inside: false, // 是否朝内
                            color: '#000',
                            fontSize: 12,
                            interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为false
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示
                            lineStyle: {
                            // color: '#FFFFFF',
                            width: 1,
                            type: 'solid'
                            }
                        },
                        boundaryGap: 'true',//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
                        axisTick: {//坐标轴刻度相关
                            alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
                        },
                        inverse:true,//翻转y轴数据
                    }
                ],
                // y轴（垂直的那条线）设置
                yAxis: [
                    {
                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            // inside: true, // 标签是否朝内,默认false
                            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: 0, // 旋转角度
                            margin: 5, // 刻度标签与轴线之间的距离
                            color: '#000',  // 标签颜色默认取轴线的颜色 
                            fontSize: 12//标签字号
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为true
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示,默认false
                            lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                            }
                        },
                    },
                    {
                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                        axisLabel: {    // 坐标轴标签
                            show: true,  // 是否显示
                            // inside: true, // 标签是否朝内,默认false
                            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            rotate: 0, // 旋转角度
                            margin: 5, // 刻度标签与轴线之间的距离
                            color: '#000',  // 标签颜色默认取轴线的颜色 
                            fontSize: 12//标签字号
                        },
                        splitLine: {    // 网格线
                            show: false  // 是否显示，默认为true
                        },
                        axisLine: {    // 坐标轴 轴线
                            show: true,  // 是否显示,默认false
                            lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '喜爱人数',
                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                        barWidth: 10,//柱子宽度
                        data: [10,50,30,26,17,47],//值数据，与类型数据一一对应
                        yAxisIndex: 0,//数据的刻度对应左边
                        itemStyle: {
                            // emphasis: {
                            //     barBorderRadius: 7,
                            // },
                            normal: {//柱子相关设置
                                // barBorderRadius: [7,7,0,0],//设置柱子圆角;左上-右上-右下-左下
                                color: '#F9456D'
                            },
                        }
                    },
                    {
                        name: '实际运动人数',
                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                        barWidth: 10,//柱子宽度
                        data: [18,30,20,40,27,17],//值数据，与类型数据一一对应
                        yAxisIndex: 1,//数据的刻度对应右边
                        itemStyle: {
                            // emphasis: {
                            //     barBorderRadius: 7,
                            // },
                            normal: {//柱子相关设置
                                color: '#497EF2'
                            },
                        }
                    }
                ],
            };

3.下次遇到需要其他配置的可以查看W3Cschool的教程:

https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html

4.测试效果

在这里插入图片描述

Echarts横向柱状图配置
a1060213615的博客
10-17 2883
主要修改的option为yAxis,series y轴本来是value轴,现在改为category轴 灰色的bar的data全设为1 getBarOption: function (titleText, barName, barData) { var that = this var option = { title: { text: titleText, left: "left", top: 0, paddin
echarts_柱状图+漏斗图
qq_43260366的博客
07-14 1894
若是想要图形一直是三角形，可以将value值做成递减，在data中添加另一个属性来表示真正的数值（注：若是后端的返回值不是按照顺序返回的，需要先排序！如上图，仅需要修改‘衬衫’的字体，那么data中第一个元素为Object类型，其余元素类型为String类型。属性控制的，若是每个数据的data.value属性的递减/递增不是成比例的就会出线漏斗图三角形变形的情况。在看案例时，发现图表是一个“三角形”的形状，但是在我们实际使用时会发现图表存在变形的情况。如上图，做一个横向柱状图，后端返回的数据是。
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
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自定义图表--柱状图-横向
宏斌的博客
04-29 519
要将label全部固定到最右侧： 为每个label设置不同的偏移距离。在data中加入label的配置 根据现在的值生成距离右侧的偏移。xAxis和yAxis对调。
Echarts横向柱形图
weixin_43273592的博客
03-18 2093
实际上就是设置两个y轴，第一个显示底色柱子，另一个只显示真实数据的柱子,在这里只显示y轴,x轴不显示..
Echarts 横向柱状图
HelloWord176的博客
01-29 1万+
实例图片： 横向显示将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 placeCharts() { let myChart = this.$echarts.init(sportIMg); myChart.setOption({ grid: { left: "15", containLabel: true, }, xAxis:
echarts——横向柱状图
xiaoququ的博客
12-15 1万+
功能描述 全屏横向柱状图 从小到大排序，每次显示5条，每3秒切换循环显示 鼠标移入停止切换，鼠标移出继续切换 柱状图组件源码 <template> <div class="w100 h100"> <div ref="bar" class="w100 h100"></div> </div> </template> <script> import { ququ } from "../../public/s.
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
配置项中，`series`部分定义了柱状图的各项属性，比如颜色、数据值等。`xAxis`和`yAxis`用于设置坐标轴的相关参数，如刻度、标签等。动态排名可以通过定时器（`setInterval`）定期更新数据，然后调用`myChart....
echarts横向堆叠柱状图.zip
10-11
与传统的垂直堆叠柱状图相比，横向堆叠柱状图将X轴作为分类轴，Y轴作为数值轴，使数据更容易在水平方向上比较。 描述中提到“设置堆叠(stack)”，这是关键所在。在 ECharts 中，堆叠效果是通过配置 `series` 中的 `...
解决echarts 一条柱状图显示两个值,类似进度条的问题
10-15
在ECharts图表库中，创建一个柱状图来同时显示两个值，通常是为了展示数据的对比或者进度。这里的问题是需要让柱状图看起来像一个进度条，展示两个不同的数值，一个代表整体进度，另一个代表特定阶段的进度。通过...
echarts - 横向柱状图
qq_40905132的博客
02-24 4977
echarts配置：option我是放置在data内部，然后再动态获取y轴和数值(series)的数据再进行图表的渲染。涉及点：横向柱状图、不显示x轴标签、柱子渐变色、数量及单位显示在柱子内部。最近项目涉及好几种echarts的图表，特此记录一下。
Echarts绘制横向柱状图(圆角+渐变)
热门推荐
Maxwell
06-04 6万+
Echarts绘制横向柱状图(圆角+渐变)效果图遇到的坑 注意: 不要使用官网目前最新版本 3.6.1 , 使用3.6.x版本都不能实现圆角效果.经过测试, 可以使用3.5.4的版本. 若使用3.x以下的版本将不能实现颜色渐变. 重要的配置 横向显示 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 xAxis: [{
echarts 横向柱状图 以及dataZoom属性
敲代码无敌小奶龙的博客
11-08 1919
echarts 横向柱状图 以及dataZoom属性
Echarts之横向柱状图
qq_45395640的博客
03-26 399
https://gallery.echartsjs.com/editor.html?c=xhmv-1o6XS
X轴、Y轴label文字过长的四种处理方式
LzzMandy的博客
08-29 1万+
1、倾斜显示 2、换行显示 3、竖直显示 4、隔两行显示 5、源码 var axisLabel1 = { // 方法1：倾斜显示 interval: 0, //强制全部显示，1表示隔一个；2隔两个 rotate: "45", //文字倾斜的角度 }; var axisLabel2 = { // 方法2：换行显示 interva...
echarts 横向柱状图
云
08-08 5万+
【代码】echarts 横向柱状图。
echarts横向柱状图y轴文字显示不全
最新发布
05-07
<think>好的，我现在需要解决用户在ECharts横向柱状图中遇到的Y轴文字显示不全的问题。首先，我要回想一下ECharts的相关配置，尤其是Y轴的设置。Y轴文字显示不全通常是因为空间不足，导致文字被截断或者溢出。可能的原因有几个方面： 1. **Y轴标签的宽度不足**：默认情况下，ECharts可能会给Y轴分配固定的宽度，如果文字较长，就会被截断。这时候需要调整grid的left属性，留出足够的空间给Y轴标签。 2. **文字样式设置**：比如字体大小过大或者没有换行，导致单行文字过长。可能需要调整字体大小或者启用换行。 3. **使用省略号代替过长文字**：如果空间实在有限，可以考虑截断文字并用省略号显示，类似于引用[2]中提到的方法，但这里可能需要应用到Y轴的formatter上。 接下来，我需要逐一考虑这些可能性，并提供对应的解决方案。根据引用[1]中的例子，用户之前可能尝试过调整grid的left和right来定位标签，但这次的问题是关于Y轴文字显示，可能需要类似的思路，调整grid的left值，确保Y轴有足够的空间。 另外，用户提到的是横向柱状图，Y轴通常是类目轴，位于左侧。所以，调整grid.left的值，增加左侧的空白区域，可以让Y轴的文字有更多空间显示。例如，将grid.left设置为更大的百分比，比如30%，而不是默认的10%或自动。 同时，检查Y轴的配置项，如axisLabel，是否有设置width、overflow、或者formatter来处理文字显示。例如，使用formatter来截断过长的文字，添加省略号，这可以结合引用[2]中的方法，应用到Y轴的标签格式化上。 可能还需要考虑旋转Y轴标签，但横向柱状图中Y轴通常是垂直排列的，旋转可能不太适用。不过，调整字体大小或者行高也是可行的选项。 总结可能的解决方案步骤： 1. 调整grid的left值，增加Y轴区域宽度。 2. 设置Y轴的axisLabel属性，如调整字体大小、换行或截断。 3. 使用formatter函数截断文字并添加省略号。 4. 检查容器宽度，确保图表有足够的渲染空间。 需要确保用户按照这些步骤配置，并提供具体的代码示例，比如修改grid.left和axisLabel的配置项。同时，提醒用户如果容器本身宽度不够，即使调整配置也可能无效，需要确保外层容器足够宽。 最后，生成相关问题，帮助用户进一步解决可能遇到的类似问题，比如X轴标签显示不全、调整图表布局等。</think>### ECharts横向柱状图Y轴文字显示不全的解决方案 #### 1. 调整`grid`布局增加Y轴空间 通过修改`grid.left`参数，为Y轴文字预留更多空间。例如： ```javascript option = { grid: { left: '25%', // 根据文字长度调整比例（默认约10%-15%） right: '5%' }, yAxis: { type: 'category', axisLabel: { width: 200, // 直接指定标签区域宽度 overflow: 'truncate', // 超出部分截断 } } } ``` #### 2. 使用`axisLabel.formatter`控制文字显示 ```javascript yAxis: { axisLabel: { formatter: function(value) { if (value.length > 10) { // 设定最大字符数 return value.substring(0, 7) + '...'; // 截断并添加省略号 } return value; } } } ``` #### 3. 动态计算布局（适用于响应式场景） 参考引用[1]的宽度计算逻辑，可结合浏览器窗口大小监听： ```javascript function adjustYAxis(chart) { const maxLabelLength = Math.max(...chart.getOption().yAxis[0].data.map(item => item.length)); chart.setOption({ grid: { left: maxLabelLength * 8 + 30 } // 8px/字符 + 安全边距 }); } ``` #### 4. 强制换行显示 ```javascript yAxis: { axisLabel: { formatter: function(value) { return value.match(/.{1,4}/g).join('\n'); // 每4字符换行 } } } ``` #### 5. 检查容器尺寸 确保图表容器有足够宽度： ```html <div id="chart" style="width: 800px; height: 400px"></div> <!-- 或通过JS动态设置 --> chart.resize({ width: 800 }); ``` [^1]: 动态计算布局的实现参考了ECharts配置项联动方法 [^2]: 文字截断策略借鉴了可视化信息压缩的常用方案
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值