echarts饼图图例分两排展示

ECharts是一个强大的JavaScript图表库，如果你想让饼图的图例分两排展示，你可以通过设置`legend`选项中的`data`属性和布局样式来实现。首先，你需要创建一个包含所有图例项的数据数组，并指定每排的`top`或`bottom`位置以及`width`，例如：

var option = {
    legend: {
        data: ['系列1', '系列2', '系列3', '系列4'], // 图例项目
        orient: 'vertical', // 水平布局
        layout: 'top', // 或者 bottom，表示图例的位置
        itemWidth: 80, // 每行的宽度
        itemHeight: 20, // 每个图例的高度
        rowGap: 10, // 行间距
        columnWidth: 60, // 列宽
        columnGap: 20, // 列间距
        left: '5%', // 左侧距
        top: '10%' // 上部距
    },
    series: [...]
};

然后将这个配置应用到ECharts实例的`setOption`方法中。这样，图例就会按照你的设置分为两排显示了。

相关问题

echarts饼图图例左侧垂直排布

echarts 饼图的图例默认是水平排列的，如果想要将图例改为垂直排列，可以通过设置 legend 对象中 orient 属性的值为 'vertical'，即可实现。

具体来说，在 echarts 中，饼图的图例可以通过以下代码进行设置：

option = {
  ...
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['类别A', '类别B', '类别C', '类别D']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        {value: 335, name: '类别A'},
        {value: 310, name: '类别B'},
        {value: 234, name: '类别C'},
        {value: 135, name: '类别D'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

在上述代码中，legend 对象的 orient 属性被设置为 'vertical'，并且 left 属性被设置为 'left'，这样就可以将图例垂直排布，并且放置在饼图的左侧。

echarts饼图图例纵向排列两排之间的距离

在ECharts中，如果你想让饼图的图例纵向排列并分为两排，可以设置`legend`部分的一些属性来调整间距。具体来说，你可以尝试使用`layout`属性设置为`vertical`，表示垂直布局，并通过`itemGap`属性来控制每行图例间的间距，以及`orient`属性来设置图例方向，如`orient: 'left' | 'right'`来选择图例在左侧还是右侧。

例如：

var option = {
    legend: {
        data: ['数据1', '数据2', '数据3'], // 图例标题
        layout: 'vertical', // 纵向布局
        itemGap: '20%', // 每行图例间的间距百分比，默认是5%
        orient: 'top', // 图例在顶部
        left: '5%', // 如果是左侧布局，这里设置图例的位置相对于容器的左边距
        right: 'auto' // 如果是右侧布局，这里设置自动计算右边距
    },
    series: [
        {
            type: 'pie',
            name: '饼图数据',
            data: ... // 饼图的数据配置
        }
    ]
};

如果你需要进一步精确控制，还可以考虑使用CSS样式来自定义图例元素的间距。