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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章