一、效果图：
原图：
放大后：
二、知识点
在 template 中写 div 元素
<div id="fullScreenMask" class="fullScreenMask" ref="fullScreenMask" style="display:none">
</div>
样式：
.fullScreenMask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #fff;
}
获取元素的 display 属性：
// 使用原生方法：
document.querySelectorAll(".fullScreenMask")[0].style.display // none
// 使用 jquery：
$("#fullScreenMask").css("display") // block
// (vue)使用 ref：
this.$refs.fullScreenMask.style.display = "none"
三、实现方式：
构建两个div，一个用来做遮罩层，一个用来放Echarts内容
方法一、使用 jquery：
原文链接：https://www.shuzhiduo.com/A/ZOJPeNoo5v/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>饼图</title>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"
></script>
<style>
#demo {
width: 450px;
height: 300px;
}
#fullScreenMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #fff;
}
#fullScreen {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo"></div>
<!--全屏显示的容器-->
<div id="fullScreenMask">
<div id="fullScreen"></div>
</div>
<div>
<button onclick="zoomFunction()">放大</button>
</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: {
show:false,
// 工具栏
// 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;
}
// 点击放大
function zoomFunction() {
console.log("点击放大");
//生成全屏显示的图表
if (setFullScreenToolBox(option)) {
getChartData(chartScreen, false);
}
}
window.onresize = function() {
chartScreen.resize();
};
</script>
</html>
方法二、使用 vue 实现：
根据 id 生成图表、放大图表
<template>
<div id="chart">
<div id="demo"></div>
<!--全屏显示的容器-->
<div id="fullScreenMask" class="fullScreenMask" style="display: none">
<div id="fullScreen"></div>
</div>
<div>
<button @click="zoomFunction">放大</button>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
option: {},
chartScreen: null,
myChart: null,
};
},
methods: {
getdata() {
this.myChart = echarts.init(document.getElementById("demo"));
this.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: {
show: 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: [
{ name: "部门1", value: 10 },
{ name: "部门2", value: 30 },
{ name: "部门3", value: 20 },
{ name: "部门4", value: 40 },
{ name: "部门5", value: 50 },
{ name: "部门6", value: 60 },
{ name: "部门7", value: 70 },
],
},
],
};
this.myChart.setOption(this.option, true);
},
// 生成全屏显示的图表
zoomFunction() {
let divBox =
document.querySelectorAll(".fullScreenMask")[0].style.display;
if (divBox === "block") {
document.querySelectorAll(".fullScreenMask")[0].style.display = "none";
this.ChartScreen = null;
} else {
document.querySelectorAll(".fullScreenMask")[0].style.display = "block";
// divBox = "block";
this.chartScreen = echarts.init(document.getElementById("fullScreen"));
this.chartScreen.setOption(this.option, true);
}
}
,
},
mounted() {
this.getdata();
},
};
</script>
<style scoped>
#chart {
margin: 0;
width: calc(100vw - 200px);
height: 100vh;
}
#demo {
width: 450px;
height: 300px;
}
.fullScreenMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #fff;
}
#fullScreen {
width: 100%;
height: 100%;
}
</style>
方法三、使用 vue 实现：
根据 ref 生成图表、放大图表
<template>
<div id="chart">
<div id="demo" ref="demo"></div>
<!--全屏显示的容器-->
<div
id="fullScreenMask"
class="fullScreenMask"
ref="fullScreenMask"
style="display: none"
>
<div id="fullScreen" ref="fullScreen"></div>
</div>
<div>
<button @click="zoomFunction">放大</button>
</div>
<div
class="narrowIcon"
ref="narrowIcon"
style="display: none"
@click="zoomFunctionNarrow"
>
关闭
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
option: {},
chartScreen: null,
myChart: null,
};
},
methods: {
getdata() {
this.myChart = echarts.init(this.$refs.demo);
this.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: {
show: 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: [
{ name: "部门1", value: 10 },
{ name: "部门2", value: 30 },
{ name: "部门3", value: 20 },
{ name: "部门4", value: 40 },
{ name: "部门5", value: 50 },
{ name: "部门6", value: 60 },
{ name: "部门7", value: 70 },
],
},
],
};
this.myChart.setOption(this.option, true);
},
// 生成全屏显示的图表
zoomFunction() {
this.$refs.narrowIcon.style.display = "block"; // 显示（关闭图标）
let divBox = this.$refs.fullScreenMask.style.display;
if (divBox === "block") {
this.$refs.fullScreenMask.style.display = "none";
this.ChartScreen = null;
} else {
this.$refs.fullScreenMask.style.display = "block";
// divBox = "block";
this.chartScreen = echarts.init(this.$refs.fullScreen);
this.chartScreen.setOption(this.option, true);
}
},
// 关闭图表
zoomFunctionNarrow() {
console.log("关闭图表");
let divBox = this.$refs.fullScreenMask.style.display;
if (divBox === "block") {
this.$refs.fullScreenMask.style.display = "none";
this.$refs.narrowIcon.style.display = "none"; //关闭图标
}
},
},
mounted() {
this.getdata();
},
};
</script>
<style scoped>
#chart {
margin: 0;
width: calc(100vw - 200px);
height: 100vh;
}
#demo {
width: 450px;
height: 300px;
}
.fullScreenMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #fff;
/* z-index: 1; */
}
#fullScreen {
width: 100%;
height: 100%;
}
/* 关闭 */
.narrowIcon {
/* z-index: 2; */
position: fixed;
top: 20px;
right: 20px;
cursor: pointer;
font-size: 14px;
border: none;
outline: 0;
padding: 5px 8px;
color: red;
}
.narrowIcon:hover {
background-color: #0b3247;
}
</style>
3139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
