当前位置: 首页 > article >正文

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.kler.cn/a/318903.html

相关文章:

  • 初级数据结构——栈
  • K8S单节点部署及集群部署
  • 「Mac玩转仓颉内测版12」PTA刷题篇3 - L1-003 个位数统计
  • C++ 编程基础(6)作用域 | 6.3、类作用域
  • 使用Docker快速部署FastAPI Web应用
  • Qt 和 WPF(Windows Presentation Foundation)
  • 与 CESS Network 共探去中心化创新:重塑数据基础设施,驱动未来变革
  • 数电学习基础(逻辑门电路+)
  • 羽毛球场馆预约系统,便捷管理预约
  • 【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第二篇-着色器制作】
  • 破解 oklink 网站加密数据(升级版)
  • Python中字典常用方法
  • Go版数据结构 -【序言】
  • 一,初始 MyBatis-Plus
  • 微信小程序公共样式:设计与实现指南
  • 智能听诊器宠物社区的新宠
  • Gnu Radio抓取WiFi信号,流程图中模块功能
  • 【Elasticsearch】-实现图片向量相似检索
  • 自然语言处理(NLP)实战项目
  • accelerate 分布式框架
  • C语言特殊字符串函数和字符函数
  • 从零开始学习Python
  • QT中各数据基础类型互转方式有哪些?
  • 面经宝典【1】-拼多多
  • [51单片机] 简单介绍 (一)
  • Vue ElemetUI table的行实现按住上下键高亮上下移动效果