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);

};

效果图:

相关推荐
别拿曾经看以后~10 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死13 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试15 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人24 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人25 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR30 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香32 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969335 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai40 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter