Как добавить больше контента в легенду echart? - PullRequest
Новая
       33

Как добавить больше контента в легенду echart?

0 голосов
/ 08 ноября 2018

Я хочу добавить больше контента к легенде echarts (пончик), как показано на следующем рисунке, но я не знаю, как добавить их после проверки официального документа и поиска информации! Пожалуйста, дайте мне несколько предложений!

[s

С уважением, Эрик

Ответы [ 2 ]

0 голосов
/ 09 августа 2019

Я добавил что-то подобное на круговую диаграмму, в моем случае я хотел добавить значение после имени, и все, что я делал, было: 

 legend: {
  show: props.legend ? true : false,
  orient: 'horizontal',
  x: 'left',
  y: 'bottom',
  formatter: props.legendValue ? function (name) {
    let itemValue = data.filter(item => item.name === name)
    return `${name}: ${itemValue[0].value}`
} : "{name}",
  data: props.legend
}
0 голосов
/ 09 ноября 2018

если вы имеете в виду more space, вы можете использовать опцию series.center, больше подробно

Центральная позиция круговой диаграммы, первая из которых является горизонтальной положение, а второе - вертикальное положение.

Процент поддерживается. Когда задано в процентах, элемент является относительным к ширине контейнера, а второй элемент к высоте.

проверьте это демо: 

let echartsObj = echarts.init(document.querySelector('#canvas'));
 
option = {
    color:['#429eda', '#8490ca', '#e97f74', '#f8d368', '#93cb76'],
    legend: {
        orient: 'vertical',
        x: 'right',
        y: 'center',
        data:['America','Canada','Japan','Mexico','India']
    },
    series: [
        {
 
            type:'pie',
            radius: ['50%', '70%'],
            startAngle: 170,
            center: ['30%', '50%'],
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:835, name:'America'},
                {value:310, name:'Canada'},
                {value:314, name:'Japan'},
                {value:135, name:'Mexico'},
                {value:948, name:'India'}
            ]
        }
    ]
};


    echartsObj.setOption(option)
<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="canvas" style="width: 100%; height: 300px">
        </div>
      </body>
    </html>
...