1.上一篇中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。

2.itemStyle都会有normal和emphasis两个选项，normal选项是正常展示下的样式，emphasis是鼠标 hover 时候的高亮样式。也可以把阴影的效果设置在hover的时候。

3.背景色是全局的，所以直接在 option 下设置backgroundcolor。

4.代码展示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ECharts练习</title>

        <script type="text/javascript" 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 = {

                title: {

                    text: '饼状图--南丁格尔图',//标题文本内容

                    textStyle: {//设置标题的文本样式

                        color: '#ffffff'

                    }

                },

                backgroundColor: '#2c343c',

                visualMap: {

                    // 不显示 visualMap 组件，只用于明暗度的映射

                    show: false,

                    // 映射的最小值为 80

                    min: 80,

                    // 映射的最大值为 600

                    max: 600,

                    inRange: {// 明暗度的范围是 0 到 1

                    colorLightness: [0, 1]

                    }

                },

                series: [{

                    name: '访问来源',

                    type: 'pie',

                    radius: '55%',

                    roseType: 'angle',

                    data: [

                    {value: 400,name: '搜索引擎'},

                    {value: 335,name: '直接访问'},

                    {value: 310,name: '邮件营销'},

                    {value: 274,name: '联盟广告'},

                    {value: 235,name: '视频广告'}

                    ],

                    label: {

                        normal: {

                            textStyle: {

                                color: 'rgba(255, 255, 255, 0.3)'

                            }

                        }

                    },

                    labelLine: {

                        normal: {

                            lineStyle: {//将标签的视觉引导线的颜色设为浅色

                                color: 'rgba(255, 255, 255, 0.3)'

                            }

                        }

                    },

                    itemStyle: {//阴影的配置,还可以设置扇形的颜色，在normal中编辑color来设置，设置后的扇形颜色是一样的

                        normal: {

                            // 阴影的大小

                            shadowBlur: 200,

                            // 阴影颜色

                            shadowColor: 'rgba(0, 0, 0, 0.5)'

                        }

                    }

                }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

        </script>

    </body>

</html>

5.效果图展示

ECharts学习（2）--饼状图之南丁格尔图的更多相关文章

  1. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  2. ECharts大屏可视化【词云，堆积柱状图，折线图，南丁格尔玫瑰图】

    一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 <!DOCTYPE html> <htm ...

  3. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

  4. echarts 柱状图和饼状图动态获取后台数据

    运用echarts来实现图表 1.首先下载echarts包  http://echarts.baidu.com/echarts2/doc/example.html,在这里我下载的是 2.将echart ...

  5. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  6. 关于echarts中的饼状图的label文字显示过长的问题

    label: { normal: { fontSize: 14, formatter(v) { let text = v.name let count = text.indexOf('￥') cons ...

  7. Echarts 学习系列(2)-常见的静态ECharts图

    目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...

  8. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  9. Echarts学习总结（一）-----柱状图

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...

随机推荐

  1. 主成分分析（principal components analysis, PCA）

    原理 计算方法 主要性质 有关统计量 主成分个数的选取 ------------------------------------------------------------------------ ...

  2. Snort 安装 配置 - Archlinux

    About Snort Snort是一套开放源代码(OpenSource and free)的网络入侵预防软件(NIPS)与网络入侵检测软件(NIDS).Snort使用了以侦测签名(signature ...

  3. Java中 实现多线程成的三种方式（继承，实现，匿名内部类）

    ---------------------------------------------------------------------------------------------------- ...

  4. 基于Server-Sent Event的简单在线聊天室

    Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...

  5. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  6. 【从零开始学习Hadoop】--1.Hadoop的安装

    第1章 Hadoop的安装1. 操作系统2. Hadoop的版本3. 下载Hadoop4. 安装Java JDK5. 安装hadoop6. 安装rsync和ssh7. 启动hadoop8. 测试had ...

  7. ARM汇编与C混合编程

    GNU内联汇编 内联汇编即在C中直接使用汇编语句进行编程,使程序可以在C程序中实现C语言不能完成的一些工作,例如,在下面几种情况中必须使用内联汇编或嵌入型汇编 程序中使用饱和算术运算(Saturati ...

  8. android onActivityResult无效或先执行或无回传问题

    我的问题属于第一种情况,更改后下确有回传结果. (http://www.cnblogs.com/tt_mc/p/3586834.html) Android Activity的加载模式和onActivi ...

  9. STM32电机控制器小心得

    首先声明的是本人刚刚大学毕业进入电机控制这个行业,以前在学校也做过类似51的实验,然而在工作中发现那些东西是皮毛的不能再皮毛,我现在在公司也算是一个实习生,主要工作是改各厂家对控制器的功能需求,(其实 ...

  10. 【2016-11-6】【坚持学习】【Day21】【子窗口关闭时，同步关闭它的主窗口（方法二）】

    根据上文,在子窗口设置一个委托.然后在子窗口关闭事件,执行委托实例,然后在主窗口增加监听委托的方法.... 想想,本事关闭事件就是一个特殊的委托.那么干嘛还要特意去声明一个新的呢?多此一举. 于是有下 ...