echarts 嵌套环形图 legend图例显示数值

回答：可以通过设置 formatter 属性来实现 legend 显示数值。代码示例：

legend: {
formatter: '{name}({value})'
},
series: [{
type: 'pie',
data: [
{name:'邮件营销', value:120},
{name:'联盟广告', value:240},
{name:'视频广告', value:180}
],
radius: ['50%', '70%'],
label: {
show: true,
position: 'outside',
formatter: '{b}({d}%)'
}
}]

相关问题

echarts嵌套环形图legend显示数据

ECharts是一个强大的JavaScript图表库，可以创建各种复杂的图表，包括嵌套环形图（例如 doughnut chart with concentric rings）。在ECharts中，如果你想在嵌套环形图的Legend（图例）中显示数据，通常会通过设置`data`属性来实现。

当你有多个环层时，可以在Legend的数据配置中为每个环层定义一个数组，这个数组里包含一个名称和对应系列的数据。例如：

var option = {
    legend: {
        data: ['外部环层1', '内部环层1', '内部环层2'],
        orient: 'vertical', // 设置为垂直方向，也可以设置为horizontal
        left: 'left', // 或者right
        top: 'top',
        itemWidth: 80,
        itemHeight: 40,
        show: true,
        formatter: function (name) { // 自定义图例内容格式
            return '<span style="display:inline-block;margin-right:5px;' +
                'background-color:#' + name.color + '"></span>' + name.name;
        }
    },
    series: [
        {
            name: '外部环层1',
            type: 'ring',
            innerRadius: '60%',
            outerRadius: '80%',
            data: [43, 50]
        },
        {
            name: '内部环层1',
            type: 'ring',
            innerRadius: '70%',
            outerRadius: '80%',
            data: [22, 30]
        },
        {
            name: '内部环层2',
            type: 'ring',
            innerRadius: '80%',
            outerRadius: '90%',
            data: [10, 15]
        }
    ]
};

在这个例子中，`formatter`函数用于自定义图例中的颜色和文本，当鼠标悬停在图例上时，会显示相应环层的百分比数据。

echarts 3D双嵌套环形图

ECharts 3D中的双嵌套环形图可以通过使用环形图和3D图表组合来实现。具体步骤如下：

1. 使用环形图创建第一层环形图，设置其半径和数据项。

2. 创建第二层环形图，将其放置在第一层环形图的中心，设置其半径和数据项。

3. 使用3D图表创建一个圆柱体，将其放置在第二层环形图的中心，设置其高度和数据项。

4. 将第二层环形图和3D圆柱体的数据项进行关联，以显示正确的数据。

以下是一个示例代码：

option = {
    series: [
        {
            type: 'pie',
            radius: ['45%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            type: 'pie',
            radius: ['30%', '45%'],
            center: ['50%', '50%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            type: 'bar3D',
            data: [
                [0, 0, 335],
                [0, 1, 310],
                [0, 2, 234],
                [0, 3, 135],
                [0, 4, 1548]
            ],
            shading: 'lambert',
            label: {
                textStyle: {
                    fontSize: 16,
                    borderWidth: 1
                }
            },
            itemStyle: {
                opacity: 0.8
            }
        }
    ]
};

你可以根据自己的需求调整数据项、样式和布局。