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…

数字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;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定…

Spring、SpringBoot 框架功能学习

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

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

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

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

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

云栖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…

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;一个复杂的导航条&…

【Python 数据分析学习】Matplotlib 的基础和应用

题目 1 Matplotlib 主要特性2 Matplotlib 基础知识2.1 导入模块2.2 图形构成2.2.1 图形&#xff08;Figure&#xff09;2.2.2 轴 &#xff08;Axes&#xff09;2.2.3 轴线&#xff08;axis&#xff09; 2.5 中文设置2.5.1 借助rcParams修改字体实现设置2.5.2 增加一个fontprope…

基于PHP+MySQL组合开发地方门户分类信息网站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 随着互联网技术的飞速发展&#xff0c;地方门户分类信息网站逐渐成为城市生活不可或缺的一部分。它们涵盖了房产、招聘、二手交易、生活服务等多个领域&#xff0c;为当地居民提供了全方位的信息服务。为了满足这一市场需求&#xff0c;我们开发了这款基于PHPMySQL的…

uniapp监听滚动实现顶部透明度变化

效果如图&#xff1a; 实现思路&#xff1a; 1、使用onPageScroll监听页面滚动&#xff0c;改变导航条的透明度&#xff1b; 2、关于顶部图片的高度&#xff1a; 如果是小程序&#xff1a;使用getMenuButtonBoundingClientRect获取胶囊顶部距离和胶囊高度&#xff1b; 如果…

如何利用 Kafka,实时挖掘企业数据的价值?

首先&#xff0c;问读者老爷们一个简单的问题&#xff0c;如果你需要为你的数据选择一个同时具备高吞吐 、数据持久化、可扩展的数据传递系统&#xff0c;你会选择什么样的工具或架构呢&#xff1f; 答案非常显而易见&#xff0c;那就是 Kafka&#xff0c;不妨再次套用一个被反…

使用Java基于GeoTools读取Shapefile矢量数据属性信息-以某市POI数据为例

前言 在之前的博客中&#xff0c;我们讲过在GDAL中如何读取空间数据的属性和数据信息&#xff0c;也简单的讲过如何在GeoTools中读取Shapefile文件的属性信息和数据信息。对于空间矢量数据库&#xff0c;就像我们传统的二维数据库的表字段和表数据的关系&#xff0c;在研究表数…

14 vue3之内置组件trastion全系列

前置知识 Vue 提供了 transition 的封装组件&#xff0c;在下列情形中&#xff0c;可以给任何元素和组件添加进入/离开过渡: 条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点 自定义 transition 过度效果&#xff0c;你需要对transition组件的name属性自定义。…

jupyter安装与使用——Ubuntu服务器

jupyter安装与使用——Ubuntu服务器 一、安装miniconda3/anaconda31. 下载miniconda32. 安装miniconda33. 切换到bin文件夹4. 输入pwd获取路径5. 打开用户环境编辑页面6. 重新加载用户环境变量7. 初始化conda8.验证是否安装成功9.conda配置 二、安装jupyter2.1 conda安装2.2 配…

国货之光|暴雨携信创新品亮相第八届丝博会

9月20日&#xff0c;第八届丝绸之路国际博览会暨中国东西部合作与投资贸易洽谈会&#xff08;以下简称“丝博会”&#xff09;在西安举行。 本届丝博会以“深化互联互通拓展经贸合作”为主题&#xff0c;会期为9月20日至24日&#xff0c;在西安国际会展中心设置国际交流展、省际…

研一奖学金计划2024/9/23有感

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、需要认真上课的1.应用数理统计&#xff08;开卷考试&#xff09;2.最优化方法&#xff08;开卷考试&#xff09;3.跨文化交际&#xff08;主题演讲20课堂讨…