echarts图表刷新

图表制作完成,点击刷新图标,可以刷新。

<div class="full"><div id="funnel" class="normal"></div><div class="refreshs"><div class="titles_pic"><img src="./img/左刷新.png" onclick="refreshChart()" /><div class="line"></div><img src="./img/全屏.png"/></div></div></div>


 

/* 订单漏斗 */
.full {width: 30%;height: 286px;background-color: #FFFFFF;border-radius: 6px;margin-top: 4px;margin-left: 1.3%;display: flex;justify-content: center;
}#funnel {width: 85%;height: 286px;
}.refreshs {width: 15%;
}
.titles_pic {margin-top: 10px;width: 40px;border: #d1d7e0 1px solid;border-radius: 3px;right: 0;top: 0;display: flex;align-items: center;justify-content: space-around;
}
.line {width: 1px;height: 16px;background-color: #d1d7e0;
}
.titles_pic img {width: 12px;height: 12px;
}
// 漏斗图
var chartone = document.getElementById('funnel');
var myChartone = echarts.init(chartone);
var optionone;optionone = {title: {top: 10,left: 10,text: '订单漏斗',textStyle: {fontSize: '14',fontWeight: 'bolder',},},tooltip: {trigger: 'item',formatter: ''},legend: {left: 'left',orient: 'vertical',top: 100,data: ['总订单', '已付款', '待接收', '已接收', '已签收']},series: [{type: 'funnel',left: '10%',top: 50,bottom: 60,width: '80%',min: 0,max: 100,minSize: '0%',maxSize: '100%',sort: 'descending',gap: 2,label: {show: true,position: 'inside'},labelLine: {length: 10,lineStyle: {width: 1,type: 'solid'}},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 20}},data: [{value: 111,name: '总订单'},{value: 11,name: '已付款'},{value: 0,name: '待接收'},{value: 0,name: '已接收'},{value: 0,name: '已签收'}]}]
};optionone && myChartone.setOption(optionone);
// 漏斗图 统计刷新
function refreshChart() {console.log(myChartone);myChartone.clear(); // 销毁当前图表optionone && myChartone.setOption(optionone);};

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx+keepalived健康检查案例详解(解决nginx出现故障却不能快速切换到备份服务器的问题)

文章目录 简介配置过程前置环境请看创建健康检查脚本结果测试 简介 在我们通过nginxkeepalived实现高可用后&#xff0c;会发现nginx出现故障的时候keepalived并不会将虚拟ip切换到备份服务器上其原理就是nginx和keepalived是两个独立的服务&#xff0c;Nginx的故障状态不会触…

微信小程序-分包加载

文章目录 微信小程序-分包加载概述基本使用打包和引用原则独立分包分包预下载 微信小程序-分包加载 概述 小程序的代码通常是由许多页面、组件以及资源等组成&#xff0c;随着小程序功能的增加&#xff0c;代码量也会逐渐增加&#xff0c;体积过大就会导致用户打开速度变慢&a…

QT——多线程操作

一、单线程和多线程的区别 单线程指的是程序在执行时只有一个流程,也就是一次只能执行一个任务。当程序中某个任务需要花费大量时间时,单线程会导致整个程序阻塞,用户体验会变差。 多线程则是指程序在执行时可以同时执行多个任务,每个任务都是一个独立的线程。多线程可以…

数字IC设计\FPGA 职位经典笔试面试整理--语法篇 Verilog System Verilog(部分)

注&#xff1a; 资料都是基于网上一些博客分享和自己学习整理而成的 Verilog 1. 数据类型 Verilog一共有19种数据类型 基础四种数据类型&#xff1a;reg型&#xff0c;wire型&#xff0c;integer型&#xff0c;parameter型 reg型   reg类型是寄存器数据类型的关键字。寄存…

Spring Boot 点餐系统:您的餐饮助手

第三章 系统分析 3.1 系统设计目标 网上点餐系统主要是为了用户方便对美食信息、美食评价、美食资讯等信息进行查询&#xff0c;也是为了更好的让管理员进行更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定…

Firefox火狐浏览器web开发调试开启强制刷新缓存模式

场景:vuetoken过期或者修改token后&#xff0c;刷新后进不去系统! 解决&#xff1a; 火狐浏览器缓存难清理&#xff0c;用CtrlF5 CtrlR 等在谷歌和IE浏览器的快捷键没用。 火狐清理缓存比较麻烦&#xff0c;默认快捷键 Ctrl Shift Del 键是弹窗选择性清理&#xff0c;还要…

Spring、SpringBoot 框架功能学习

一. Spring核心功能 依赖注入&#xff08;DI&#xff09;&#xff1a;Spring的核心功能是通过依赖注入来管理对象之间的依赖关系。依赖注入是一种将对象的依赖关系注入到被依赖对象中的机制&#xff0c;它可以帮助降低对象之间的耦合度&#xff0c;使得代码更容易维护和测试。 …

springboot接入emqx的mqtt

需求背景 物联网设备需要通过mqtt协议传输,这里记录一下,注意,这篇文章不能接入阿里云的mqtt,本人已经试过,会报错。 开发教程 1、EMQX安装部署 -- 1 安装必要的依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm2-- 2 设置repo库 sudo yum-confi…

原腾讯云AI产品线项目经理李珊受邀为第四届中国项目经理大会演讲嘉宾

全国项目经理专业人士年度盛会 原腾讯云AI产品线项目经理、资深项目管理专家李珊女士受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为&#xff1a;AI助力项目经理的决策支持系统。大会将于10月26-27日在北京举办…

形象解释一下泛化任务和外推任务

泛化任务和外推任务都是神经网络在训练后面临的挑战&#xff0c;但它们的核心区别在于模型面临的数据分布范围。下面我来形象解释这两个任务&#xff0c;并说明它们的不同之处。 1. 泛化任务&#xff08;Generalization Task&#xff09;&#xff1a; 形象解释&#xff1a;假设…

AR传送门+特定区域显示内容+放大镜 效果着色器使用

AR传送门特定区域显示内容放大镜 效果 关键词&#xff1a;Portal Mask 1、教程链接&#xff1a; AR 传送门教程 Unity - Portal Mask Implementation - Part 4_哔哩哔哩_bilibili 应用案例效果&#xff1a; 2、案例下载地址&#xff1a;使用unity 2021.3.33f1 obi 工具…

通过 MQDescriptorSync 实现 HIDL 大数据传递的最佳实践

以下内容来自 Audio HIDL 播放流程&#xff0c;经过了部分修改&#xff0c;但尚未经过测试。 HIDL struct WriteStatus {Result retval;union Reply {uint64_t written; // WRITE command, amount of bytes written, > 0.} reply;};prepareWriting(uint32_t frameSize, ui…

关于生成对抗网络(GAN)损失函数的理解

论文地址:Generative Adversarial Nets 简介 生成对抗网络(Generative Adversarial Network,简称GAN)是一种由Ian Goodfellow等人在2014年提出的深度学习模型。GAN由两个相互对抗的神经网络组成:生成器(Generator)和判别器(Discriminator)。这两个网络通过博弈论的思…

FPGA题目记录1

1、Verilog HDL 是IEEE标准&#xff08;A&#xff09; A正确 B错误 2、Verilog HDL语言编写的程序都是可以被综合的&#xff0c;都能形成网表电路。 &#xff08; 错误 &#xff09; 不完全正确。虽然Verilog HDL&#xff08;硬件描述语言&#xff09;是一种广泛用于描述数字电…

云栖3天,云原生+ AI 多场联动,新产品、新体验、新探索

云栖3天&#xff0c;云原生 AI 20场主题分享&#xff0c;三展互动&#xff0c;为开发者带来全新视听盛宴 2024.9.19-9.21 云栖大会 即将上演“云原生AI”的全球盛会 展现最新的云计算技术发展与 AI技术融合之下的 “新探索” 一起来云栖小镇 见证3天的云原生AI 前沿探索…

时间序列数据可视化

#时间序列可视化 #离散数据的时间序列可视化 import numpy as np import pandas as pdts pd.Series(np.random.randn(1000), indexpd.date_range(1/1/2000, periods1000)) ts ts.cumsum() ts.plot() #%% #连续数据的时间序列可视化 import matplotlib.pyplot as plt df pd.D…

从画质设置看游戏引擎(其一)

前往我的博客&#xff0c;获取无广告&#xff0c;更好的阅读体验 1. 抗锯齿&#xff08;Anti-Aliasing&#xff09; 1.1 锯齿问题的起因 在三维模型的世界中&#xff0c;模型是连续的&#xff0c;但是屏幕像素是不连续&#xff0c;是离散的&#xff1b; 即当一个圆形显示在显…

Ubuntu下使用 python搭建服务实现从web端远程配置设备网口

1、通过文件配置Ubuntu设备网口 在Ubuntu工控机上&#xff0c;通过文件配置网口&#xff08;网络接口&#xff09;可以让网络配置在每次系统启动时自动生效。以下是常见的方法步骤&#xff1a; 1.1 使用 netplan 配置网口&#xff08;Ubuntu 18.04 及以上版本&#xff09; 编…

Vue学习记录之六(组件实战及BEM框架了解)

一、BEM BEM是一种前端开发中常用的命名约定&#xff0c;主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。 Block&#xff08;块&#xff09;&#xff1a;独立的功能性页面组件&#xff0c;可以是一个简单的按钮&#xff0c;一个复杂的导航条&…

【网络底层原理】I/O多路复用技术select、poll和epoll详解与比较

引言 在现代网络编程中&#xff0c;I/O多路复用技术是实现高性能服务器的关键。本文将详细介绍select、poll和epoll这三种技术&#xff0c;并比较它们的工作原理、优势与限制。 1. select 工作原理 select技术使用三个集合&#xff08;读、写、异常&#xff09;来跟踪需要监…