当前位置：首页 > news >正文

echarts图表刷新

news 2024/11/17 2:46:46

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

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

效果图：