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 ...
随机推荐
- Charles抓包iPhone注意点以及SSL Proxying enabled for this host
0.介绍Charles 抓包 Charles是一款很强大的抓包工具,现在记录下来分享给大家.常用的有以下几款功能: 1.支持配置抓取定向地址的网络请求 打开charles,打开Proxy->Re ...
- 我也开源... React Native Messager
近期有空,玩转React Native. https://github.com/andyc365/ReactNativeMessager React Native Messager A React N ...
- PMBOK 指南 第三章 项目经理的角色
项目经理的角色 3.1 概述 项目经理类似于交响乐团的指挥 成员与角色 在团队中的职责 知识和技能:具备项目管理知识.技术知识.理解和经验. 3.2 定义 项目经理是由执行组织委派,领导团队实现项目目 ...
- 2.Redux学习2----redux-thunk
UI组件:只展示UI,不处理业务逻辑,又称傻瓜组件,因为只需要展示UI,没有状态,我们通常用函数组件(无状态组件)作为UI组件 容器父组件:只处理业务逻辑,不展示UI,又称聪明组件 redux-thu ...
- ASP.NET Core身份验证
asp.net core 身份验证 本文旨在演示如果使用内置的 identity 实现 asp.net core 的身份验证,不会进行其它扩展.本文将通过最简单的代码演示如何进行登录和身份验证操作. ...
- 《Dotnet9》系列之建站-Dotnet9建站20天感悟
本人站点 https://dotnet9.com,建站20天了,在这给站长朋友讲述个人建站经历,希望对大家能有所帮助. https://dotnet9.com 网站采用 宝塔 + WordPress ...
- GO汇总
1.基础 GO语言介绍以及开发环境配置 Go-包 Go-数据类型以及变量,常量 Go-获取变量数据类型 GO-数组与切片 GO-切片拷贝以及赋值 Go-函数 Go-闭包 GO-逻辑判断(if,else ...
- ssdb make 失败 autoconf required
ERROR! autoconf required! install autoconf first Makefile:4: build_config.mk: No such file or direct ...
- Markdown语法教程
标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 效果如下: 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 段落 换 ...
- [考试反思]1110csp-s模拟测试109：细节
细节...决定成败 T2数组开小,T3long long没开够. 而且其实不止这样,考试结束前15分钟发现了好多低错: T3双向边没开2倍.dfs没递归调用.T2为了调试bitset开20没改(后来改 ...