Echarts问题处理

1.echarts legend 排列分组

legend:[
    {
        orient: 'horizontal',
        x : '5%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['AA', 'BB'],
    },{
        orient: 'horizontal',
        x : '30%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['CC', 'DD'],
        
    },{
        orient: 'horizontal',
        x : '55%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['EE', 'FF'],
    },{
        orient: 'horizontal',
        x : '80%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['GG', 'HH'],
    }
]

2. 柱形图顶部显示数量，自定义柱形图顶部颜色颜色，柱体的颜色渐变，柱形图圆角

//option下的series
  series: [
            {
              type: 'bar',
              barWidth: 30,//柱子宽度
              barGap: 1, //柱子之间间距
              itemStyle: {
                normal: {
                  //顶部显示数量
                  label: {
                    formatter: '{c}',
                    show: true,
                    position: 'top',
                    textStyle: {
                      fontWeight: 'bolder',
                      fontSize: '12',
                      //自定义柱状图顶部颜色颜色
                      color: function (params) {
                        var colorList = [
                          '#76D5E5',
                          '#E5AF76',
                          '#D476E5',
                          '#E57680',
                        ]
                        var colorItem = colorList[params.dataIndex]
                        return new echarts.graphic.Color(colorItem, false)
                      }
                    }
                  },
                  // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [10, 10, 0, 0],
                  // 柱体的颜色渐变
                  // 右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function (params) {
                    console.log(params)
                    var colorList = [
                      ['#76D5E5', '#F5F8FE'],
                      ['#E5AF76', '#F5F8FE'],
                      ['#D476E5', '#F5F8FE'],
                      ['#E57680', '#F5F8FE']
                    ]
                    var colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colorItem[0]
                    },
                    {
                      offset: 1,
                      color: colorItem[1]
                    }
                    ], false)
                  }
                }
              },
              data: this.seriesData
            }
          ]

3.图形位置

//option下的grid
 grid: {
            top: '10%',
            left: '10%',
            right: '10%',
            bottom: '20%'
          },

4.图标文字及网格线

//option下的xAxis和yAxis
 xAxis: {
            data: this.legendData,
            splitLine: {
              show: false //x轴网格线线
            },
            axisLabel: {
              interval: 0,//x轴文字在图标下方
              color: '#000000'
            },
            axisLine: {
              show: false//x轴轴线
            },
            axisTick: {
              show: false //表格刻度
            
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false//表格刻度
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#999'
            }
          },