echarts柱形图X轴Y轴相关配置

article/2025/9/12 10:27:09

可配置XY轴刻度线，字体大小，柱形图大小颜色等
在这里插入图片描述

    const options = {tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'},textStyle: {// 鼠标hover遮罩层字体大小fontSize: '12'}},xAxis: [{data: ['大学食堂 100间', '中学食堂 75间', '小学食堂 35间', '幼儿食堂 25间'].map(function (str) {return str.replace(' ', '\n');}),axisTick: {alignWithLabel: true,show: false // 纵轴},axisLine: { // 横轴show: true},axisLabel: {show: true,textStyle: { // 字体配置color: '#000',fontSize: '12',lineHeight: 14},//   rotate:40 // 是否旋转},splitLine: { // 表格里面X轴线条show: false}}],yAxis: [{axisLabel: {// 字体配置，是否显示show: true, textStyle: {color: '#000',fontSize: '12'}},axisTick: {//y轴刻度线show: true},axisLine: {show: true, // Y轴lineStyle: {color: '#000' // 颜色}},splitLine: { // 表格里面Y轴线条show: true}}],series: [{name: '食堂',type: 'bar',data: [100, 75, 35, 25],barWidth: 30,//柱图宽度itemStyle: {normal: {//每根柱子颜色设置color: function (params) {const colorList = ["#C0BF49", "#3EB377", "#E8423D", "#0487ED" ];return colorList[params.dataIndex];}}}}]}