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

【问题标题】：Echart configuration not allowing me to center legend text inside legend symbolEchart 配置不允许我在图例符号中居中图例文本
【发布时间】：2020-04-16 12:26:17
【问题描述】：

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

目前我的图例配置是::


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

我怎样才能做到这一点？

我也附上截图。

【问题讨论】：

标签： reactjs legend echarts

【解决方案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>

【讨论】：

感谢您提供解决方案。我很困惑。