echarts图表刷新

news2024/9/21 15:13:06

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

<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.coloradmin.cn/o/2152657.html

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

相关文章

数据飞轮崛起:数据中台真的过时了吗?

一、数据中台的兴起与困境 随着大数据技术的不断发展&#xff0c;我见证了企业数据能力建设的演变。从数据中台的兴起&#xff0c;到如今数据飞轮模式的热议&#xff0c;企业的数据管理理念经历了巨大的变化。起初&#xff0c;数据中台作为解决数据孤岛、打破部门壁垒的“救星…

创新引领未来,Vatee万腾平台助力企业飞跃发展

在日新月异的科技浪潮中&#xff0c;创新已成为推动社会进步和企业发展的核心动力。Vatee万腾平台&#xff0c;作为数字化转型领域的佼佼者&#xff0c;正以其独特的创新理念和强大的技术实力&#xff0c;引领着企业迈向更加辉煌的未来&#xff0c;助力企业实现飞跃式发展。 创…

如何将很多个pdf拼接在一起?很多种PDF拼接的方法

如何将很多个pdf拼接在一起&#xff1f;将多个PDF文件合并不仅能够提升信息的整合性&#xff0c;还能使文件管理更加高效。想象一下&#xff0c;你需要向同事或老师提交一份综合报告&#xff0c;其中包含了多份相关资料。如果每个文件单独存在&#xff0c;查找和传输都会变得繁…

Redis中Hash(哈希)类型的基本操作

文章目录 一、 哈希简介二、常用命令hsethgethexistshdelhkeyshvalshgetallhmgethlenhsetnxhincrbyhincrbyfloathstrlen 三、命令小结四、哈希内部编码方式五、典型应用场景六、 字符串&#xff0c;序列化&#xff0c;哈希对比 一、 哈希简介 几乎所有的主流编程语言都提供了哈…

(蓝桥杯)STM32G431RBT6(TIM4-PWM)

一、基础配置 这个auto-reload preload是自动重装载值&#xff0c;因为我们想让他每改变一个占空比&#xff0c;至少出现一次周期 Counter Period(Autoreload Regisiter)这个设值为10000&#xff0c;那么就相当于它的周期是10000 脉冲宽度可以设置为占周期的一半&#xff0c;那…

docker部署excalidraw画图工具

0&#xff09;效果 0.1&#xff09;实时协作 0.2&#xff09;导出格式 1&#xff09;docker安装 docker脚本 bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrorsmain/DockerInstallation.sh)docker-compose脚本 curl -L "https://github.com/…

【随手笔记】使用J-LINK读写芯片内存数据

第一种使用JLINK.exe 1. 打开j-link.exe 2.输入【usb】 3. 连接芯片 输入【connect】输入芯片型号【STM32L071RB】输入连接方式 【S】 使用SWD连接方式输入连接速率 【4000】连接成功 4. 输入【&#xff1f;】查看指令提示 5. 读写指令 Mem Mem [<Zone>…

Redis的主从模式、哨兵模式、集群模式

最近学习了一下这三种架构模式&#xff0c;这里记录一下&#xff0c;仅供参考 目录 一、主从架构 1、搭建方式 2、同步原理 3、优化策略&#xff1a; 4、总结&#xff1a; 二、哨兵架构 1、搭建哨兵集群 2、RedisTemplate如何使用哨兵模式 三、分片集群架构 1&#…

JVM面试题-说一下JVM主要组成部分及其作用

总体来说&#xff0c;方法区和堆是所有线程共享的内存区域&#xff1b;而虚拟机栈、本地方法栈和程序计数器的运行是线程私有的内存区域&#xff0c;运行时数据区域就是我们常说的JVM的内存。 类加载子系统&#xff1a;根据给定的全限定名类名(如&#xff1a;java.lang.Object…

【D3.js in Action 3 精译_024】3.4 让 D3 数据适应屏幕(上)

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

AJAX(一)HTTP协议(请求响应报文),AJAX发送请求,请求问题处理

