echarts根据x轴数据长度判断是否倾斜展示/柱状图上方显示数字

showChart1() {
// 通过id初始化
  let chart1 = echarts.init(document.getElementById(this.idName))
  var option = {
  // 到容器的距离
    grid: {
      top: '18',
      left: '0',
      right: '4',
      bottom: '0',
    },
    xAxis: [
      {
        type: 'category',
        data: this.xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .5)',
          },
        },
        axisLabel: {
          margin: 10,
          color: '#ffffff',
          textStyle: {
          // 可以根据屏幕尺寸显示不同字号
            fontSize: this.screenWidth == '1920' ? 16 : 12,
          },
          // 每个x轴数据的间距
          interval: 0,
          // 旋转显示，数据长度大于6的
          rotate: this.xData.length > 6 ? 30 : 0
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],

    yAxis: [
      {
        // boundaryGap: ['20%', '20%'], //分割线间隔
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
          color: '#ffffff',
          fontSize: this.screenWidth == '1920' ? 16 : 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        data: this.yData,
        barWidth: this.screenWidth == '1920' ? '36px' : '20px',
        itemStyle: {
        // 柱状图上方显示数字
          normal: {
            label: {
              show: true, //开启显示数值
              position: 'top', //数值在上方显示
              textStyle: {  //数值样式
                color: '#D1DBFF',   //字体颜色
                fontSize: 14  //字体大小
              }
            },
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color:
                    this.idName == 'count'
                      ? 'rgba(62, 173, 255, 1)'
                      : this.idName == 'person'
                        ? '#04DBFD'
                        : '#FFCC3E', // 0% 处的颜色
                },
                {
                  offset: 1,
                  // 通过id判断颜色
                  color:
                    this.idName == 'count'
                      ? 'rgba(62, 173, 255, 0)'
                      : this.idName == 'person'
                        ? 'rgba(4, 219, 253, 0)'
                        : 'rgba(255, 204, 62, 0) ', // 100% 处的颜色
                },
              ], //
              false
            ),
          },
        },
      },
    ],
  }

  chart1.setOption(option, true)
  // 监听容器的大小使图表大小跟着变化
  setTimeout(function () {
    window.onresize = function () {
      chart1.resize()
    }
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123