echarts 饼图 + 全屏显示
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="./js/echarts.min.js"></script>
<style>
#demo {
width: 450px;
height: 300px;
} #fullScreenMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #ffffff;
} #fullScreen {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo"></div> <!--全屏显示的容器-->
<div id="fullScreenMask">
<div id="fullScreen"></div>
</div> </body>
<script>
/*
* 知识点：
* 1、自定义工具按钮 全屏显示（在图表右上角）
* 2、图例名称过长拼接省略号
* 3、生成随机颜色
*
* 存在问题：
* 视觉引导线及标签名称过长 超出视图范围 如部门名称很长的这个情况
* 解决办法：
* 增加全屏显示功能 且小图表只开启前五项
* */ //初始化一个 echarts 实例
var chart = echarts.init(document.getElementById('demo'));
//声明一个 全屏显示的echarts图表
var chartScreen = null;
//指定图表的配置项和数据
var option = {
backgroundColor: 'rgba(70, 131, 254, .3)',
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"+ '人' +" ({d}%)" //饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
legend: {
icon: 'rect',
itemWidth: 12,
itemHeight: 12,
type: 'scroll',
textStyle:{
color:'#ffffff',
fontSize:12
},
orient: 'vertical',
data:[],
selected:{}, right: 10,
top: 30,
bottom: 20, formatter: function (name) {
return echarts.format.truncateText(name, 90, '14px Microsoft Yahei', '…');//图例名称过长拼接省略号
},
tooltip: {
show: true
}
},
toolbox: {// 工具栏
itemSize:16,
showTitle:false,
right:24,
feature: {
myTool: {//自定义工具 myTool
show: true,
title: '全屏显示',
icon: "image://" + "./css/icon/full-screen-default.png",//此处 图片路径前面必须加字符串 "image://"
onclick: function (){
//生成全屏显示的图表
if (setFullScreenToolBox(option)) {
getChartData(chartScreen,false);
}
}
}
}
},
series: [
{
name:'人员部署',
type:'pie',
barWidth: '30%',
radius: ['50%', '70%'],
center:['40%', '50%'],
label: {
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
},
emphasis: {
show: true,
fontWeight: 'bold'
}
},
itemStyle:{
normal:{
color:function(params) {//生成随机颜色
var colorList = ['#E09C19','#E63234','#6AC3F1','#DD6B25','#D4E019','#009944','#6A8DF1','#C535A8','#6D54E9','#67E682','#E954CF','#CAF161'];
return params.dataIndex >= colorList.length-1 ? "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16):colorList[params.dataIndex]; },
}
},
data:[]
}
]
}; //使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//插入图表数据
getChartData(chart,true) ; /*
* 获取图表数据并插入
* @param chart 需要插入数据的图表
* @param bool 是否只显示前五项
* */
function getChartData(chart,bool) {
// $.ajax({
// url: '/api/...',
// data: {},
// type: "POST",
// dataType: 'json',
// success: function(result){
var result = {
data:[
{
count: 5,
name: "部门一",
},
{
count: 15,
name: "很长名字的部门很长名字的部门很长名字的部门",
},
{
count: 5,
name: "部门二",
},
{
count: 5,
name: "部门三",
},
{
count: 55,
name: "很长很长名字的部门",
},
{
count: 5,
name: "财务部",
},
{
count: 5,
name: "行政部",
},
{
count: 5,
name: "很长名字的部门",
},
{
count: 588,
name: "人力部",
},
{
count: 5,
name: "销售部",
},
{
count: 5,
name: "运营部",
},
{
count: 5,
name: "很长名字的部门很长名字的部门",
},
{
count: 25,
name: "部门五",
},
{
count: 85,
name: "部门6",
},
{
count: 55,
name: "部门7",
},
{
count: 55,
name: "部门8",
},
{
count: 555,
name: "部门9",
},
]
}
var _count = [], _name = [] ,_selected = {};
if (result.data.length > 0) {
$.each(result.data,function (i,v) { var proname = v.name;
_count.push({value:v.count, name:proname});
_name.push(proname);
//小图表 只显示前五项 大图表默认全部显示
bool && (i < 5 ?_selected[proname] = true : _selected[proname] = false); }); chart.setOption({
legend: {
data:_name,
selected:_selected
},
series: [
{
data:_count
}
]
}); }
// }
// });
} //全屏显示 toolbox回调
//@param option echarts的配置项
function setFullScreenToolBox(option) {
if ($('#fullScreenMask').css('display') === 'block') {
$('#fullScreenMask').hide();
ChartScreen = null;
return false;
} $('#fullScreenMask').show();
chartScreen = echarts.init(document.getElementById('fullScreen'));
chartScreen.setOption(option);
chartScreen.setOption({
toolbox: {
feature: {
myTool: {
title: '退出全屏',
icon: "image://" + "./css/icon/exit-full-screen-default.png",
}
}
}
});
return true;
} window.onresize = function () {
chartScreen.resize()
} </script>
</html>
echarts 饼图 + 全屏显示的更多相关文章
- JavaScript：让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- 在VC++6.0开发中实现全屏显示
全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...
- Android 全屏显示的方法（不包含状态栏）
我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...
- Android 全屏显示
Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...
- QT5中全屏显示子窗口和取消全屏的方法
问题描述:用QT5做了个MDI多窗体应用程序,想把子窗体全屏显示,用网上的方法,但总是遇到问题. 网上的解决方法原文在这:http://www.cnblogs.com/Rick-w/archive/2 ...
- 启动app时全屏显示Default.png
一直很喜欢MJ的讲课视频,今天看了他的博客学到了些东西顺便记录下来. 在默认情况下,app显示Default.png时并非真正的"全屏显示",因为顶部的状态栏并没有被隐藏,比如下面 ...
- 【温故而知新-Javascript】窗口效果 （全屏显示窗口、定时关闭窗口）
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- delphi 程序全屏显示无标题栏，覆盖整个屏幕
delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,所以记下 procedure TMainFrm.FormCreate(Sender: TObject); begin w ...
随机推荐
- windows cmd 生成文件目录树
一.背景 之前逛GitHub的时候看到有大佬在描述项目结构的时候使用了一种文件目录树的格式 │ └─student_information_management_system │ │ ├─build ...
- reselect是怎样提升react组件渲染性能的？
reselect是什么? reselect是配合redux使用的一款轻量型的状态选择库,目的在于当store中的state重新改变之后,使得局部未改变的状态不会因为整体的state变化而全部重新渲染, ...
- Linux Pptpd
准备环境 1 主机ip:192.168.0.107 2 VPN服务器: ens32:192.168.0.102 ens33:127.16.1.10 软件安装 [root@localhost ~]# y ...
- unity3D开发环境搭建
前言 本文记录unity3D开发环境的搭建 unity安装 unity有中文官网(https://unity.cn/),很贴心,ide工具我们选择下载安装中国区增强版,下载地址:https://uni ...
- mysql常用运行原理
MySQL的客户端/服务器架构 MySQL的服务器程序直接和我们存储的数据打交道,然后可以有好多客户端程序连接到这个服务器程序,发送增删改查的请求,然后服务器就响应这些请求,从而操作它维护的数据.和微 ...
- DevExpress Skins<2>
Skins DevExpress WinForms控件包括许多现成的绘画主题(或外观),用于更改DevExpress表单和控件的外观.您可以通过运行WinForms演示应用程序并使用外观选择器在可用主 ...
- 基于Maven 的 Spring MVC
Spring MVC 他是基于MVC的设计模式做出来的,他是Spring对Servlet的进一步的封装 MVC:Model View Controller 如何使用Spring MVC?(Spri ...
- JEB 无源码调试 以dvm smali字节码方式，Demo尝试
关于调试器看不到进程,无法attach的问题,网上也有很多教程,基本是修改ro.debugable =1 ,ro.secure = 0 让adbd有root权限 attach到其他进程,涉及到要修改 ...
- SVN安装及其汉化
1.百度搜索SVN,点击官网进去 2.点击download进入下载页面,选择合适的安装包 3.当前页面往下拉,看到汉化包下载页面,要注意版本 4.2个下载完,先安装软件在安装汉化包,要注意软件和汉化包 ...
- celery执行异步任务和定时任务
一.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组成,消息中间件 ...