【echarts柱状图最大高度】echarts柱状图限制柱子最大高度方法

今天遇到的问题是柱状图一个轴有多个柱子，需要其中的一个柱子长度保持在同一个地方，所以需要调整柱子的高度，我就去查了百度，但是没有找到。后来查文档发现也没有找到这个直接设置最大高度的属性，那就只能曲线救国了。

效果图：

上面的大的数字是一根柱子，我给他全部控制在0的位置，然后只显示数字就行了，这就是我的需求

方法：

这里我是用的多轴的玩法，直接把两根柱子分轴对应不同的X轴，然后我再把其中我需要控制长度的柱子的X轴设置max也就是最大刻度是多少。这样就会根据刻度来自适应柱子长短，那我需要他在0的位置，我直接max：2000000000,直接写个20亿，那肯定不会再有这么大的数字了，我这就算是以后图表膨胀到几百万，在20亿面前，他仍然还是在0的附件。

    barGraph(val) {console.log(val, "--");//初始化图标var myCharts = this.$echarts.init(this.$refs["echart-right"]);//Y轴的数据，和数据值位置一一对应var cate = val.gtcodeArray;//数据值，顺序和Y轴的名字一一对应totalCountvar option = {title: {text: this.rightname + "合格率排行榜top10",},tooltip: {trigger: "axis",axisPointer: {type: "shadow",},// trigger: "item",// formatter: function (params) {//   return `百分比:${params.data.value}<br/>数量:${params.data.totalCount}`;// },},//图表位置grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},//X轴xAxis: [{type: "value",max:2000000000,axisLine: {show: false,},axisTick: {show: false,},//不显示X轴刻度线和数字splitLine: { show: false },axisLabel: { show: false },boundaryGap: [0, 0.001],},{type: "value",axisLine: {show: false,},axisTick: {show: false,},//不显示X轴刻度线和数字splitLine: { show: false },axisLabel: { show: false },boundaryGap: [0, 0.001],},],yAxis: {type: "category",data: cate,//升序inverse: true,splitLine: { show: false },axisLine: {show: false,},axisTick: {show: false,},//key和图间距offset: 10,//动画部分animationDuration: 300,animationDurationUpdate: 300,//key文字大小nameTextStyle: {fontSize: 5,},},series: [{//柱状图自动排序，排序自动让Y轴名字跟着数据动name: "数量",type: "bar",data: val.totalCountArray,barWidth: 12,smooth: true,valueAnimation: true,//Y轴数字显示部分label: {normal: {show: true,position: "right",valueAnimation: true,offset: [5, -2],textStyle: {color: "#333",fontSize: 13,},},},itemStyle: {emphasis: {barBorderRadius: 7,},//颜色样式部分normal: {barBorderRadius: 7,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: "#fff" },{ offset: 1, color: "#fff" },]),},},},{//柱状图自动排序，排序自动让Y轴名字跟着数据动realtimeSort: true,xAxisIndex: 1,name: "百分比",type: "bar",data: val.percentageArray,barWidth: 12,smooth: true,valueAnimation: true,//Y轴数字显示部分label: {normal: {show: true,position: "right",valueAnimation: true,offset: [5, -2],textStyle: {color: "#333",fontSize: 13,},},},itemStyle: {emphasis: {barBorderRadius: 7,},//颜色样式部分normal: {barBorderRadius: 7,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: "#3977E6" },{ offset: 1, color: "#37BBF8" },]),},},},],//动画部分animationDuration: 0,animationDurationUpdate: 3000,animationEasing: "linear",animationEasingUpdate: "linear",};myCharts.setOption(option, true);//图表大小变动从新渲染，动态自适应window.addEventListener("resize", function () {myCharts.resize();});},

【echarts柱状图最大高度】echarts柱状图限制柱子最大高度方法相关推荐

迪赛智慧数——柱状图（多色柱状图）：近十年上榜中国最具幸福感城市次数
效果图过去10年,谁是全国最具幸福感城市? 在中国现阶段,幸福感主要是由收入决定,而人们在吃饱穿暖的基础上,对于生活有了更高的要求.正因为如此,很多城市在大力发展经济的时候,也开始注重人们的幸福感, ...
echarts实现单3D立体柱状图
效果图: 实现代码: function getEcharts3DBar (xAxisData, data, colorType) {var colorArr = [];if (colorType == ...
echarts实现多3D立体柱状图
效果图: 实现代码: // 立体多柱状图 function getSolidOption(data1, data2, data3) {// 月份坐标轴var nowMonth = new Date() ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
ECHARTS的基本使用：柱状图、折线图、饼图等
Echarts 是由百度团队打造的一款纯 Javascript 的图表库,官网下载路径如下: http://echarts.baidu.com/download.html Echarts的特性: 丰富 ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
ECharts（三）：柱状图柱体颜色渐变（每个柱体不同渐变色）
前提: 会简单的绘制柱状图主要内容: 渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到: itemStyle: { normal: ...
echarts画出特殊形状的柱状图
通常echarts画出的柱状图都是矩形,怎样用echarts画出特殊形状的柱状图呢? 例如: 代码配置参数如下: option = { xAxis: { type: 'cate ...

【echarts柱状图最大高度】echarts柱状图限制柱子最大高度方法

效果图：

方法：

【echarts柱状图最大高度】echarts柱状图限制柱子最大高度方法相关推荐

最新文章

热门文章