Question

我想像下面的图片一样向echarts（甜甜圈图）图例添加更多内容，但是在检查了官方文档并搜索了一些信息之后，我不知道如何添加它们！请给我一些建议！

[

关于，埃里克

Answer 1

如果您的意思是more space，则可以使用选项series.center，更多detail

饼图的中心位置，第一个是水平   位置，第二个是垂直位置。

支持百分比。以百分比设置时，该项目是相对的   容器宽度，第二个项目高度。

查看此演示

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>

Answer 2

我在饼图中添加了类似的内容，以我为例，我想在名称后添加值，而我所做的就是：

 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
}

Answer 3

有效

  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())
  })

如何在echart legend中添加更多内容？

3 个答案: