图表的放大和刷新功能

正常图表渲染显示：

// 漏斗ading动画
let myChartone;
// 获取配置项
let optionone;
// 获取漏斗的数据
let order;
let pay_order;
let pay_order_num;
let pay_order_num_num;
let optiones;
// 漏斗渲染
function polt(data) {// 从名为data的对象中获取ordata属性的值，并赋值给order变量// 这里假设data.ordata包含了与订单相关的数据，可能是数组等形式order = data.ordata;// 从order数组（前面获取到的）中取出第一个元素，赋值给pay_order变量// 具体这个元素代表什么取决于data.ordata中存储的数据结构和含义，可能是总订单相关的数据pay_order = order[0];// 从order数组中取出第二个元素，赋值给pay_order_num变量// 也许代表已付款订单相关的数量等信息（根据上下文推测）pay_order_num = order[1];// 从order数组中取出第三个元素，赋值给pay_order_num_num变量// 同样具体含义由业务逻辑决定，可能和已付款订单的某个细分数据相关pay_order_num_num = order[2];// 漏斗图相关代码开始// 通过document.getElementById方法获取页面中id为'funnel'的DOM元素，这个元素将作为ECharts图表的容器// 也就是后续要在这个DOM节点上渲染漏斗图var chartone = document.getElementById('funnel');// 使用echarts.init方法初始化一个ECharts实例，传入前面获取到的DOM元素chartone作为参数// 这样后续就可以通过这个实例来配置和渲染漏斗图了myChartone = echarts.init(chartone);// 配置项开始，用于定义漏斗图的各种显示样式、数据等属性// 全局文本样式设置，这里设置字体大小为16像素，会影响到图表中大部分文本的显示大小optionone = {textStyle: {fontSize: 16},// 标题相关配置title: {// 标题距离容器顶部的距离为10像素top: 10,// 标题在容器中水平居中显示left: 'center',// 标题的文本内容为'订单漏斗'text: '订单漏斗',textStyle: {// 标题文本的字体大小设置为16像素，并且字体加粗fontSize: '16',fontWeight: 'bolder',},},// 提示框（tooltip）配置，当鼠标悬停在图表元素上时显示相关提示信息tooltip: {// 触发提示框显示的方式为当鼠标悬停在图表的各个图形项（item）上时触发trigger: 'item',// 这里formatter设置为空字符串，可根据实际需要自定义提示框显示的内容格式formatter: ''},// 图例（legend）配置，用于展示不同系列对应的标识和说明legend: {// 图例在容器中靠左侧显示left: 'left',// 图例的排列方向为垂直方向orient: 'vertical',// 图例距离容器顶部的距离为10像素top: 10,// 再次强调图例在容器中最左侧（和前面left: 'left'重复指定起到明确作用，有些情况可能需要更精准的定位）left: 0,// 图例中显示的数据项，对应了漏斗图中不同阶段的名称，这里列出了总订单、已付款、待接收、已接收、已签收等阶段data: ['总订单', '已付款', '待接收', '已接收', '已签收']},// 系列（series）配置，一个ECharts图表可以有多个系列，这里只配置了一个漏斗图类型的系列series: [{// 系列类型指定为'funnel'，即漏斗图类型type: 'funnel',// 漏斗图在容器中水平方向距离左侧的距离为70像素（这里的单位可能根据整体布局设置情况而定，也许是px等）left: '70',// 漏斗图距离容器顶部的距离为50像素top: 50,// 漏斗图距离容器底部的距离为60像素bottom: 60,// 漏斗图的宽度占容器宽度的70%，用于控制漏斗图在容器中的水平尺寸比例width: '70%',// 漏斗图数据的最小值设置为0，可根据实际数据范围调整，用于一些数据归一化或显示限制等情况min: 0,// 漏斗图数据的最大值设置为100，同样根据业务数据情况设定，比如表示百分比范围等场景常用0 - 100max: 100,// 漏斗图最小尺寸占容器宽度的比例，这里设置为0%，即最小可以缩到几乎看不见（极端情况）minSize: '0%',// 漏斗图最大尺寸占容器宽度的比例，设置为100%，即最大可以撑满容器宽度（极端情况）maxSize: '100%',// 数据排序方式设置为降序（descending），会根据数据值的大小对漏斗图的各个部分进行降序排列显示sort: 'descending',// 漏斗图各个部分之间的间隔距离设置为2（单位同样取决于整体布局情况，可能是像素等）gap: 2,// 标签（label）配置，用于设置漏斗图各个部分上显示的文本相关属性label: {// 设置标签显示出来show: true,// 标签的显示位置设置在漏斗图内部（还可以设置为其他位置，如外部等）position: 'inside'},// 标签连线（labelLine）配置，用于设置标签与对应的漏斗图部分之间连线的样式等属性labelLine: {// 连线的长度设置为10（单位可能是像素等）length: 10,lineStyle: {// 连线的宽度设置为1像素width: 1,// 连线的样式设置为实线类型type: 'solid'}},// 图形项样式（itemStyle）配置，用于设置漏斗图各个部分图形本身的样式，比如边框颜色、宽度等itemStyle: {// 边框颜色设置为白色（#fff）borderColor: '#fff',// 边框宽度设置为1像素borderWidth: 1},// 强调状态（当鼠标悬停等交互操作时的突出显示效果）配置，这里主要设置了标签字体大小在强调状态下变为20像素emphasis: {label: {fontSize: 20}},// 漏斗图的数据数组，每个对象代表漏斗图的一个部分// value属性对应该部分的数据值（比如数量等），name属性对应图例中显示的名称以及该部分的标识data: [{value: pay_order_num,name: '总订单'},{value: pay_order_num_num,name: '已付款'},{value: 0,name: '待接收'},{value: 0,name: '已接收'},{value: 0,name: '已签收'}]}]};// 使用前面初始化的ECharts实例myChartone，调用setOption方法将配置项optionone应用到图表上，实现漏斗图的渲染展示myChartone.setOption(optionone);// 找到id为'funnel'的DOM元素的第一个子元素（索引为0），并设置其宽度为100%，用于调整图表容器内元素的宽度显示，使其撑满容器宽度$('#funnel').children().eq(0).css('width', '100%');// 同样找到id为'funnel'的DOM元素的第一个子元素，设置其高度为100%，使该元素在高度方向上撑满容器，保证图表能完整显示$('#funnel').children().eq(0).css('height', '100%');// 在控制台打印出id为'funnel'的DOM元素的第一个子元素的相关信息，可用于调试查看元素是否获取正确、样式是否生效等情况
}

