echarts图表刷新

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

html 复制代码
<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>
css 复制代码
/* 订单漏斗 */
.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);

};

效果图:

相关推荐
web14786210723几秒前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖4 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案112 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548817 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.28 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营33 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui