echarts的简单应用之饼图(代码片段)

关键词：

　　接上一篇文章：

echarts的简单应用之（一）柱形图：https://www.cnblogs.com/jylee/p/9359363.html

本篇文章讲述饼图，撇过折线图不说，是因为折线图与柱形图的数据传递方式一样，能理解柱形图就能理解折线图。

Echarts官网上有实例可以查看到静态的饼图模型，这里只说后台数据的传递格式。

 解释： 第一行中的代码中pie是图表的id选择器；

　　levels: 等级的数组；

　　brower： 是一个name，value相对应的数组，这也是饼图的数据格式的要求，当然你也可以直接在后台数据中封装好再传到前台。

 1 var myChart = echarts.init(pie[0]);
 2         
 3       var  levels = [];
 4       var  brower =[];
 5         // 从后台获取数据
 6         $.ajax(
 7             type : "post",
 8             url : "getPieInfo.action",
 9             dataType: "json",
10             data : ,
11             success : function(result)
12                 if(result != null && result.length > 0)
13                     for(var i=0; i<result.length; i++)
14                          levels.push(result[i].level);
15                          brower.push(
16                              value: result[i].num,
17                              name : result[i].level
18                          )
19                      
20                 
21                 myChart.setOption(
22                     title : 
23                     text: ‘告警级别比例统计‘,
24 //                    subtext: ‘自定义数据‘,
25                     x:‘center‘
26                 ,
27                 tooltip : 
28                     trigger: ‘item‘,
29                     formatter: "a <br/>b : c (d%)"    // 拖拽重新计算
30                 ,
31                 legend: 
32                     orient : ‘vertical‘,
33                     x : ‘left‘,
34                     data: levels
35                 ,
36                 toolbox: 
37                     show : true,
38                     feature : 
39                         mark : show: true,
40                         dataView : show: true, readOnly: false,    // 数据视图
41                         magicType :         // 动态类型转换
42                             show: true, 
43                             type: [‘pie‘, ‘funnel‘],    // 饼图、漏斗形互转
44                             option: 
45                                 funnel: 
46                                     x: ‘25%‘,
47                                     width: ‘50%‘,
48                                     funnelAlign: ‘center‘    // 水平方向上对齐格式
49                                 
50                             
51                         ,
52                         restore : show: true,    // 还原
53                         saveAsImage : show: true    // 保存图片
54                     
55                 ,
56                 calculable : true,    //拖拽重新计算
57                 series : 
58                         name:‘访问来源‘,
59                         type:‘pie‘,
60                         radius : ["45",‘70%‘],        // 内半径，外半径
61 //                        center: [‘50%‘, ‘60%‘],        // 圆心坐标
62                         data: brower
63                     
64                 );
65             
66         )

后台是基于SSM框架写的，不多叙述，有问题的话欢迎交流。

数据库如下：

显示结果：

 如果文中有什么错误或问题可以和我交流，邮箱[email protected]

小程序里echarts画的饼图在安卓手机上效果不正常？

...码片段吗标准饼图，中心，半径设置，如下图所示：百度echarts之饼图标准环形图，中心，半径设置，文本标签显示，如下图所示：百度echarts之饼图嵌套饼图，多个饼图，中心，半径设置，文本标签显示，如下图所示：百度echarts... 查看详情

qt之饼图

1 饼图(piechart)1.1 Charts模块 Qt库由许多模块组成，其中的QtCharts，包含了一系列图表组件，使用前要在.pro中添加如下语句：QT　　+=charts cpp文件中，还需添加头文件和声明命名空间#include<QtCharts>usingnamespaceQtCharts... 查看详情

mpandroidchart开源图表库之饼状图(代码片段)

...计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图和散点图。GitHub地址：https://github.com 查看详情

echarts常用方法，饼图切换圆环中文字(代码片段)

在echarts的饼图应用时，遇到过一个需求就是鼠标移到半环上可以切换环中的文字，同时支持legend点击事件。误区是，鼠标移动到环上重新渲染option，以切换内部的文字。重新渲染option的做法，不能保存你原有的legend状态。找到... 查看详情

