欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-14 22:59:12
...

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

    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];
                }
              }
            }
          }
        ]
    }
相关标签: 可视化