echarts绘制嵌套环形图(南丁格尔玫瑰图)

根据专业总人数和学院总人数绘制嵌套环形图首先，echarts的基本步骤引入js，准备容器，初始化实例，<script src="lib/echarts.min.js"></script><style>.box{width: 900px;height: 500px;background-color:#BBFFFF;}</style><

Lorrey_

4621人浏览 · 2022-05-17 10:26:54

Lorrey_ · 2022-05-17 10:26:54 发布

根据专业总人数和学院总人数绘制嵌套环形图

首先，echarts的基本步骤

引入js，准备容器，初始化实例，

<script src="lib/echarts.min.js"></script>

<style>
    .box{
          width: 900px;
          height: 500px;
          background-color:#BBFFFF;
    }
</style>

<div class="box"></div>

var myChart = echarts.init(document.querySelector('.box'));

接下来开始最重要的配置项

title: {
    text: '某大学三大学院专业分布',
    x: 'center',  //设置主标题全部居中
    backgroundColor: 'blue',
    textStyle: {
        fontSize: 18,
        fontFamily: "黑体",
        color: "pink"
    },
},

tooltip: {  //配置提示框组件
    trigger: 'item',  //设置提示框的触发方式
    formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移入显示文字
},

 legend: {  //配置图例组件
     //纵向
     orient: 'vertical',
     x: 'left',
     y: 'top',
     data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术','2-云计算技术与应用', '3-投资与理财', '3-财务管理']
     },

下面是通过series配置系列列表，这里用的类型是饼图·pie

{
    name: '专业名称',
    type: 'pie',
    selectedMode: 'single', //是否选中
    radius: ['10%', '30%'], //设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
    center: ['50%', 250], //设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位
    label: { //设置标签位置，默认在饼状图外
        position: 'inner'
    },
    labelLine: { //指示线不显示
        show: false
    },
    data: [
        { value: 1200, name: '计算机学院' },
        { value: 900, name: '大数据学院' },
        { value: 600, name: '财金学院', selected: true }  //初始时为选中状态
    ]
},

{ //设置第二个数据系列格式
    name: '专业名称',
    type: 'pie',
    selectedMode: 'single', //是否选中
    radius: ['40%', '55%'], //设置半径
    center: ['50%', 250],  //设置圆心
    roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式
    data: [
        { value: 800, name: '1-软件技术' },
        { value: 400, name: '1-移动应用开发' },
        { value: 500, name: '2-大数据技术与应用' },
        { value: 200, name: '2-移动互联应用技术' },
        { value: 200, name: '2-云计算技术与应用' },
        { value: 400, name: '3-投资与理财' },
        { value: 200, name: '3-财务管理' }
    ]
},

完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>嵌套环形图</title>
        <!-- 引入 echarts.js -->
        <script src="lib/echarts.min.js"></script>
        <style>
            .box{
                  width: 900px;
                  height: 500px;
                  background-color:#BBFFFF;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <script type="text/javascript">
        var myChart = echarts.init(document.querySelector('.box'));
            //指定图表的配置项和数据
            var option = {
                title: {
                    text: '某大学三大学院专业分布',
                    x: 'center',  //设置主标题全部居中
                    backgroundColor: 'blue',
                    textStyle: {
                        fontSize: 18,
                        fontFamily: "黑体",
                        color: "pink"
                    },
                },
                tooltip: {  //配置提示框组件
                    trigger: 'item',  //设置提示框的触发方式
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {  //配置图例组件
                    //纵向
 		            orient: 'vertical',
                    x: 'left',
                    y: 'top',
                    data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术',
                            '2-云计算技术与应用', '3-投资与理财', '3-财务管理']
                    },
                    calculable: false,
                    series: [
                        {
                            name: '专业名称',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['10%', '30%'], //设置半径
                            center: ['50%', 250],
                            label: {
                                position: 'inner'
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1200, name: '计算机学院' },
                                { value: 900, name: '大数据学院' },
                                { value: 600, name: '财金学院', selected: true }  //初始时为选中状态
                            ]
                        },
                        {
                            name: '专业名称',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['40%', '55%'],
                            center: ['50%', 250],  //设置圆心
                            roseType: 'area',
                            data: [
                                { value: 800, name: '1-软件技术' },
                                { value: 400, name: '1-移动应用开发' },
                                { value: 500, name: '2-大数据技术与应用' },
                                { value: 200, name: '2-移动互联应用技术' },
                                { value: 200, name: '2-云计算技术与应用' },
                                { value: 400, name: '3-投资与理财' },
                                { value: 200, name: '3-财务管理' }
                            ]
                        },
                    ]
                };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);

            </script>
    </body>
</html>

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

所有评论(0)

查看更多评论

Lorrey_

@Lorrey_

已为社区贡献1条内容