注意:1、没有监听屏幕的大小,我感觉没必要
2、如果是监听屏幕大小变化,直接echarts.resize()就行了。
封装的js文件
import * as echarts from 'echarts'
/**
* el:目标渲染元素
* option:echarts配置项
* resize:是否需要全屏功能
*/
export const initEcharts = (el, option, resize = false) => {
const chartDom = el;
const myChart = echarts.init(chartDom);
let num = 0
//全屏放大功能,增加全屏按钮,点击全屏按钮(自己添加)传递resize参数=true就行
if (resize) {
myChart.resize()
const resizeObserver = new ResizeObserver(entries => {
num++
if (num >= 2) {
myChart.resize()
if (!document.webkitIsFullScreen) {
num = 0
setTimeout(() => {
resizeObserver.disconnect()
}, 50)
}
}
});
resizeObserver.observe(el)
}
myChart.clear()
myChart.setOption(option);
}
export const screenFull = e => {
if (e.requestFullscreen) {
e.requestFullscreen();
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen();
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullscreen();
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen();
}
};
使用
1、initEcharts接收三个参数,参一为echarts渲染的目标元素
参二为echarts渲染的配置项
参三控制是否需要全屏放大的相关功能
2、screenFull 为控制某个元素放大的按钮,传递需要放大的元素即可
<template>
<div class="main-pie">
<button @click="fn">点击此按钮进入全屏(根据需求可以换成icon的形式,搭配hover)</button>
<div class="main-echarts" ref="main-echarts"></div>
</div>
</template>
<script>
import { initEcharts, screenFull } from "@/utils/initEcharts.js";
export default {
data() {
return {
option2: {
tooltip: {
trigger: "item"
},
legend: {
type: "scroll",
orient: "vertical",
right: "center",
top: 20,
bottom: 20
},
series: [
{
type: "pie",
radius: "90%",
left: "50%",
itemStyle: {
borderColor: "#fff",
borderWidth: 2
},
data: [
{
value: 1548,
name: "CityE"
},
{ value: 735, name: "基础治疗" },
{ value: 510, name: "挂号" },
{ value: 434, name: "正畸形" },
{ value: 335, name: "修复类" },
{ value: 335, name: "种植类" }
]
},
{
itemStyle: {
borderColor: "#fff",
borderWidth: 2
},
type: "pie",
radius: "90%",
right: "50%",
data: [
{
value: 1548,
name: "CityE"
},
{ value: 735, name: "基础治疗" },
{ value: 510, name: "挂号" },
{ value: 434, name: "正畸形" },
{ value: 335, name: "修复类" },
{ value: 335, name: "种植类" }
]
}
]
}
};
},
props: {},
watch: {},
mounted() {
this.initMainEcharts();
},
created() {},
methods: {
initMainEcharts(resize = false) {
let el = this.$refs["main-echarts"];
initEcharts(el, this.option2, resize);
},
fn() {
screenFull(this.$refs["main-echarts"]);
//全屏放大,需要等待容器缩放完成后,重绘echarts图像
setTimeout(() => {
this.initMainEcharts(true);
}, 50);
}
}
};
</script>
<style lang="scss" scoped>
.main-pie {
li {
list-style: none;
display: flex;
align-items: center;
padding: 6px;
cursor: pointer;
white-space: nowrap;
> div {
width: 10%;
height: 10px;
margin-right: 10px;
}
}
.title-echarts {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
p {
text-align: center;
width: 42%;
font-size: 18px;
}
}
width: 100%;
> .main-echarts {
background-color: white;
height: calc(100vh - 270px);
}
.main-echarts {
width: 100%;
}
p {
padding: 0;
margin: 0;
color: #000000;
}
}
</style>