"option2 = {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow',\n },\n },\n legend: {\n right: '10%', // 将图例放置在右侧\n icon:'circle',\n textStyle: { // 修改图例文本的字体大小\n fontSize: 15\n }\n },\n grid: {\n left: '2px',\n right: '20%',\n bottom: '5%',\n containLabel: true,\n },\n xAxis: [\n {\n type: 'category',\n data: ['系统设置', '电动出风', '音频播放', '本地音频', '雨刮控制', '三电热管理', '手动空调','车外照明','车外信号灯','行车电箱','声光提示'],\n axisTick: {\n show: false,\n },\n axisLine: {\n lineStyle: {\n color: '#D5DDE7',\n },\n },\n axisLabel: {\n color: 'rgba(0, 0, 0, 0.85)',\n fontSize: 12,\n },\n },\n ],\n yAxis: [\n {\n type: 'value',\n // name: '单位:家',\n nameTextStyle: {\n color: 'rgba(0, 0, 0, 0.6)',\n fontSize: 12,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: '#D5DDE7',\n },\n },\n axisLabel: {\n color: 'rgba(0, 0, 0, 0.85)',\n fontSize: 12,\n },\n },\n ],\n series: [\n {\n name: '通过',\n type: 'bar',\n stack: 'email',\n barWidth: 20,\n itemStyle: { // 自定义柱子颜色\n normal: { color: '#4fd1c5' },\n },\n emphasis: {\n focus: 'series',\n },\n data: [12, 182, 191, 234, 290, 130, 310,22,33,66,55],\n }, {\n name: '未通过',\n type: 'bar',\n stack: 'email',\n barWidth: 20,\n itemStyle: { // 自定义柱子颜色\n normal: { color: '#ee6666' },\n },\n emphasis: {\n focus: 'series',\n },\n data: [12, 182, 191, 234, 290, 130, 310,22,33,66,55],\n }, {\n name: '未执行',\n type: 'bar',\n stack: 'email',\n barWidth: 20,\n itemStyle: { // 自定义柱子颜色\n normal: { color: '#fdc078' },\n },\n emphasis: {\n focus: 'series',\n },\n data: [12, 182, 191, 234, 290, 130, 310,22,33,66,55],\n }, 如何设置条形图之间距离的宽度\n\n\n内容:要设置条形图之间的距离宽度,可以通过调整xAxis的axisLabel中的间隔距离来实现。例如,可以将interval属性设置为0,表示不显示任何标签,然后通过调整axisTick的interval属性来设置标签的显示间隔。\n\n例如,将xAxis中的axisLabel和axisTick修改如下:\n\njavascript\n axisLabel: {\n color: 'rgba(0, 0, 0, 0.85)',\n fontSize: 12,\n interval: 0, // 不显示任何标签\n },\n axisTick: {\n show: true,\n interval: 0, // 设置标签的显示间隔\n },\n\n\n这样就可以设置条形图之间的距离宽度了。\n

Echarts条形图设置条形图间距的宽度

原文地址: https://www.cveoy.top/t/topic/pMdD 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录