使用echarts几分钟制作出折线图饼图柱状图等(代码片段)

ECharts，缩写来自EnterpriseCharts。ECharts，不仅是国内关注度最高的开源项目，还是中国第一个也是目前唯一一个入选了GithubExplorerDataVisualization板块的开源项目。这里咱们结合上篇提到的Bootstrap简单栅格框架，来做一个小小的布局... 查看详情

tableau图表大全19之饼图(常用于占比)

文章目录饼图样式构建饼图GIF演示饼图样式饼图是数据可视化中最基本的图表之一。它在"列"或"行"上没有任何字段。饼图用于显示比例数据。数据集：示例超级存储数据集构建饼图打开超市数据集。在"标记... 查看详情

31-vue之echarts-饼图(代码片段)

ECharts-饼图前言饼图的特点饼图的基本实现饼图的常见效果显示数值南丁格尔图选中效果圆环前言本篇来学习饼图的实现饼图的特点饼图可以很好地帮助用户快速了解不同分类的数据的占比情况饼图的基本实现ECharts最基本的代码... 查看详情

echarts作图之饼状图联动

Echarts版本：2.2.7具体思路，通过对饼状图对象注册ecConfig.EVENT.PIE_SELECTED事件，对饼状图点击的块进行判断，根据需求改变series中的对象以及对象中的数据，从而进行改变饼状图的层的展示，如下图所示（数据来自官方网站），点... 查看详情

echarts饼图的配置封装组件的注意点(代码片段)

...的间隔4==>legend通常是是解释说明每一个部分的如果将echarts封装成了一个组件，那么你需要注意的事，数据可能时有的，但是echarts图像没有显 查看详情

echarts，基础(代码片段)

一、上一章，我们按照网上的案例，写了一个非常简单的图表。这一章让我们来继续玩耍它。二、个性化图表样式1.南丁格尔图（饼图）把鼠标移到上面某个区域，相应区域则是会变大的哦。1.因为这个南丁格尔图（饼图），主... 查看详情

饼图（用echarts绘制）(代码片段)

目录常见效果显示数值      label.formatter圆环    设置两个半径radius:[50%,70%](百分比参照的是容器宽度和高度中较小的那一个的一半)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahtt 查看详情

echarts饼图学习(代码片段)

效果图实现代码可直接复制运行：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>饼图</title> <scriptsrc="https://cdn.staticfile.org/echarts/4 查看详情

echarts饼图学习(代码片段)

效果图实现代码可直接复制运行：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>饼图</title> <scriptsrc="https://cdn.staticfile.org/echarts/4 查看详情

qt+echarts开发笔记：echarts的饼图介绍基础使用和qt封装百分比图demo(代码片段)

...并预留了Qt模块对外的基础接口。<br>Demo演示<br>ECharts代码效果调试  使用ECharts的在线调试器，先调试出大致预期的效果。option=lege 查看详情

python测试开发django-147.echarts生成饼图(代码片段)

前言ECharts是一个使用JavaScript实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts下载与使用可以在直接下载echarts.min.js并用<script>标签引入。下载地址https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js开发环境下可... 查看详情

vueecharts饼图环形（随着legend动态显示数据总数）(代码片段)

目录1.安装echarts2.引入echarts3.创建要放入echarts实例的一个盒子 4.创建echarts实例5.随着legend动态显示数据总数效果视频1.安装echartsnpminstallecharts--save2.引入echarts在当前vue文件中引入echarts 如下图所示：3.创建要放入echarts实例的... 查看详情

python测试开发django-148.echarts生成环状图(饼图)(代码片段)

前言ECharts是一个使用JavaScript实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts下载与使用可以在直接下载echarts.min.js并用<script>标签引入。下载地址https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js开发环境下可... 查看详情

echarts饼图指示器文字颜色设置不同(代码片段)

学习记录，平时开发时遇到过的问题echarts饼图label文字颜色💬需求：绘制一份环形饼状图，并且有指示器文本标签（文字的颜色需要和各部分相同）数据：pieData:[name:'犯人',value:30,name:'官差'... 查看详情