vue x轴文字纵向显示 - echart图表

介绍：

实现修改坐标轴颜色，x轴字体垂直显示

如图所示：

代码如下：

<template>
  <div class="ml20 mr20 mb20 colorFOp">
    <div class="head tc mb20 ">测试案例</div>
      <div ref="test" class="testChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myTestChart:{},
    };
  },
  mounted() {
    this.testChart()
    window.onresize = ()=>{//窗口变化自动重载
      this.myTestChart.resize()
    }
  },
  methods: {
    testChart(){
      this.myTestChart = echarts.init(this.$refs.test);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {           
            type: 'shadow'       
          }
        },
        grid: {
          left: '15',
          right: '15',
          bottom: '5',
          top:'30',
          containLabel: true //防止标签溢出
        },
        xAxis: [
          {
            type: 'category',
            axisTick:{//隐藏刻度
              show:false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//x边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              rotate:-90,//x轴竖向展示
              interval:0,//刻度间隔
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
                fontSize:12
              }
            },
            data:Array.from({length:12},(v,k)=>`${k+1}月份`)
          }
        ],
        yAxis: [
          {
            name: '万',
            nameTextStyle:{ //文字颜色
              color:"#65ABE7", 
              fontSize:12,  
            },
            type: 'value',
            splitLine:{
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            }
          }, 
        ],
        color:['#00CEDE','#F00067','#1055D6'],
        series: [{
          name: '',
          type:'bar',
          data: [11,10,12,13,10,11,6,9,8,10,10,8],
          stack: 'total', //累加
          barWidth : 18,//柱图宽度
          itemStyle: {
            normal: {
              barBorderRadius:[0,0,25,25]//圆角
            }
          },
        },{
          name: '',
          type:'bar',
          data: [9,7,6,10,7,8,12,13,8,10,11,7],
          stack: 'total',//累加
          barWidth : 18,//柱图宽度
        },{
          name: '',
          type:'bar',
          data: [8,10,7,6,15,11,18,9,16,10,5,5],
          stack: 'total',//累加
          barWidth : 18,//柱图宽度
          itemStyle: {
            normal: {
              barBorderRadius:[25,25,0,0]//圆角
            }
          },
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myTestChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
  .testChart{
    margin:100px auto;
    width:850px;
    height: 50vh;
  }
  .title{
    font-size: 16px;
    color: #00F8FD;
    line-height: 42px;
  }
</style>

外传：

台风，大风呼啸。