echarts柱状图--1.label显示在图形内部上方2.x轴坐标垂直显示3.修改x轴y轴文字颜色4.去掉图形背景

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  color: '#288ce1',
  xAxis: {
    type: 'category',
    data: [
      '机构1',
      '机构2',
      '机构3',
      '机构4',
      '机构5',
      '机构6',
      '机构7',
      '机构8',
      '机构9',
      '机构10',
      '机构11'
    ],
    axisLabel: {
      interval: 0,
      formatter: function (value) {
        //x轴的文字改为竖版显示
        var str = value.split('');
        return str.join('\n');
      },
      textStyle: {
        color: '#b7b7b7'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      textStyle: {
        color: '#b7b7b7'
      }
    }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: false, // 不显示图形背景
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label: {
        show: true, // 开启显示
        rotate: 0, // 旋转角度度
        position: 'insideTop', // 在上方显示
        distance: 15, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
        verticalAlign: 'middle',
        textStyle: {
          // 数值样式
          color: '#fff',
          fontSize: 12
        }
      }
    }
  ]
};

option && myChart.setOption(option);

![最终效果图](https://img-blog.csdnimg.cn/960e3bdbbe6d480581cb6083db3a2193.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXVhbnF1YW5DY2Vl,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)