图表放大功能代码展示

// 漏斗图放大
function fscreen() {// 检查变量 optiones 是否已经被定义（不为undefined），如果已定义则执行以下逻辑if (optiones != undefined) {// 在控制台打印数字1，可能用于调试目的，标记此处代码被执行的情况// 调用名为echarts_hundredvw的对象（推测是ECharts实例）的clear方法，用于清除之前该实例上渲染的图表内容// 可能是在重新绘制全屏图表前先进行清理操作，避免出现显示冲突等问题echarts_hundredvw.clear();}// 显示id为'fullscreen-box'的HTML元素，通常意味着在执行这个函数时（可能与进入全屏相关操作有关），需要将该元素展示出来$('#fullscreen-box').show();// 显示id为'fullscreen'的HTML元素，这个元素可能是用于承载全屏图表等相关内容的容器，所以在进入全屏相关操作时将其显示$('#fullscreen').show();// 定义一个名为optiones的对象，用于配置ECharts图表的相关属性，以下是具体配置项optiones = {// 全局文本样式配置，设置字体大小为20像素，会影响图表中大部分文本的显示大小textStyle: {fontSize: 20},// 标题相关配置title: {// 标题距离容器顶部的距离为10像素top: 10,// 标题在容器中水平方向的位置设置为距离左侧45%处，用于控制标题的水平居中或偏左等显示位置left: '45%',// 标题的文本内容为'订单漏斗'text: '订单漏斗',textStyle: {// 标题文本的字体大小设置为20像素，并且字体加粗fontSize: '20',fontWeight: 'bolder',},},// 提示框（tooltip）配置，当鼠标悬停在图表元素上时显示相关提示信息tooltip: {// 触发提示框显示的方式为当鼠标悬停在图表的各个图形项（item）上时触发trigger: 'item',// 这里formatter设置为空字符串，可根据实际需要自定义提示框显示的内容格式formatter: ''},// 图例（legend）配置，用于展示不同系列对应的标识和说明legend: {// 图例中每个项目图标的宽度设置为40像素，用于调整图例中图标的显示尺寸itemWidth: 40,// 图例中每个项目图标的高度设置为30像素，同样用于控制图例中图标的显示大小itemHeight: 30,// 图例的排列方向为垂直方向orient: 'vertical',// 图例距离容器顶部的距离为10像素top: 10,// 图例在容器中最左侧（距离左侧为0像素），用于定位图例在容器中的水平位置left: 0,// 图例中显示的数据项，对应了漏斗图中不同阶段的名称，这里列出了总订单、已付款、待接收、已接收、已签收等阶段data: ['总订单', '已付款', '待接收', '已接收', '已签收']},// 系列（series）配置，一个ECharts图表可以有多个系列，这里只配置了一个漏斗图类型的系列series: [{// 系列类型指定为'funnel'，即漏斗图类型type: 'funnel',// 漏斗图在容器中水平方向距离左侧的距离为100像素（这里的单位可能根据整体布局设置情况而定，也许是px等）left: '100',// 漏斗图距离容器顶部的距离为50像素top: 50,// 漏斗图距离容器底部的距离为60像素bottom: 60,// 漏斗图的宽度占容器宽度的70%，用于控制漏斗图在容器中的水平尺寸比例width: '70%',// 漏斗图数据的最小值设置为0，可根据实际数据范围调整，用于一些数据归一化或显示限制等情况min: 0,// 漏斗图数据的最大值设置为100，同样根据业务数据情况设定，比如表示百分比范围等场景常用0 - 100max: 100,// 漏斗图最小尺寸占容器宽度的比例，这里设置为0%，即最小可以缩到几乎看不见（极端情况）minSize: '0%',// 漏斗图最大尺寸占容器宽度的比例，设置为100%，即最大可以撑满容器宽度（极端情况）maxSize: '100%',// 数据排序方式设置为降序（descending），会根据数据值的大小对漏斗图的各个部分进行降序排列显示sort: 'descending',// 漏斗图各个部分之间的间隔距离设置为2（单位同样取决于整体布局情况，可能是像素等）gap: 2,// 标签（label）配置，用于设置漏斗图各个部分上显示的文本相关属性label: {// 设置标签显示出来show: true,// 标签的显示位置设置在漏斗图内部（还可以设置为其他位置，如外部等）position: 'inside'},// 标签连线（labelLine）配置，用于设置标签与对应的漏斗图部分之间连线的样式等属性labelLine: {// 连线的长度设置为10（单位可能是像素等）length: 10,lineStyle: {// 连线的宽度设置为1像素width: 1,// 连线的样式设置为实线类型type: 'solid'}},// 图形项样式（itemStyle）配置，用于设置漏斗图各个部分图形本身的样式，比如边框颜色、宽度等itemStyle: {// 边框颜色设置为白色（#fff）borderColor: '#fff',// 边框宽度设置为1像素borderWidth: 1},// 强调状态（当鼠标悬停等交互操作时的突出显示效果）配置，这里主要设置了标签字体大小在强调状态下变为20像素emphasis: {label: {fontSize: 20}},// 漏斗图的数据数组，每个对象代表漏斗图的一个部分// value属性对应该部分的数据值（比如数量等），name属性对应图例中显示的名称以及该部分的标识data: [{value: pay_order_num,name: '总订单'},{value: pay_order_num_num,name: '已付款'},{value: 0,name: '待接收'},{value: 0,name: '已接收'},{value: 0,name: '已签收'}]}]};// 找到id为'fullscreen'的HTML元素的第一个子元素（索引为0），并设置其宽度为100%，用于调整图表容器内元素的宽度显示，使其撑满容器宽度$('#fullscreen').children().eq(0).css('width', '100%');// 同样找到id为'fullscreen'的HTML元素的第一个子元素，设置其高度为100%，使该元素在高度方向上撑满容器，保证图表能完整显示$('#fullscreen').children().eq(0).css('height', '100%');// 找到id为'fullscreen'的HTML元素下的 <canvas> 元素，并设置其宽度为容器宽度的40%，高度为容器高度的70%// 这里可能是针对特定的图表绘制（比如ECharts底层使用canvas绘制时），对其尺寸进行更精细的调整$('#fullscreen canvas').css({'width': '40%','height': '70%'})// 使用document.getElementById方法获取id为'fullscreen'的HTML元素作为容器，初始化一个ECharts实例，并赋值给echarts_hundredvw变量// 后续就可以通过这个实例来配置和渲染图表了echarts_hundredvw = echarts.init(document.getElementById('fullscreen'));// 使用前面初始化的ECharts实例echarts_hundredvw，调用setOption方法将配置项optiones应用到图表上，实现漏斗图的渲染展示echarts_hundredvw.setOption(optiones);// 获取id为'fullscreen'的HTML元素的父节点，即它所在的容器元素，通常在进行全屏操作时需要针对这个父容器来进行相关请求操作var chartContainer = document.getElementById('fullscreen').parentNode;// 判断chartContainer对象是否具有requestFullscreen方法，该方法是标准的请求全屏的DOM API（在现代浏览器中支持）// 如果有则执行以下代码块，发起进入全屏的请求if (chartContainer.requestFullscreen) {chartContainer.requestFullscreen();}// 如果不支持标准的requestFullscreen方法，判断是否支持基于WebKit内核浏览器（如Chrome、Safari等部分版本）的webkitRequestFullscreen方法// 如果支持则执行以下代码块，通过该方法发起进入全屏的请求（适用于对应内核的浏览器）else if (chartContainer.webkitRequestFullscreen) {chartContainer.webkitRequestFullscreen();}// 如果前面的WebKit方式也不支持，判断是否支持基于Gecko内核浏览器（如Firefox等部分版本）的mozRequestFullScreen方法// 若支持则执行代码块，利用该方法发起进入全屏的请求（适用于对应内核的浏览器）else if (chartContainer.mozRequestFullScreen) {chartContainer.mozRequestFullScreen();}// 如果前面几种方式都不支持，判断是否支持基于微软相关内核浏览器（旧版IE、部分Edge版本）的msRequestFullscreen方法// 若支持则执行代码块，通过该方法发起进入全屏的请求（适用于对应内核的浏览器）else if (chartContainer.msRequestFullscreen) {chartContainer.msRequestFullscreen();}
}

