以特定的方式为Pie图例进行Echart配置。

我想用不同的格式显示饼图例和它的值。我附上了图片。我正在寻找它,但没有找到如何做到这一点,直到现在。如果你看到的图像,图例和对应的值显示,我无法复制。

Pie legends

解决方案:

你想显示值,而不是百分比?如果是,那么这是一个小的工作,需要做的,因为默认情况下,图例组件不知道你的数据的另一个尺寸。试着用这段代码开始。

var option = {
  //...
  legend: {
    formatter: name => {
      var series = myChart.getOption().series[0];
      var value = series.data.filter(row => row.name === name)[0].value
      return name + '    ' + value;
    },
  }
}

  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
        formatter: (name) => {
	        var series = myChart.getOption().series[0];
      		var value = series.data.filter(row => row.name === name)[0].value;
      		return name + '    ' + value;
        },
    },
    series: [
        {
            name: 'Series',
            type: 'pie',
            label: { show: false },
            labelLine: { show: false },
            data: [
                {value: 335,  name: 'Category1'},
                {value: 310,  name: 'Category2'},
                {value: 234,  name: 'Category3'},
                {value: 135,  name: 'Category4'},
                {value: 1548, name: 'Category5'}
            ]
        }
    ]
};


myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/5315.html

(0)
上一篇 2022年6月2日 上午4:30
下一篇 2022年6月2日 上午5:09

相关推荐

发表评论

登录后才能评论