精华内容
下载资源
问答
  • 考勤环形图

    2018-12-19 10:39:31
    环形图,前端jQuery插件,多种环形图
  • echart 环形图柱状图

    2019-02-21 22:45:19
    用echart实现的柱状图,折线图,环形图,柱状环形图
  • 问题详细描述:制作echarts环形图环形图中间默认显示总量,鼠标移入对应的部分,中间显示相对应的数量。 问题解决方案:利用标题和副标题展示默认总量,再在series设置鼠标移入移出展示的数量以及位置。 详细...

    问题详细描述:制作echarts环形图,环形图中间默认显示总量,鼠标移入对应的部分,中间显示相对应的数量。

    问题解决方案:利用标题和副标题展示默认总量,再在series设置鼠标移入移出展示的数量以及位置。

    详细步骤如下:1.设置标题和副标题展示默认总量,设置位置以及样式。代码如下:

    title: {
              text: '总任务数',
              subtext: 2,
              left: 'center',
              top: '45%',
              itemGap: 2,
              textStyle: { // 标题样式
                fontSize: 20, // 字号
                color: '#333' // 颜色
              },
              subtextStyle: { // 副标题样式
                color: '#333', // 字体颜色
                fontWeight: 700, // 字体加粗
                fontSize: 18  // 字号
              }
            },

    2. 设置鼠标移入移出展示的数据量

    series: [
              {
                name: '文件清理情况',
                type: 'pie',
                radius: ['40%', '60%'],   //  第一个为环形图的内半径 ,第二个值为环形图的外半径
                data: [
                  {
                    value: 2,
                    name: '已完成',
                    itemStyle: {
                      color: '#4466d2'
                    },
                    label: {
                      textStyle: {
                        color: '#4466d2'
                      }
                    }
                  },
                  {
                    value: 0,
                    name: '未完成',
                    itemStyle: {
                      color: '#fdbb24'
                    },
                    label: {
                      textStyle: {
                        color: '#fdbb24'
                      }
                    }
                  }
                ],
                label: {
                  normal: {
                    show: true,
                    position: 'center',  // 设置居中
                    formatter: function (data) { // 设置圆饼图中间文字排版
                      return data.name + '\n' + data.value  // 对应的名字和值
                    },
                    textStyle: {
                      fontSize: '0'
                    }
                  },
                  emphasis: {
                    show: true, // 文字至于中间时,这里需为true
                    textStyle: { // 设置文字样式
                      fontSize: '18',
                      color: '#333',
                      fontWeight: 700
                    }
                  }
                }
              }
            ]

    3. 实现效果

    第二个问题:鼠标移入环形图会抖动

    解决方案:

    tooltip: {
              transitionDuration: 0
            },

     

    展开全文
  • iOS饼状图环形图

    2016-02-03 17:14:59
    iOS饼状图,环形图 点击变粗, 任意修改颜色大小。半径,宽度
  • 环形图 示例

    2014-10-12 09:20:14
    涉及到报表进行环形图展示的时候,可以通过颜色区分显示百分比
  • 圆角环形图

    2021-06-08 21:07:21
    圆角环形图的画法。其实格式与饼图类似但是相较于饼图,圆角环形图更加美观和清爽。 一个简单的圆角环形图格式如下: option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, ...

    圆角环形图
    圆角环形图的画法。其实格式与饼图类似但是相较于饼图,圆角环形图更加美观和清爽。

    一个简单的圆角环形图格式如下:

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ]
            }
        ]
    };
    

    在实际应用中将value 值传入即可,

    展开全文
  • web前端3d环形图

    2018-02-02 16:56:32
    3d环形图可以用鼠标拖拽 把里面的事件改了可以在手机上拖拽
  • python画环形图的方法

    2020-09-17 16:27:47
    主要为大家详细介绍了python画环形图的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • ECharts半圆环形图

    2020-05-21 17:11:59
    ECharts半圆环形图 1、原文:ECharts半圆环形图 去看看 2、效果 3、完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts半圆环形图</title&...

                                                            ECharts半圆环形图

    1、原文:ECharts半圆环形图 去看看

    2、效果

    3、完整代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts半圆环形图</title>
        <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        <!-- 引入 echarts.js -->
        <script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1526486305040"></script>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id='consume_pie' style="width:500px;height:400px;margin-left:20px;"> </div>
    </body>
    </html>
    <script type="text/javascript">
        loadRingChart();	//加载半圆环形图
    
        //加载半圆环形图
        function  loadRingChart (){
            var myChart = echarts.init(document.getElementById( 'consume_pie' ));	//图表的ID
            var option = {
                title: {
                    "text": '姓名',
                    subtext:'1516',
                    itemGap:3,
                    "x": '49%',
                    "y": '62%',
                    textAlign: "center",
                    "textStyle": {
                        "fontWeight": 'normal',
                        "fontSize": 12,
                        color:'#aaaaaa',
    
                    },
                    "subtextStyle": {
                        "fontWeight": 'normal',
                        "fontSize": 12,
                        color:'#aaaaaa',
                        lineHeight:14
                    },
    
                },
    
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: ['10%', '50%']
                },
                /*legend: {
                    x: 'left',
                    data:['视频','影院','直播']
                },*/
                "color": ["#0696ff","#7ed321","#ffc31a", "transparent"],
                "startAngle": 180,
                series: [
                    {
                        name:'',
                        type:'pie',
                        radius: ['45%', '90%'],
                        avoidLabelOverlap: false,
                        startAngle: 180,
                        center:["50%","70%"],
                        label: {
    
                            normal: {
                                position: 'inner',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[{value:335, name:'姓名0'},{value:310, name:'姓名1'},{value:234, name:'姓名2'},{value:879, name:'',tooltip:{formatter:function(a){return ""}}}]
                    },
    
                ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption( option );
        }
    
    </script>

     

    展开全文
  • 环形图对于一个页面的提高,毋庸置疑,它对于项目模块来说是一个大的提升,使用户体验度更好,数据更加直观
  • 数据环形图+等高线图,环形数据 程序演示视频,进入主页观看
  • qt炫丽的动态环形图源码,动态饼状图,动态扇形图
  • 主要对echarts中饼图或者环形图刷新或者首次进去页面中,饼图或者环形图能默认显示某一部分使之高亮,并且能动态切换饼图或者环形图高亮的区域
  • 自定义View之环形图

    2017-07-04 09:28:26
    因为项目需要写一个环形图,可以表示所占比例也可以表示进度,于是自己画了一个,觉得蛮有意思的,分享出来给大家看看。
  • 安卓各种折线图,各种饼状图,各种柱状图,各种环形图等图形大集合,实现了各种动画效果,可以运行,大家可以借鉴一下。
  • echarts环形图

    2018-08-22 17:39:10
    echarts环形图的制作 环形图与扇形图的差别就是在radius: '55%',和radius: ['20%','45%'],就是插入的圆环是一个圆还是两个圆的区别,这里的数字代表的是半径的值,然后就可以和之前制作扇形图一样制作环形图了。 ...

    echarts环形图的制作

    环形图与扇形图的差别就是在radius: '55%',radius: ['20%','45%'],就是插入的圆环是一个圆还是两个圆的区别,这里的数字代表的是半径的值,然后就可以和之前制作扇形图一样制作环形图了。

    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
    
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    title : {
                        text: '办税人年龄段分布',
                        x:'center'
                    },
    
    
                    // tooltip: {
                    //     trigger: 'item',
                    //     formatter: "{a} <br/>{b}: {c} ({d}%)"
                    // },
                    backgroundColor:'#fff',
                    legend: {
                        // orient: 'vertical',
                        x: 'left',
                        y:'bottom',
                        data:['20以下','20-30','30-40','40-50','50以上']
                    },
                    calculable:true,
                    series: [
    
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['20%','45%'],
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : true,
                                        formatter: "{b}:  ({d}%)",
                                    },
                                    labelLine : {
                                        show : true,
                                        // length:10
                                    },
    
                                        borderWidth:5, //设置border的宽度有多大
                                        borderColor:'#fff',
                                },
                            },
    
                            data:[
    
                                {value:335, name:'20以下'},
                                {value:310, name:'20-30'},
                                {value:234, name:'30-40'},
                                {value:135, name:'40-50'},
                                {value:1048, name:'50以上'},
    
                            ]
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    </script>

    制作出来的效果如下
    这里写图片描述
    这里做出来的环形图有一个外边框,我制作的时候要求有,如果不想要可以将其去除,对应上面的代码calculable:true,将其改为false即可。还有一个地方值得注意的是我这里加了一个borderWidth:5;设置的是每个扇环之间的间隔距离,如果不想要也可以删除。
    利用echarts做图表非常的方便,但是细节上还需要多加学习,这是我学习之后的直观感觉

    展开全文
  • 自定义的环形图,使用Paint画圆和若干不同颜色的扇形拼接重叠而成,使用ValueAnimator进行动画的控制和绘制...
  • tableau可视化分析-案例集锦-环形图
  • highcharts环形图

    2020-10-15 15:51:05
    highcharts画嵌套环形图 总结:看官方文档找配置项,首先确定你找的是那部分 1图例(legend)部分 2数据配置列(serise) 3数据提示信息(tooltip)也就是鼠标经过时显示的数据 注意:以上板块都是直接在主配置...
  • 年份对比环形图PPT图表.pptx
  • 3d环形图片墙特效

    2011-09-16 14:13:24
    3d环形图片墙特效
  • 环形图防止标签重叠以及各类数据之间留白色间隙的相关配置:
  • Echarts圆角环形图

    千次阅读 2020-06-10 18:21:59
    结果图例 ![环形图](https://img-blog.csdnimg.cn/20200610181442713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl...-- 环形图组件 --> &
  • Flash环形图片特效.rar

    2019-07-10 18:30:42
    Flash环形图片特效,附上fla格式的源码文件,中间的小按钮可以控制图片滚动,点击图片可以转至对应的链接。
  • ECharts 之 环形图

    千次阅读 2018-12-17 10:47:21
    环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小。 radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形 效果图: 代码如下: &lt;html&gt;...
  • 环形图 文字说明PPT模板.pptx,准确来说,这套模板包含环形图和饼状图,常用模板,免费下载。
  • Echarts 环形图 颜色渐变
  • 带有指引线的环形图

    2018-09-27 14:41:25
    环形图上有多个区域,每个区域都有自己的说明,说明文字有线上和线下两种
  • 前言:项目开发过程中,遇到有多个环形图,通过map生成后,发现同一段代码遍历出来,竟然大小不一致,但是我在初始化生成图表时设置过了大小,百度一番也没找到类似的问题,代码如下: 后来发现每个环形图具体...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,066
精华内容 20,026
关键字:

环形图