天天看點

echart-圖表位置改變

問題當legend比較長,圖表和legend裡的太近 可能會重疊擋住,效果不好

echart-圖表位置改變

解決:

series: [
            {
                name:'人員級别',
                type:'pie',
                radius: ['35%', '70%'],
                center: ['60%', '50%'],// 圖表的位置 x,y方向
                avoidLabelOverlap: false,
                itemStyle: {
                    normal: {
                        //定義一個list,然後根據是以取得不同的值,這樣就實作了,
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#ffd733','#feb18b','#2fd0fd','#51cd97','#9151cd','#feb18b','#2fd0fd','#51cd97','#9151cd'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下為是否顯示,顯示位置和顯示格式的設定了
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                label: {
                    normal: {
                        //show: false,
                        //position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold'
                        },
                        rich: {
                            a: {
                                // color: '#8793a6',
                                fontSize: 15,
                                lineHeight:20
                            },
                            b: {
                                // color:'#464646',
                                fontSize: 20,
                                fontWeight:700
                            }
                        },
                        formatter: [
                            '{a|{b}}',
                            '{b|{c}}'
                        ].join('\n')
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data:[
                    {value:335, name:'司局級'},
                    {value:310, name:'副部級'},
                    {value:234, name:'正部級'},
                    {value:234, name:'副國級'},
                    {value:135, name:'正國級'},
                    {value:310, name:'副部級1'},
                    {value:234, name:'正部級1'},
                    {value:234, name:'副國級1'},
                    {value:135, name:'正國級1'}
                ]
            }
        ]      

  

 問題   Echart餅狀圖示注遮蓋解決方案彙總

echart-圖表位置改變

繼續閱讀