[游戏开发]Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示

1.柱状纵向变横向

将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示

//纵向
          xAxis: [
            {
              type: 'value'
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: this.regionList,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],


//横向
          yAxis: [
            {
              type: 'value'
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: this.regionList,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],

2.圆角

          series: [
            {
              name: '哒哒哒',
              type: 'bar',
              barWidth: '13px',   //柱状宽度
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 8, 8, 0],  //设置圆角方向[上，右，下，左]
              },
              data: this.deviceCount
            }
          ]

?3.渐变

          series: [
            {
              name: '哒哒哒',
              type: 'bar',
              itemStyle: {
                normal: {
                  // LinearGradient(1, 0, 0, 0)渐变方向从左到右
                  // LinearGradient(0, 1, 0, 0)渐变方向从下到上
                  // LinearGradient(0, 0, 1, 0)渐变方向从右到左
                  // LinearGradient(0, 0, 0, 1)渐变方向从上到下
                  // LinearGradient(1, 1, 0, 0)渐变方向从左下到右上
                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: "#EDC967" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "#EB6D57" // 100% 处的颜色
                  }], false)
                }
              },
              data: this.deviceCount
            }
          ]

4.x轴字体倾斜或垂直显示

         xAxis: [
            {
              type: 'category',
              data: this.alarmTList,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                // 倾斜45°
                rotate:45,//倾斜度 -90 至 90 默认为0
              }
            }
          ],

         xAxis: [
            {
              type: 'category',
              data: this.alarmTList,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                // 垂直显示
                formatter: function (value) {
                  return value.split('').join('\n');
                }
              }

            }
          ],