美文网首页
去掉Echarts饼状图的引导线

去掉Echarts饼状图的引导线

作者: 祈澈菇凉 | 来源:发表于2021-05-24 18:39 被阅读0次
    <!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="utf-8">
            <title>五分钟上手之饼状</title>
            <!-- 引入 echarts.js -->
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        </head>
     
        <body>
            <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
            <div id="main" style="width: 300px;height:300px;"></div>
            <script type="text/javascript">
                // 基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        data: ['在线', '离线']
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        
                        data: [
                            { value: 12, name: '在线', itemStyle: { color: '#005eff' } },
                            { value: 3, name: '离线', itemStyle: { color: '#ff9194' } },
                        ]
                    }]
                });
            </script>
        </body>
    </html>
    
    

    当饼状图数据比较多的时候
    这个引导线显得比较杂乱无章了
    这个时候需要去掉Echarts饼状图的引导线

    属性:

    label: {
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
    

    这个时候,引导线就会隐藏起来了
    统计图看上去就简洁了不少

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>五分钟上手之饼状</title>
            <!-- 引入 echarts.js -->
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        </head>
    
        <body>
            <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
            <div id="main" style="width: 300px;height:300px;"></div>
            <script type="text/javascript">
                // 基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        data: ['在线', '离线']
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
    
                        data: [{
                                value: 12,
                                name: '在线',
                                itemStyle: {
                                    color: '#005eff'
                                }
                            },
                            {
                                value: 3,
                                name: '离线',
                                itemStyle: {
                                    color: '#ff9194'
                                }
                            },
                        ]
                    }]
                });
            </script>
        </body>
    </html>
    
    

    再看一下实际项目上
    只有当鼠标放上去的时候,Echarts饼状图的引导线才会出现


    相关文章

      网友评论

          本文标题:去掉Echarts饼状图的引导线

          本文链接:https://www.haomeiwen.com/subject/rptfsltx.html