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

可配置XY轴刻度线,字体大小,柱形图大小颜色等
echarts柱形图X轴Y轴相关配置_第1张图片

    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];
                }
              }
            }
          }
        ]
    }

你可能感兴趣的:(可视化)