Конфигурация Echart не позволяет центрировать текст легенды внутри символа легенды - PullRequest
Новая
       11

Конфигурация Echart не позволяет центрировать текст легенды внутри символа легенды

1 голос
/ 16 апреля 2020

Я использую 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"]
    },

Как мне этого добиться?

Я прилагаю скриншоты также . Legend-description

1 Ответ

1 голос
/ 16 апреля 2020

Насколько я знаю, не существует простого способа изменить метки легенды, как вы хотите, но вы можете настроить что-то вроде предоставленного снимка экрана: сначала определите данные, а затем разделите их для 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>
...