0
回答
echart饼图的legend和toolbox 重合了
华为云实践训练营,热门技术免费实践!>>>   

<div id="main" style="border:1px solid gray;height:300px;width:600px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
 <script type="text/javascript">
        require.config({
            paths: {
echarts: 'http://echarts.baidu.com/build/dist'
//                echarts: '../build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/pie'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
              
var option = {
    title : {
        text: '工资收入比例',
        subtext: '税前20000 ',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        data:['房租','公积金','个人所得税','社保','医保','可支配收入']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:' ',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
{ name:'房租',value:3000},{name: '公积金 ',  value: 2460 },{ name: '个人所得税 ',  value: 2015 },{ name: '社保 ',  value: 1640 },{ name: '医保 ',  value: 820 },{ name: '可支配收入 ',  value: 10565 }
            ]
        }
    ]
};
                    
                    
                myChart.setOption(option);
            }
        );
    </script>

 

@Kener-林峰 右上角的toolbox和饼图的legend 重叠在一起了,能不能给legend设置一个margin-top

举报
yak
发帖于2年前 0回/1K+阅
顶部