echarts图例两行两列怎么实现？

Question

效果图是这样子的：

右侧的怎么变成两行两列的？然后饼图怎么渐变？

color: ["#63E315", "#00FFFF", "#00CCFF"],
legend: {
  width: '100%',
  itemWidth: 6,
  itemHeight: 6,
  icon: 'circle',
  textStyle: {
    padding: [14, 0, 0, 0],
    rich: {
      label: {
        fontSize: 12,
        lineHeight: 16,
        fontWeight: 'normal',
        color: '#ffffff'
      },
      value: {
        fontSize: 14,
        lineHeight: 17,
        fontWeight: 'bold',
        color: '#ffffff'
      }
    }
  },
  itemGap: 15,
  orient: 'vertical',
  right: '0',
  top: '10',
  data: this.zhijiaData,
  formatter: (name) => {
    let total = 0
    let target = 0
    for (var i = 0; i < this.zhijiaData.length; i++) {
      total += Number(this.zhijiaData[i].value)
      if (this.zhijiaData[i].name === name) {
        target = this.zhijiaData[i].value
      }
    }
    const v = (target / total * 100).toFixed(0)
    return `{label|${name}}\n{value|${target}  ${v}%}`
  }
},

Answer 1

分行可以设置高

  legend: {
    orient: 'vertical',
    left: 'left',
    height: 50
  },

渐变可以设置color:

具体的颜色对应可以根据需求调整, color也可以与legend,series等同级

      color: [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(58, 119, 214, 1)' },
          { offset: 1, color: 'rgba(88, 136, 254, 0.3200)' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(58, 119, 0, 1)' },
          { offset: 1, color: 'rgba(88, 136, 254, 0.3200)' }
        ])
      ]

Answer 2

左侧是个图表， 右侧可以自己画dom实现