Echart 配置不允许我在图例符号中居中图例文本

Question

我正在使用 echart 进行反应，我有一个要求，我需要在图例符号内将图例文本居中。 None 的配置似乎适用于此目的。

目前我的图例配置是::


legend: {
      orient: "horizontal",
      top: "0",
      left: "40px",
      itemWidth: 90,
      itemHeight: 20,
      textStyle: {
        lineHeight: 60,
        backgroundColor: "yellow",
        align: "center"
      },
      data: ["Orders Total", "Pending Payments", "Visits"]
    },

我怎样才能做到这一点？

我也附上截图。

Answer 1

据我所知，没有简单的方法可以根据需要更改图例标签，但您可以设置类似提供的屏幕截图的设置：首先定义数据，然后将其拆分为 legend 和 series 分开。隐藏 legend icon 并自定义项目样式。

dataSet = [
 { name: 'Category1', value: 335, color: '#e0ffd7' },
 { name: 'Category2', value: 310, color: '#e494ac' },
 { name: 'Category3', value: 234, color: '#8cf4ce' },
 { name: 'Category4', value: 135, color: '#37d5da' }
];

var option = {
  legend: {
    orient: 'horizontal',
  center: 'center',
  icon: 'none',
  textStyle: {
   padding: [4, 20, 4, 20],
   borderRadius: 4
  },
    data: dataSet.map( ({name, color}) => ({ name, textStyle: { backgroundColor: color }}) ),
  },
  series: [
    {
      name: 'Categories:',
      type: 'pie',
      radius: ['50%', '70%'],
      label: { show: false, position: 'center' },
      data: dataSet.map( ({name, value, color}) => ({ name, value, itemStyle: { color: color } }) ),
  }
  ]
};

myChart = echarts.init(document.querySelector('#myChart'));
myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="myChart" style="width:600px; height:400px;"></div>

Echart 配置不允许我在图例符号中居中图例文本

Echart configuration not allowing me to center legend text inside legend symbol

legend

reactjs

echarts