echarts图表刷新

embedded/2024/9/25 20:59:22/

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

<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;
}
javascript">// 漏斗图
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.ppmy.cn/embedded/116824.html

相关文章

QT 带箭头的控件QPolygon

由于对当前项目需要绘制一个箭头控件&#xff0c;所以使用了QPainter和QPolygon来进行绘制&#xff0c;原理就是计算填充&#xff0c;下面贴出代码和效果图 这里简单介绍下QPolygon QPolygon是继承自 QVector<QPoint>那么可以很简单的理解为&#xff0c;他就是一个点的…

Vue3 Day7-全局组件、指令以及pinia

7.1 全局组件 App.vue <template><div><h2>我是父组件&#xff0c;下面是全局组件的内容</h2><HelloWorld></HelloWorld></div> </template> ​ <script setup> ​ </script> <style scoped></style&g…

git 命令

reset all file to a commit-id &#xff08;退code&#xff09; git reset --hard HEAD^ /commit id only return one change &#xff08;推其中的一笔&#xff09; git revert commit id reback one specific file to latest&#xff08;恢复那…

Linux基础---13三剑客及正则表达式

一.划水阶段 首先我们先来一个三剑客与正则表达式混合使用的简单示例&#xff0c;大致了解是个啥玩意儿。下面我来演示一下如何查询登录失败的ip地址及次数。 1.首先&#xff0c;进入到 /var/log目录下 cd /var/log效果如下 2.最后&#xff0c;输入如下指令即可查看&#xf…

Apollo自动驾驶项目(二:cyber框架分析)

Apollo 的 Cyber 框架 是一个基于消息传递的中间件&#xff0c;用于处理模块之间的通信和数据共享&#xff0c;类似于 ROS&#xff08;Robot Operating System&#xff09;。它是 Apollo 系统的核心框架之一&#xff0c;负责协调自动驾驶软件中不同模块的协同工作。Cyber 框架为…

大数据新视界 --大数据大厂之HBase 在大数据存储中的应用与表结构设计

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Rust的作用?

在Linux中&#xff0c;Rust可以开发命令行工具&#xff0c;如FD、SD、Ripgep、Bat、EXA、SKIM等。虽然Rust是面向系统编程&#xff0c;但也不妨碍使用Rust写命令行工具&#xff0c;因为Rust具备现代语言特性、无依赖、生成的目标文件小。 在云计算和区块链区域&#xff0c;Rus…

51单片机 - DS18B20实验1-读取温度

上来一张图&#xff0c;明确思路&#xff0c;程序整体裤架如下&#xff0c;通过单总线&#xff0c;单独封装一个.c文件用于单总线的操作&#xff0c;其实&#xff0c;我们可以把点c文件看成一个类操作&#xff0c;其属性就是我们面向对象的函数&#xff0c;也叫方法&#xff0c…