如何在echart图例中添加更多内容？答案

【问题标题】：How to add more content in echart legend?如何在echart图例中添加更多内容？
【发布时间】：2018-11-08 12:04:47
【问题描述】：

我想在echarts（甜甜圈图）图例中添加更多内容，如下图所示，但是在查看官方文档并搜索了一些信息后，我不知道如何添加它们！请给我一些建议！

[

问候，埃里克

【问题讨论】：

嗨，Eric，“更多内容”到底是什么意思？
你好，谢谢你的支持，更多内容的意思如下图：i.postimg.cc/J00rRQbF/capture.png我一开始没找到任何属性来实现，现在通过拼接来实现html 字符串，然后获取一个变量。喜欢下面的代码：i.postimg.cc/FHhXgZ6J/image.png再次感谢

标签： javascript css vue.js pie-chart echarts

【解决方案1】：

我在饼图上添加了类似的内容，就我而言，我想在名称后添加值，我所做的只是：

 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
}

【讨论】：

【解决方案2】：

成功了

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

【讨论】：

【解决方案3】：

如果你的意思是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>

【讨论】：