Echarts—自定义图例布局样式和图例换行的实现

Echarts—自定义图例布局样式和图例换行的实现

<div id="blockAgeChart" class="blockAgeChart"></div>

.blockAgeChart{
    width: 450px;
    height: 200px;
}

getInitblockAgeChart(){
      this.blockAgeChart = echarts.init(document.getElementById('blockAgeChart'), null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      this.blockAgeChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', //竖向展示
          top: '5%',
          left: '5%',
          icon:'circle',
          textStyle:{
            color:'#FFFFFF'
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            center: ["60%", "40%"],
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 1
            },
            data: [
              { value: 1048, name: '1-10' },
              { value: 735, name: '11-20' },
              { value: 580, name: '21-30' },
              { value: 484, name: '31-40' },
              { value: 300, name: '41-50' },
              { value: 300, name: '51-60' },
              { value: 300, name: '61-70' },
              { value: 300, name: '70+' }
            ]
          }
        ]
      });
    },