Echart配置不允许我将图例文本放在图例符号的中央

Question

我正在使用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"]
    },

我该如何实现？

我也附上了屏幕截图。

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/[email protected]/dist/echarts.min.js"></script>
<div id="myChart" style="width:600px; height:400px;"></div>