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

本文档展示了一段关于配置ECharts图表样式的代码,包括设置XY轴刻度线、字体大小、柱形图的宽度和颜色等。通过对各个属性的详细设定,可以自定义图表的视觉效果,如将横轴标签旋转,改变字体颜色和大小,以及为每个柱子指定不同的颜色等。
摘要由CSDN通过智能技术生成

可配置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];
                }
              }
            }
          }
        ]
    }
  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值