美文网首页
echarts实现南丁格尔图（angle）

echarts实现南丁格尔图（angle）

作者: John_Phil | 来源:发表于2019-06-10 14:09 被阅读0次

首先要实现一个饼状图
将type类型设置为pie

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px; border:1px black solid;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '100px',
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ]
                  };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
    </script>
</body>
</html>
饼状图

接着设置
roseType: 'angle'
当然可以有两种选择 radius（圆心角展现数据百分比，半径展现数据大小） 或者 area（圆心角相同，仅通过半径展示数据大小）


roseType 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle', //radius  、area
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ]
                  };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
angle radius area

通过测试我们发现 默认的angle 与radius一致 即 圆心角展现数据百分比，半径展现数据大小。

我们也可以通过阴影的配置使页面更有立体感
其中'rgba(0, 0, 0, 0.5)'
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。(颜色的透明度)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              itemStyle: {
                                    normal: {
                                        // 阴影的大小
                                        shadowBlur: 200,
                                        // 阴影水平方向上的偏移
                                        shadowOffsetX: 0,
                                        // 阴影垂直方向上的偏移
                                        shadowOffsetY: 0,
                                        // 阴影颜色
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ]
                  };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
阴影 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              itemStyle: {
                                    normal: {
                                        // 阴影的大小
                                        shadowBlur: 200,
                                        // 阴影水平方向上的偏移
                                        shadowOffsetX: 0,
                                        // 阴影垂直方向上的偏移
                                        shadowOffsetY: 0,
                                        // 阴影颜色
                                        shadowColor: 'rgba(0, 0, 99, 0.7)'
                                    }
                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ]
                  };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
阴影2

再加入一些动态效果例如悬停时扇区发生改变 （类似css中的伪类）
图形样式下有 normal（正常显示时样式）与emphasis（高亮时样式）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              itemStyle: {
                                    normal: { //图形默认下的样式
                                        // 阴影的大小
                                        shadowBlur: 200,
                                        // 阴影水平方向上的偏移
                                        shadowOffsetX: 0,
                                        // 阴影垂直方向上的偏移
                                        shadowOffsetY: 0,
                                        // 阴影颜色
                                        shadowColor: 'rgba(0, 0, 99, 0.5)'
                                    },
                                    emphasis: { //高亮的扇区和标签样式
                                      shadowBlur: 200,
                                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }

                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ]
                  };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
放大前效果：阴影为蓝色
悬停放大后效果：阴影颜色改变

当前样式不能满足页面设计需求，需要改变背景颜色及文字颜色。这时我们可以设置
backgroundColor 属性与textStyle属性


textStyle api 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
                        series : [
                                  {
                                      name: '访问来源',
                                      type: 'pie',
                                      radius: '55%',
                                      roseType: 'angle',
                                      itemStyle: {
                                            normal: {
                                                // 阴影的大小
                                                shadowBlur: 200,
                                                // 阴影水平方向上的偏移
                                                shadowOffsetX: 0,
                                                // 阴影垂直方向上的偏移
                                                shadowOffsetY: 0,
                                                // 阴影颜色
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            },
                                          emphasis: {
                                              shadowBlur: 200,
                                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                                          }
        
                                        },
                                      data:[
                                          {value:235, name:'视频广告'},
                                          {value:274, name:'联盟广告'},
                                          {value:310, name:'邮件营销'},
                                          {value:335, name:'直接访问'},
                                          {value:400, name:'搜索引擎'}
                                      ]
                                  }
                              ],     
                        backgroundColor: '#2c343c', //改变背景颜色
                        textStyle: {                            //改变字体颜色
                                color: 'rgba(255, 255, 255, 0.3)'
                        }
                  };
   
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
改变背景颜色与字体样式

以上是听过全局属性进行配置，我们也可以通过 系列（series）单独设置每个系列的文本与其他线条颜色


label与lableline作用 label与lableline api 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              label: { //系列内配置文本颜色
                                    normal: {
                                        textStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                labelLine: {//系列内配置其他线条样式
                                    normal: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.1)'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ],
                      
                      backgroundColor: '#2c343c',
                      

                  };
        
        


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
通过系列内修改字体样式与线条

扇形的颜色也可以改变 在itemStyle下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              label: {
                                    normal: {
                                        textStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        // 设置扇形的颜色
//                                      color: '#c23531',
                                         color: 'green',
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ],
                      backgroundColor: '#2c343c'
                  };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
改变扇形颜色

有人说颜色一样没有层次感，想通过明暗渐变表现出层次感
使用 visualMap 可以调节亮暗区间，以及根据明亮程度取色。


image.png

如果想不被visualmap修饰可以在series里的对应数据项中设置


不被visualmap修饰 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              label: {
                                    normal: {
                                        textStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        // 设置扇形的颜色
//                                      color: '#c23531',
                                        color:'green',
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ],
                      
//                    backgroundColor: '#2c343c',
                      backgroundColor: 'grey',
                      visualMap: {
                            // 不显示 visualMap 组件，只用于明暗度的映射
                            show: true,
                            // 映射的最小值为 80
                            min: 80,
                            // 映射的最大值为 600
                            max: 600,
                            inRange: {
                                // 明暗度的范围是 0 到 1
                                colorLightness: [0, 1]
                            }
                        }
                  };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
绿色渐变色

如果想要设置每个扇区的颜色可以再color数组中设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                color: ['green','red','pink','blue','yellow'],
                series : [
                          {
                              name: '访问来源',
                              type: 'pie',
                              radius: '55%',
                              roseType: 'angle',
                              label: {
                                    normal: {
                                        textStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        // 设置扇形的颜色
//                                      color: '#c23531',
//                                       color: 'green',
//                                      color: ['green','red','pink','blue','yellow'],
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        
                                    }
                                    
                                },
                              data:[
                                  {value:235, name:'视频广告'},
                                  {value:274, name:'联盟广告'},
                                  {value:310, name:'邮件营销'},
                                  {value:335, name:'直接访问'},
                                  {value:400, name:'搜索引擎'}
                              ]
                          }
                      ],
                      backgroundColor: '#2c343c'
                  };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
每个扇区的颜色被指定

相关文章

网友评论

      本文标题：echarts实现南丁格尔图（angle）

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|echarts实现南丁格尔图（angle）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！