echarts饼图legend详细解析

发布时间：2023-05-18

一、echarts饼图legend显示百分比

默认情况下，echarts饼图legend会显示每个数据项的名称。如果需要显示百分比，可以通过formatter属性来进行设置。例如：

option = {
   ...
   legend: {
       ...
       formatter: '{name} ({d}%)'
   },
   ...
};

其中，{name}会被替换为对应数据项的名称，{d}会被替换为对应的百分比。

二、echarts饼图legend横向

默认情况下，echarts饼图legend是竖向排列的。如果需要横向排列，可以通过orient属性来进行设置。例如：

option = {
   ...
   legend: {
       ...
       orient: 'horizontal'
   },
   ...
};

三、echarts饼图legend设置

除了上述常规配置之外，echarts饼图legend还可以通过其他属性进行设置，例如：

option = {
   ...
   legend: {
       type: 'scroll', // 设置为可滚动的类型
       orient: 'vertical',
       right: 10,
       top: 20,
       bottom: 20,
       data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5'],
       selected: {} // 选中状态的设置
   },
   ...
};

四、echarts饼图legend间距

echarts饼图legend默认会根据数据项的个数来进行分行排列。如果需要控制每行的数据项个数，可以通过itemWidth和itemHeight属性来进行设置。例如：

option = {
   ...
   legend: {
       ...
       itemWidth: 30, // 每个数据项的宽度
       itemHeight: 20, // 每个数据项的高度
       padding: 0, // 数据项之间的间距
   },
   ...
};

五、echarts饼图legend点击事件

可以通过legend的点击事件来控制echarts饼图的显示。例如：

option = {
   ...
   legend: {
       ...
       selectedMode: 'single', // 当前只能选中一个数据项
       data: ['数据项1', '数据项2'],
       selected: {
           '数据项1': true // 默认选中数据项1
       },
       ...
       },
       ...
   },
   ...
   series: [{
       name: '系列名称',
       type: 'pie',
       ...
   }]
};
myChart.on('legendselectchanged', function(params) {
    myChart.dispatchAction({
        type: 'pieSelect',
        seriesName: '系列名称',
        name: params.name
    });
});

代码中的'系列名称'要和对应的series的name属性相同。

六、echarts饼图legend太多

当echarts饼图legend中的数据项太多时，可以通过设置legend的type属性为'scroll'来实现滚动效果。例如：

option = {
   ...
   legend: {
       ...
       type: 'scroll', // 设置为可滚动的类型
       data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5']
   },
   ...
};

七、echarts饼图legend大小设置

可以通过设置legend的textStyle属性来控制echarts饼图legend中数据项的字体大小。例如：

option = {
   ...
   legend: {
       ...
       textStyle: {
           fontSize: 14 // 设置字体大小
       }
   },
   ...
};

八、echarts饼图legend位置调整

可以通过设置legend的left、right、top和bottom属性来调整echarts饼图legend的位置。例如：

option = {
   ...
   legend: {
       ...
       left: 'right', // 设置legend位于右侧
       top: 'center' // 设置legend位于中心
   },
   ...
};

九、echart饼图icon置顶

echarts饼图legend中显示的图标可以设置为显示在legend上方。例如：

option = {
   ...
   legend: {
       ...
       itemGap: 20,
       itemWidth: 30,
       itemHeight: 20,
       formatter: function(name) {
           return '{icon| }{name|' + name + '}';
       },
       textStyle: {
           rich: {
               icon: {
                   width: 30,
                   height: 20,
                   backgroundColor: '#eee',
                   borderWidth: 1,
                   borderColor: '#000'
               },
               name: {
                   padding: [0, 0, 0, 5]
               }
           }
       }
   },
   ...
   series: [{
       type: 'pie',
       data: [{
           value: 10,
           name: '数据项1'
       }, {
           value: 20,
           name: '数据项2'
       }, {
           value: 30,
           name: '数据项3'
       }, {
           value: 40,
           name: '数据项4'
       }]
   }]
};

代码中通过设置formatter属性，将icon和name分别包裹在两个span元素中，并通过在textStyle中设置rich属性，分别对icon和name进行样式的控制。

十、echarts饼图legend上下排列

当需要在echarts饼图legend中选取多个数据项并且在上下排列时，可以通过选中特定的数据项来实现。例如：

option = {
   ...
   legend: {
       ...
       data: ['数据项1', '数据项2', '数据项3', '数据项4', '数据项5']
   },
   ...
   series: [{
       type: 'pie',
       data: [{
           value: 10,
           name: '数据项1'
       }, {
           value: 20,
           name: '数据项2'
       }, {
           value: 30,
           name: '数据项3'
       }, {
           value: 40,
           name: '数据项4'
       }, {
           value: 50,
           name: '数据项5'
       }]
   }]
};
myChart.dispatchAction({
   type: 'legendSelect',
   name: ['数据项1', '数据项3', '数据项5'] // 选中数据项1、3、5
});

代码中的legendSelect事件可以通过选中特定的数据项，实现对应数据项的上下排列。

推荐文章