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

};