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

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

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'
                }
            }
        }
    ]
},
阅读 1.4k
1 个回答

好像不行,因为它是根据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'
                }
            }
        }
    ]
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题