CODEWITHSUNDEEP
javascriptpie-chartecharts
Eric.D
Eric.D

Reputation: 281

How to create label with multiple dynamic values with echart?

I want to add more content to the echarts(doughnut chart) legend like the following picture.

From this

[s

To this

enter image description here

Regards, Eric

Upvotes: 0

Views: 13360

Answers (3)

Johnny Luv
Johnny Luv

Reputation: 11

its worked

  useEffect(() => {
    initChart()
    window.addEventListener('resize', () => myChart.current.resize())

    axios.get('api/xxx/xxx').then(res => {
      myChart.current.setOption({
        legend: {
          formatter: function (name) {
            const _data = res.data.groups
            const _value = _data.filter(item => item.name === name)[0].value
            return `${name}  -  ${_value}`
          }
        },
        series: [{
          data: res.data.groups
        }]
      })
    })

    return () => window.removeEventListener('resize', () => myChart.current.resize())
  })

Upvotes: 1

João Victor Alarcão Pereira
João Victor Alarcão Pereira

Reputation: 51

I'v added something like this on pie chart, in my case, I wanted to add the value after name, and all that I do was:

 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
}

Upvotes: 3

Clocher Zhong
Clocher Zhong

Reputation: 2456

if you mean more space, you can use option series.center , more detail

Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.

Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.

check this demo:

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>

Upvotes: -1

Related Questions