echarts两个图列怎么分别控制两个图表

• Z时代
• 2024-03-04
• 分类：IT

现在显示两个图列，但是图一图二的图列都相互控制的，能不能两个分别控制各自的图表，

option = {
    legend: [{
            orient: 'vertical',
            left: '0%',
            top: '20%',
            data: ['待审核', '审核未通过', '生产中', '待入库', '已入库']
        },
        {
            orient: 'vertical',
            left: '0%',
            top: '70%',
            data: ['待审核', '审核未通过', '进行中', '已入库']
        }
    ],
    series: [{
            legendIndex: 0,
            name: '各渠道投诉占比',
            type: 'pie',
            radius: '30%',
            clockwise: false,
            startAngle: 90,
            center: ['22%', '25%'],
            color: ['#FF9966', '#273454', '#0099CC', '#99CC33', '#99CCCC'],
            hoverAnimation: false,
            roseType: 'radius', // area
            data: [{
                    value: 335,
                    name: '待审核'
                },
                {
                    value: 310,
                    name: '审核未通过'
                },
                {
                    value: 234,
                    name: '生产中'
                },
                {
                    value: 135,
                    name: '待入库'
                },
                {
                    value: 105,
                    name: '已入库'
                }
            ],
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: '3'
                }
            }
        },
        {
            name: '各级别投诉占比',
            type: 'pie',
            radius: '30%',
            center: ['22%', '75%'],
            roseType: 'radius', // area
            color: ['#FF9966', '#273454', '#0099CC', '#99CC33', '#99CCCC'],
            data: [{
                    value: 335,
                    name: '待审核'
                },
                {
                    value: 310,
                    name: '审核未通过'
                },
                {
                    value: 234,
                    name: '进行中'
                },
                {
                    value: 135,
                    name: '已入库'
                }
            ],
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: '3'
                }
            }
        }
    ]
},

回答：

好像不行，因为它是根据legend中data的name来匹配pie中data的name的，所以要么设置独一无二的name，要么写两个。可以根据下标设置name，然后使用legend的formatter处理

option = {
    legend: [{
            orient: 'vertical',
            left: '0%',
            top: '20%',
            data: ['待审核', '审核未通过', '生产中', '待入库', '已入库'].map(item => item + '-1'),
            formatter: function (name) {
                return name.split('-')[0]
            }
        },
        {
            orient: 'vertical',
            left: '0%',
            top: '70%',
            data: ['待审核', '审核未通过', '进行中', '已入库'].map(item => item + '-2'),
            formatter: function (name) {
                return name.split('-')[0]
            }
        }
    ],
    series: [{
            legendIndex: 0,
            name: '各渠道投诉占比',
            type: 'pie',
            radius: '30%',
            clockwise: false,
            startAngle: 90,
            center: ['22%', '25%'],
            color: ['#FF9966', '#273454', '#0099CC', '#99CC33', '#99CCCC'],
            hoverAnimation: false,
            roseType: 'radius', // area
            data: [{
                    value: 335,
                    name: '待审核'
                },
                {
                    value: 310,
                    name: '审核未通过'
                },
                {
                    value: 234,
                    name: '生产中'
                },
                {
                    value: 135,
                    name: '待入库'
                },
                {
                    value: 105,
                    name: '已入库'
                }
            ].map(item => {
                item.name = item.name + '-1'
                return item
            }),
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: '3'
                }
            }
        },
        {
            name: '各级别投诉占比',
            type: 'pie',
            radius: '30%',
            center: ['22%', '75%'],
            roseType: 'radius', // area
            color: ['#FF9966', '#273454', '#0099CC', '#99CC33', '#99CCCC'],
            data: [{
                    value: 335,
                    name: '待审核'
                },
                {
                    value: 310,
                    name: '审核未通过'
                },
                {
                    value: 234,
                    name: '进行中'
                },
                {
                    value: 135,
                    name: '已入库'
                }
            ].map(item => {
                item.name = item.name + '-2'
                return item
            }),
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: '3'
                }
            }
        }
    ]
}

以上是 echarts两个图列怎么分别控制两个图表 的全部内容， 来源链接： utcz.com/p/935931.html