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);
};效果图：
原文地址：https://blog.csdn.net/2301_81449444/article/details/142416201
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！