echarts-柱状图-柱状图标签旋转

柱状图标签旋转

<template>
  <div>
    <div>
  <!--为echarts准备一个具备大小的容器dom-->
      <div id="org_ech_line"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },
  methods: {
    // 组织建设-折线图
    orgLine(id) {
      var chartDom = document.getElementById('org_ech_line')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br />{a0}:{c0}万<br />{a1}:{c1}万'// 鼠标悬浮在柱状图上时的-提示语
        },
        // legend: {
        //   data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        // },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: [
              '劳动竞赛',
              '职工之(小)家',
              '女职工关爱室',
              '职工书屋',
              '培训',
              '会议'
            ],
            // 横坐标上-数据显示不全时- interval: 0
            axisLabel: {
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '历史支出',
            type: 'bar',
            barGap: 0,
            // barWidth : 10,//柱图宽度
            // barMaxWidth: 30, // 最大宽度
            // label: labelOption, // 释放开显示柱状图上的文字

            // emphasis: { //重要!!!!-释放开时-鼠标悬浮的柱子-以外的其他柱子会消失
            //   focus: 'series'
            // },
            data: [320, 332, 301, 334, 390, 33],

            itemStyle: {
            // 通常情况下：
              normal: {
                // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params) {
                  var colorList = ['#51BAE4', '#51BAE4', '#51BAE4', '#51BAE4', '#51BAE4', '#51BAE4']
                  return colorList[params.dataIndex]
                }
              }
              // 鼠标悬停时：
              // emphasis: {
              //   normal: { color: '#fff' }, // 正常颜色
              //   emphasis: { color: '#51BAE4' } // 鼠标移入颜色
              // }
            }
          },
          {
            name: '今年支出',
            type: 'bar',
            // label: labelOption,

            // emphasis: {//重要!!!!-释放开时-鼠标悬浮的柱子-以外的其他柱子会消失
            //   focus: 'series'
            // },
            data: [220, 182, 191, 234, 290, 33],

            itemStyle: {
            // 通常情况下：
              normal: {
                // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params) {
                  var colorList = ['#F9BA54', '#F9BA54', '#F9BA54', '#F9BA54', '#F9BA54', '#F9BA54']
                  return colorList[params.dataIndex]
                }
              }
              // 鼠标悬停时：
              // emphasis: {
              //   normal: { color: '#51BAE4' }, // 正常颜色
              //   emphasis: { color: '#51BAE4' } // 鼠标移入颜色
              // }
            }
          }

        ]
      }

      option && myChart.setOption(option)
    }
  },
  // 调用
  mounted() {
    this.$nextTick(function() {
      this.orgLine('org_ech_line')
      // this.incomeLine('income_ech_line')
    })
  }
}
</script>

<style scoped>
 #org_ech_line{
                width: 600px;
                height: 500px;
              }
</style>