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

2.itemStyle都会有normalemphasis两个选项,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构建个性化定制的数据可视化图表&amp;&amp;两个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. 模板化的七种排序算法,适用于T* vector&lt;T&gt;以及list&lt;T&gt;

    最近在写一些数据结构以及算法相关的代码,比如常用排序算法以及具有启发能力的智能算法.为了能够让写下的代码下次还能够被复用,直接将代码编写成类模板成员函数的方式,之所以没有将这种方式改成更方便的函数模板 ...

  2. 学术作为一种志业 马克斯&#183;韦伯Max Weber。

    注:原内容来自优酷自频带:梁文道 一千零一夜 学术作为一种志业马克斯·韦伯Max Weber. 韦伯是社会学的三大创始人之一.另外两个,一个是法国的涂尔干,还有一个就是我们中国人都知道的马克思.在其& ...

  3. Java特性-动态代理

    代理在开发中无处不在: 我们完成一个接口开发A,接口下有很多个实现类,这些类有些共同要处理的部分,比如每一个类都定义了接口A中的方法getXX(String name).我现在想把每次调用某个实现类的 ...

  4. MySQL MHA配置常见问题

    MHA在MySQL数据库中被广泛使用,它小巧易用,功能强大,实现了基于MySQL replication架构的自手动主从故障转移,从库重定向到主库并自动同步.尽管如此,在部署配置的过程中,由于疏忽总难 ...

  5. MVC 路由

    1.ASP.NET MVC框架中提供的URL路由机制能够使URL不必映射到应用程序的特定物理文件. 2.当用户访问基于MVC模式创建的网站时,只需要在浏览器地址栏里输入类似于下面的URL: http: ...

  6. 【转载】Jmeter获取响应结果中参数出现的次数

    在测试中,有时候会遇到要统计响应结果中某个参数出现了多少次,如果量级很大,一个一个数不太现实,下面讲一下实现自动打印出该参数出现的次数的方法. 例如我的响应信息为:{"ip":&q ...

  7. xcode7.3 iTunes Store operation failed解决

    使用apploader上传程序 提示:如果您安装了XCode开发环境.在/Applications/XCode.app/Contents/Applications目录中可以找到Application ...

  8. Django:(博客系统)添加文章(中文)出现UnicodeEncodeError乱码

    添加文章时出现了一个UnicodeEncodeError乱码问题 在添加文章时,抛出了异常: 解决方案,修改manage.py(添加import sys reload(sys) sys.setdefa ...

  9. JQ + CSS实现浪漫表白必备

    JQ + CSS实现浪漫表白必备页面 效果图: 图片素材 : 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta ...

  10. IOS中使用轻量级数据库

    IOS中使用轻量级数据库 目录 概述 IOS中的轻量级数据库 sqlite的方法 数据库的实用操作 第三方类库 FMDatabase 概述 IOS中的轻量级数据库 sqlite的方法 sqlite3 ...