精华内容
下载资源
问答
  • ECharts 饼图

    2020-12-14 05:17:55
    ECharts 饼图 前面的章节我们已经学会了使用 ECharts 绘制一个简单的柱状图,本章节我们将绘制饼图饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不...
  • echarts饼图

    2019-12-20 18:04:53
    echarts饼图 1、效果 2、代码(复制可用) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t...

                                                                                  echarts饼图

    1、效果

    2、代码(复制可用)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>echarts饼图</title>
        <!-- 引入 echarts.js -->
        <script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
    </head>
    <body>
    
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
    <script type="text/javascript">
        //设置模拟数据
        let result = {
                'text':"今天\n明天",
                'data':[
                    {'name':'张三', 'value':20},
                    {'name':'李四', 'value':30},
                    {'name':'王五', 'value':40},
                    {'name':'赵六', 'value':50},
                ]
        };
    
        //处理数据
        let pieObj = [];
        let text = result.text;
        let data = result.data;
        let colors = ['#55d8fe','#ff8373', '#ffda83', '#a3a0fb'];
        let length = data.length;
        for(let i=0; i<length; i++){    //组装详情数据
            pieObj[i] = {
                name: data[i].name,
                value: data[i].value,
                label: {
                    rich: {
                        circle: {
                            borderColor: colors[i]
                        }
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowColor: colors[i]
                    }
                }
            };
        }
    
        //调用方法
        let pieChart = createPie('main', text, pieObj);
        window.onresize = function () {
            pieChart.resize();  //echarts宽高自适应
        };
    
        /**
         * 生成饼图方法
         * @param id 挂载对象
         * @param text 空心圆中的文字
         * @param paramObj 详情数据
         * @returns {*}
         */
        function createPie(id, text, paramObj){
            let pieChart = echarts.init(document.getElementById( id ));
            const pieOptions = {
                graphic: { // 空心圆中间文字
                    type: 'text',   //空心圆文字类型
                    left: 'center', //文字距离左边距离
                    top: 'center',  //文字距离右边距离
                    style: {
                        text: text,
                        textAlign:'center',
                        fill: '#999',
                        fontSize: 12
                    }
                },
                tooltip: { // 提示框
                    show: true,
                    formatter: "{b}:{c} ({d}%)" //字符串模板
                },
                series: { // 基础配置
                    //center:['50%', '50%'],    //饼图位移Div的位置
                    name: '名称',
                    type: 'pie',
                    roseType: true,
                    radius: ['35%', '65%'],
                    color: ['#55d8fe','#ff8373', '#ffda83', '#a3a0fb'],
                    data: paramObj
                }
            }
            pieChart.setOption(pieOptions);
            return pieChart
        }
    
    </script>
    </body>
    </html>

     

     

    展开全文
  • echarts饼图不显示数据为0的数据

    万次阅读 热门讨论 2017-06-20 16:35:57
    echarts饼图不显示数据为0的数据(测试可用,希望对有相关问题的人有所帮助)

    备注:文章里使用的是老版本的echart.js(2.x). 新版本(5.0.2)的echart.js的话可以参考https://blog.csdn.net/weixin_42080056/article/details/114523820

     

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关。

    如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好,

    会很突兀。

    当然如果你的业务需求就算是直线的话也要展示出来,那么下面的文章你可以略过了,对你画图表并没有什么帮助。

    言归正传,我这里会结合代码和图给大家看看效果,首先看看数据为0时的效果。效果如下

    附上代码:

    <html>
    <head>
    	<title>echarts测试</title>
    	<script type="text/javascript" src="echarts.js"></script>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
    	 <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="main" style="width: 600px;height:800px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    //这个为提示条,注意名称要和data里的name一一对应
                    data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
                },
    
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%', 
    
                        data:[
                            {value:235, name:'视频广告'},
                            {value:274, name:'联盟广告'},
                            {value:310, name:'邮件营销'},
                            {value:335, name:'直接访问'},
                            {value:1400, name:'搜索引擎'},
                            {value:0, name:'黑客'}
    
                            // {value:0, name:'黑客',itemStyle:{
                            //    normal:{
                            //         label:{
                            //             show: true,
                            //             formatter: function (params,option) {
                            //                 if(params.data.value == 0){
                            //                     // params.data.itemStyle.normal.labelLine.show = false;
                            //                     params.data.label.normal.show = false; 
                            //                     params.data.labelLine.normal.show = false;    
                            //                 }
                            //             },
                            //         },
                            //         labelLine: {
                            //             show: true
                            //         }
                            //    }
                            // }}
                        ]
                    }
                ]
            }
    
    //         var opt = option.series[0];
    // lineHide(opt);
    // //数据为零时隐藏线段
    // function lineHide(opt) {
    //     jQuery.each(opt.data, function (i, item) {
    //         if (item.value == 0) {
    //             item.itemStyle.normal.labelLine.show = false;
    //             item.itemStyle.normal.label.show = false;
    //         }
    //     });
    // }
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

     

     

     


    是不是很难受。

    下面我这里介绍下将0数据不在饼图上显示的几种方式。

    现附上最终效果图:

    1.在后台数据处理时候讲数据结果为0的数据过滤掉(这个大家根据业务情况做处理,这里只讲述下思路,不做具体展示)

    2.在option的定义里处理(和第三个方法本质上是一样的,2的方式对各个数据进行处理,更有针对性,而3对饼图里的所有数据都做统一处理,大家根据需要进行选择)

    附上代码:

     

    <html>
    <head>
    	<title>echarts测试</title>
    	<script type="text/javascript" src="echarts.js"></script>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
    	 <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="main" style="width: 600px;height:800px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    //这个为提示条,注意名称要和data里的name一一对应
                    data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
                },
    
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%', 
    
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'},
                            // {value:0, name:'黑客'}
                            //注意:这种方式,这个过滤只针对黑客这个属性,其他属性如果为0的话还是会显示的,
                            //这个是具体根据某个属性做的设置,如果需要对所有的属性都做处理,推荐使用第三种
                            {value:0, name:'黑客',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                        formatter: function (params,option) {
                                            if(params.data.value == 0){
                                                // params.data.itemStyle.normal.labelLine.show = false;
                                                params.data.label.normal.show = false; 
                                                params.data.labelLine.normal.show = false;    
                                            }
                                        },
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }}
                        ]
                    }
                ]
            }
    
    //         var opt = option.series[0];
    // lineHide(opt);
    // //数据为零时隐藏线段
    // function lineHide(opt) {
    //     jQuery.each(opt.data, function (i, item) {
    //         if (item.value == 0) {
    //             item.itemStyle.normal.labelLine.show = false;
    //             item.itemStyle.normal.label.show = false;
    //         }
    //     });
    // }
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

     

     

     

     

     

    3.写一个函数,遍历所有的数据,将为0的数据隐藏掉

    附上代码:

     

    <html>
    <head>
    	<title>echarts测试</title>
    	<script type="text/javascript" src="echarts.js"></script>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
    	 <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="main" style="width: 600px;height:800px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    //这个为提示条,注意名称要和data里的name一一对应
                    data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
                },
    
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%', 
    
                        data:[
                            //使用该种方法记得要加上itemStyle属性,不然会找不到show属性报错的
                            {value:335, name:'直接访问',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }},
                            {value:310, name:'邮件营销',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }},
                            {value:234, name:'联盟广告',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }},
                            {value:135, name:'视频广告',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }},
                            {value:1548, name:'搜索引擎',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }},
                            {value:0, name:'黑客',itemStyle:{
                               normal:{
                                    label:{
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true
                                    }
                               }
                            }}
                        ]
                    }
                ]
            }
    
            var opt = option.series[0];
            lineHide(opt);
            //数据为零时隐藏线段
            function lineHide(opt) {
                jQuery.each(opt.data, function (i, item) {
                    if (item.value == 0) {
                        item.itemStyle.normal.labelLine.show = false;
                        item.itemStyle.normal.label.show = false;
                    }
                });
            }
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

     

     

     

     

     

     

    展开全文
  • echarts饼图素材

    2017-12-11 15:40:33
    echarts饼图素材。。。。。。。。。。。。。。。。。。。
  • 如何给eCharts饼图区域指定颜色

    万次阅读 2018-05-26 14:47:52
    如何给eCharts饼图区域指定颜色 参考地址:如何给eCharts饼图区域指定颜色

    如何给eCharts饼图区域指定颜色

    参考地址:如何给eCharts饼图区域指定颜色
     

    展开全文
  • ECharts饼图实例

    万次阅读 2017-04-07 13:01:26
    ECharts饼图实例,eCharts饼图实例

    ECharts饼图实例

    1、引入jQuery的js文件

    2、引入echarts的js文件

    test.html页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AzzanTest</title>
    <script src="jQuery/jquery-1.9.1.min.js"></script>
    <script src="echarts/echarts.min.js"></script>
    </head>
    <body>
    <div id="echartsPie" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    	var echartsPie;
    	var json = [
    	            {value:30,name:'高圆圆'},
    	            {value:26,name:'赵丽颖'},
    	            {value:24,name:'江莱'}
    	            ];
    	var option = {
    		    title : {
    		        text: '女神年龄分布',
    		        subtext: '独家报道',
    		        x:'center'
    		    },
    		    tooltip : {
    		        trigger: 'item',
    		        formatter: "{a} <br/>{b} : {c} 岁"
    		    },
    		    legend: {
    		        orient : 'vertical',
    		        x : 'left',
    		        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:json
    		        }
    		    ]
    		}; 
    	
    	echartsPie = echarts.init(document.getElementById('echartsPie'));
    	$(function(){
    		echartsPie.setOption(option);
    		
    	});	                    
    </script>
    </body>
    </html>

    效果图:





    展开全文
  • Echarts饼图

    2021-04-06 11:16:16
    let myChart = echarts.init(document.getElementById('daEcharts3')); //获取dom元素 myChart.setOption({ //图表配置项 backgroundColor: '#fff', //图表背景色 title: { //图表标题 text: '报警类别'...
  • 本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个...
  • 解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例  var pieEchart = echarts.init(document.getElementById('pieEchart'));  // 指定图表的配置项和数据  var ...
  • echarts 饼图

    2018-08-20 17:10:02
    &lt;script&... var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title: { //标题组件,包含主标题和副标题。 ...
  • 今天小编就为大家分享一篇django echarts饼图数据动态加载的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Echarts饼图之数据展示

    2021-01-08 13:12:30
    Echarts饼图之数据展示 1、组件简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形...
  • 下面小编就为大家带来一篇echarts饼图扇区添加点击事件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 解决echarts饼图显示百分比,和显示内容字体及大小// 基于准备好的dom,初始化echarts实例var pieEchart = echarts.init(document.getElementById('pieEchart'));// 指定图表的配置项和数据var pieoption = {title :...
  • echarts饼图白色间隙

    万次阅读 2017-11-17 18:10:18
    echarts饼图白色间隙
  • echarts饼图自定义颜色

    2020-07-09 10:23:49
    echarts饼图自定义颜色 itemStyle: { normal: { color: function (params) { let colors = [ '#00FFFF', '#00FF00',

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,112
精华内容 3,644
关键字:

echarts饼图