接上一篇文章:

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

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

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

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

  levels: 等级的数组;

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

 var myChart = echarts.init(pie[0]);

       var  levels = [];
var brower =[];
// 从后台获取数据
$.ajax({
type : "post",
url : "getPieInfo.action",
dataType: "json",
data : {},
success : function(result){
if(result != null && result.length > 0){
for(var i=0; i<result.length; i++){
levels.push(result[i].level);
brower.push({
value: result[i].num,
name : result[i].level
})
}
}
myChart.setOption({
title : {
text: '告警级别比例统计',
// subtext: '自定义数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" // 拖拽重新计算
},
legend: {
orient : 'vertical',
x : 'left',
data: levels
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false}, // 数据视图
magicType : { // 动态类型转换
show: true,
type: ['pie', 'funnel'], // 饼图、漏斗形互转
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center' // 水平方向上对齐格式
}
}
},
restore : {show: true}, // 还原
saveAsImage : {show: true} // 保存图片
}
},
calculable : true, //拖拽重新计算
series : {
name:'访问来源',
type:'pie',
radius : ["45",'70%'], // 内半径,外半径
// center: ['50%', '60%'], // 圆心坐标
data: brower
}
});
}
})

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

数据库如下:

显示结果:

如果文中有什么错误或问题可以和我交流,邮箱hellojylee@163.com.

echarts的简单应用之(二)饼图的更多相关文章

  1. echarts之简单的入门——【二】再增加一个柱状图和图例组件

    echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...

  2. ECharts使用心得总结(二)

    Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一下.之前 ...

  3. ECharts的简单使用

    ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...

  4. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  5. html css的简单学习(二)

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  6. Win8 Metro(C#)数字图像处理--2.56简单统计法图像二值化

    原文:Win8 Metro(C#)数字图像处理--2.56简单统计法图像二值化  [函数名称] 简单统计法图像二值化 WriteableBitmap StatisticalThSegment(Wr ...

  7. 自己制作一个简单的操作系统二[CherryOS]

    自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...

  8. 《仙剑奇侠传柔情版》Java的简单实现(二)

    基于<仙剑奇侠传柔情版>Java的简单实现(二) 2018-12-02 by Kris 需要上次的GameFrame.class中窗口框架承载:https://www.cnblogs.co ...

  9. Action的三种实现方式,struts.xml配置的详细解释及其简单执行过程(二)

    勿以恶小而为之,勿以善小而不为--------------------------刘备 劝诸君,多行善事积福报,莫作恶 上一章简单介绍了Struts2的'两个蝴蝶飞,你好' (一),如果没有看过,请观 ...

随机推荐

  1. 如何快捷安装并配置MySQL 下载破解Navicat for mysql

    首先,要先下载MySQL,进官网下载相应的mysql版本,这个不收费,实在不知道的可以参考一下这篇:https://blog.csdn.net/qq_37172528/article/details/ ...

  2. 转】[1.0.2] 详解基于maven管理-scala开发的spark项目开发环境的搭建与测试

    场景 好的,假设项目数据调研与需求分析已接近尾声,马上进入Coding阶段了,辣么在Coding之前需要干马呢?是的,“统一开发工具.开发环境的搭建与本地测试.测试环境的搭建与测试” - 本文详细记录 ...

  3. 给Ambari集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解)

    不多说,直接上干货! Impala和Hive的关系(详解) 扩展博客 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解) 参考 horton ...

  4. Mac OS X:在标题栏上显示目录完整路径

    众所周知mac的finder是不带路径显示的,你进入某个文件夹只会显示当前文件夹的名字而已.虽然你可以在finder的菜单栏中点“显示”-“显示路径栏”把路径栏调出来,但是这样只会不必要的增加find ...

  5. iOS生成PDF的关键代码-备忘

    //此方法只是把当前页面的内容生成PDF并保存在沙盒中. //还需要做:把当前面没有显示的内容以分页的形式生成PDF,并把PDF读取并显示出来 //关于显示可以参考:念茜的博客 iOS开发笔记——PD ...

  6. [转]Asp.net Mvc2中重构View的三种方式

    本文转自:http://www.cnblogs.com/zhuqil/archive/2010/07/14/asp-net-mvc2-view-refactoring.html 我们在Asp.net ...

  7. ES3之bind方法的实现模拟

    扩展Function原型方法,此处用myBind来模拟bind实现 Function.prototype.myBind = function(o /*,args*/){       //闭包无法获取t ...

  8. iisexpress局域网内调试网站

    1.找到IISExpress目录 IISExpress\config\applicationhost.config(注:如果使用vs2015则更改解决方案目录下的.vs文件夹中的该文件) <si ...

  9. C/C++ 运算符重载、数据类型转换

    1.运算符就是“+”.“>>”等符号,对运算符重载实质就是对函数的重载,这样运算符就能在原有基础上增加新功能,不能自己定义新运算符,只能对已有运算符重载,重载运算符后不能改变运算符本身的特 ...

  10. 详解 pcap_findalldevs_ex

    pcap是packet capture的缩写.意为抓包. 功能:查找所有网络设备 原型:int pcap_findalldevs_ex(char* source,  struct pcap_rmtau ...