图表退出全屏代码展示

// 全屏退出
function exits() {// 判断哪个退出全屏页面可以使用$('#fullscreen-box').hide();if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}
}

代码监听退出全屏隐藏div

// 定义一个名为handleFullscreenChange的函数，用于处理全屏状态改变的相关逻辑
function handleFullscreenChange() {// 判断当前页面是否没有处于任何一种全屏模式下// document.fullscreenElement表示标准的全屏元素，如果为null则表示当前页面未处于全屏状态（标准方式）// document.webkitFullscreenElement用于检测基于WebKit内核浏览器（如Chrome、Safari等部分版本）的全屏状态，为null则未处于全屏（WebKit方式）// document.mozFullScreenElement用于检测基于Gecko内核浏览器（如Firefox等部分版本）的全屏状态，为null则未处于全屏（Gecko方式）// document.msFullscreenElement用于检测基于Trident或EdgeHTML内核浏览器（如旧版IE、部分Edge版本）的全屏状态，为null则未处于全屏（微软相关方式）if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {// 如果页面不是全屏状态，隐藏id为'fullscreen-box'的HTML元素，通常这个元素可能在全屏时有特定显示效果，非全屏时需隐藏起来$('#fullscreen-box').hide();// 隐藏id为'fullscreen-funnel'的HTML元素，同理，可能与全屏展示相关，非全屏时不显示$('#fullscreen-funnel').hide();// 隐藏id为'fullscreen-bar'的HTML元素，也是全屏相关元素，非全屏时进行隐藏操作$('#fullscreen-bar').hide();// 隐藏id为'fullscreen'的HTML元素，根据命名推测可能是和全屏操作按钮之类相关的元素，非全屏时隐藏$('#fullscreen').hide();// 隐藏id为'fullscreen-income'的HTML元素，可能涉及全屏时收入相关展示内容，非全屏时隐藏$('#fullscreen-income').hide();}
}// 初始时隐藏id为'fullscreen-box'的HTML元素，确保页面加载完成后该元素默认是隐藏状态（可能后续在特定条件下才显示）
$('#fullscreen-box').hide();// 为'document'对象添加一个名为'fullscreenchange'的事件监听器，当标准的全屏状态发生改变时（进入或退出全屏），会触发handleFullscreenChange函数来处理相关逻辑
document.addEventListener('fullscreenchange', handleFullscreenChange);// 为'document'对象添加一个名为'webkitfullscreenchange'的事件监听器，用于在基于WebKit内核浏览器中，当全屏状态发生改变时（进入或退出全屏），触发handleFullscreenChange函数来进行相应处理
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);// 为'document'对象添加一个名为'mozfullscreenchange'的事件监听器，在基于Gecko内核浏览器里，当全屏状态改变（进入或退出全屏）时，触发handleFullscreenChange函数以执行对应的逻辑
document.addEventListener('mozfullscreenchange', handleFullscreenChange);// 为'document'对象添加一个名为'MSFullscreenChange'的事件监听器，针对基于微软相关内核浏览器（旧版IE、部分Edge等），当全屏状态改变（进入或退出全屏）时，触发handleFullscreenChange函数来处理相关显示等逻辑
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

图表的刷新功能

// 图表刷新
function refreshChart() {// 清空当前图表myChartone.clear();// 重新设置图表选项并渲染if (optionone) {myChartone.setOption(optionone);}
}