文章目录 一、AJAX二、HTTP协议1. 请求报文2. 响应报文 三、AJAX案例准备1. 安装node2. Express搭建服务器3. 安装nodemon实现自动重启 四、AJAX发送请求1. GET请求2. POST请求(1) 配置请求体(2) 配置请求头 3. 响应JSON数据的两种方式(1) 手动&#xff0c;JSON.parse()(2) 设置…

AI绘画Flux【lora模型】【微缩景观】:惊艳!3D场景融入手机上的微景观!

大家好&#xff0c;我是灵魂画师向阳 今天和大家分享一款基于Flux底模训练的微缩景观模型——FLUX|手机上的微景观。此模型主要将手机作为微型景观的基底&#xff0c;强制将3d情景融入手机并控制在手机屏幕上方范围内。 作者在使用提示词直出和使用该Loar提示词生成的图片进行…

rsyslogd 内存占用很高解决方案

在Kubernetes&#xff08;K8S&#xff09;集群中&#xff0c;监控日志是非常重要的&#xff0c;而rsyslogd是Linux系统中用于处理系统和应用程序日志的守护进程。有时候rsyslogd可能会占用较高的内存&#xff0c;这时候我们就需要对其进行优化和调整。 阿里云虚拟服务器&…

JavaEE: 深入探索TCP网络编程的奇妙世界(二)

文章目录 TCP核心机制TCP核心机制二: 超时重传为啥会丢包?TCP如何对抗丢包?超时重传的时间设定超时时间该如何确定? TCP核心机制 书接上文~ TCP核心机制二: 超时重传 在网络传输中,并不会一帆风顺,而是可能出现"丢包情况"~ 为啥会丢包? 产生丢包的原因有很多…

其他比较条件

使用BETWEEN条件 可以用BETWEEN范围条件显示基于一个值范围的行。指定的范围包含一个下限和一个上限。 示例&#xff1a;查询employees表&#xff0c;薪水在3000-8000之间的雇员ID、名字与薪水。 select employee_id,last_name,salary from employees where salary between 3…

移植Linux:如何制作rootfs?

一、分析 1. 文件系统简介 理论上说一个嵌入式设备如果内核能够运行起来&#xff0c;且不需要运行用户进程的话&#xff0c;是不需要文件系统的&#xff0c;文件系统简单的说就是一种目录结构&#xff0c;由于 linux操作系统的设备在系统中是以文件的形式存在&#xff0c;将这…

Cypress安装与启动(开始学习记录)

一 Cypress安装 使用npm安装 1.查看node.js npm的版本&#xff0c;输入 npm --version 和 node --version&#xff0c;node.js没安装的可以去中文网下载最新稳定版安装&#xff0c;npm不建议升级到最新版本&#xff0c;会导致安装Cypress时Error: Cannot find module ansi-st…

2-94 基于matlab的最佳维纳滤波器的盲解卷积算法

基于matlab的最佳维纳滤波器的盲解卷积算法。维纳滤波将地震子波转换为任意所需要的形态。维纳滤波不同于反滤波&#xff0c;它是在最小平方的意义上为最 佳。基于最佳纳滤波理论的滤波器算法是莱文逊(Wiener—Levinson)算法。程序提供了4种子波和4种期望输出&#xff1a;零延迟…

JavaEE: 深入探索TCP网络编程的奇妙世界(一)

文章目录 TCPTCP协议段落格式TCP相关机制TCP核心机制一: 确认应答32位序号32位确认序号后发先至问题 TCP TCP要比UDP更复杂一些~ TCP的全称为"传输控制协议".他负责对数据的传输进行一个详细的控制. TCP协议段落格式 源/目的端口号: 表示数据是从哪个进程来.到哪个…

Innodb内存结构

缓冲池Buffer Pool: 缓冲池是innodb内存结构缓冲区中的核心部分&#xff0c;在服务启动的时候服务器会向操作系统申请一块大小为128MB的内存空间&#xff0c;所有对数据库中数据的增删查改操作均在缓冲池bufferPool中完成&#xff0c;并且缓冲区中其他组件的描述信息也都存储在…