ECharts表格 多个表格显示在一起 多个series 对应多个legend 写法

这几天在做统计方面 需要用到一些报表 用的也是ECharts,多个图表在一起显示,相当于多个option在一起显示, 

一般见得多的是一个series对应一个legend或者是多个series对应一个legend,

但是现在有个需求就是多个series对应多个legend,经过尝试提供一种option写法:

先上个效果图:

直接复制到ECharts官网调试即可

option = {
    title: [
        {
          left: 'left',
        y: '20%',
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
    },
    {
        text: '南丁格尔玫瑰图1',
        subtext: '纯属虚构',
        x: '60%',
        y: '2%'
    },{
        text: '南丁格尔玫瑰图2',
        subtext: '纯属虚构',
        x: '60%',
        y: '50%'
    }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: [
        {
            orient: 'vertical',
            left: 'left',
            y: '40%',
            data: ['rose1', 'rose2', 'rose3', 'rose4']
        }, {
             orient: 'vertical',
            right: 'left',
            y: '10%',
            data: ['rose1', 'rose2', 'rose3', 'rose4']
        },
        {
            orient: 'vertical',
            right: 'left',
            y: '60%',
            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5']
        } 
    ],
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['25%', '50%'],
            roseType: 'area',
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'}
            ]
        },
        {
        type: 'pie',
        radius: [0, '30%'],
        center: ['75%', '25%'],
        data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'}
            ]
        }, 
        {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '75%'],
            
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 25, name: 'rose5'}
            ]
        }
    ]
};

如果有更好的写法可以留言分享噢!!!  如果有错误请大家指出, 我会及时更新!!!!!

发布了50 篇原创文章 · 获赞 27 · 访问量 13万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章