使用echarts點擊按鈕從新渲染圖表并更新數(shù)據(jù)
echarts點擊按鈕從新渲染圖表并更新數(shù)據(jù)
效果圖
像這樣的,點擊一個會顯示不同的數(shù)據(jù)的試圖。
思路
很簡單,就是點擊按鈕后從新調(diào)用一下echarts試圖的方法,然后把新的數(shù)據(jù)當(dāng)參數(shù)傳給echarts方法內(nèi),然后給到data就能渲染了。
上代碼
export default { data() { return { //默認(rèn)給一個數(shù)據(jù),一進(jìn)來就能看到的。 barDatas:[730, 801, 924, 222, 1333, 411, 566, 888, 466, 877] }; }, mounted() { //一進(jìn)頁面就加載試圖,并把默認(rèn)的數(shù)據(jù)傳給他渲染出來,這個默認(rèn)的不是寫死的,實際工作可以一進(jìn)來直接發(fā)請求那數(shù)據(jù)給試圖 this.barGraph(this.barDatas); }, methods: { //橫向條形圖 barGraph(val) { //初始化圖標(biāo) var myCharts = this.$echarts.init(this.$refs["echart-right"]); //Y軸的數(shù)據(jù),和數(shù)據(jù)值位置一一對應(yīng) var cate = [ "0001", "0002", "0003", "0004", "0005", "0006", "0007", "0008", "0009", "0010", ]; //數(shù)據(jù)值,順序和Y軸的名字一一對應(yīng) var barData = val //這個地方參數(shù)傳給他渲染數(shù)據(jù) var option = { title: { text: this.rightname + "合格率排行榜top10", }, tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, }, //圖表位置 grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, //X軸 xAxis: { type: "value", axisLine: { show: false, }, axisTick: { show: false, }, //不顯示X軸刻度線和數(shù)字 splitLine: { show: false }, axisLabel: { show: false }, }, yAxis: { type: "category", data: cate, //升序 inverse: true, splitLine: { show: false }, axisLine: { show: false, }, axisTick: { show: false, }, //key和圖間距 offset: 10, //動畫部分 animationDuration: 300, animationDurationUpdate: 300, //key文字大小 nameTextStyle: { fontSize: 5, }, }, series: [ { //柱狀圖自動排序,排序自動讓Y軸名字跟著數(shù)據(jù)動 realtimeSort: true, name: "數(shù)量", type: "bar", data: barData, barWidth: 14, barGap: 10, smooth: true, valueAnimation: true, //Y軸數(shù)字顯示部分 label: { normal: { show: true, position: "right", valueAnimation: true, offset: [5, -2], textStyle: { color: "#333", fontSize: 13, }, }, }, itemStyle: { emphasis: { barBorderRadius: 7, }, //顏色樣式部分 normal: { barBorderRadius: 7, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: "#3977E6" }, { offset: 1, color: "#37BBF8" }, ]), }, }, }, ], //動畫部分 animationDuration: 0, animationDurationUpdate: 3000, animationEasing: "linear", animationEasingUpdate: "linear", }; myCharts.setOption(option); //圖表大小變動從新渲染,動態(tài)自適應(yīng) window.addEventListener("resize", function () { myCharts.resize(); }); }, //點擊高亮 // 點擊后渲染不同echarts試圖 acts(index) { this.actlist = index; if (index == 4) { this.isshow = true; } else { this.isshow = false; //我是循環(huán)寫的按鈕,所以通過判斷點擊的是哪一個按鈕,來對應(yīng)賦值新的數(shù)據(jù)然后調(diào)用方法傳參從新渲染試圖,單獨寫的按鈕直接在上面加點擊事件就行。 //當(dāng)然這個數(shù)據(jù)不是死的,后面給成點擊按鈕發(fā)請求接口那數(shù)據(jù)賦值。 if(index==0){ this.barDatas=[530, 301, 524, 622, 223, 344, 333, 422, 566, 677] this.barGraph(this.barDatas) console.log("ri"); }else if(index==1){ this.barDatas=[730, 801, 624, 222, 223, 344, 333, 322, 466, 877] this.barGraph(this.barDatas) console.log("zhou"); }else if(index==2){ this.barDatas=[430, 501, 524, 722, 123, 644, 433, 322, 666, 827] this.barGraph(this.barDatas) console.log("yue"); }else{ this.barDatas=[330, 401, 524, 622, 723, 844, 533, 322, 636, 527] this.barGraph(this.barDatas) console.log("nian"); } } } }, };
echarts3點擊按鈕動態(tài)更新數(shù)據(jù)
1.后臺代碼(模擬數(shù)據(jù))
@RequestMapping("/queryMiddleAppinfo") @ResponseBody public Map queryMiddleAppinfo(){ List<Integer> list1 = new ArrayList<Integer>(); list1.add((int)Math.floor(Math.random()*20+1)); list1.add((int)Math.floor(Math.random()*20+1)); list1.add((int)Math.floor(Math.random()*20+1)); list1.add((int)Math.floor(Math.random()*20+1)); list1.add((int)Math.floor(Math.random()*20+1)); list1.add((int)Math.floor(Math.random()*20+1)); list1.add((int)Math.floor(Math.random()*20+1)); List<Integer> list2 = new ArrayList<Integer>(); list2.add((int)Math.floor(Math.random()*20+1)); list2.add((int)Math.floor(Math.random()*20+1)); list2.add((int)Math.floor(Math.random()*20+1)); list2.add((int)Math.floor(Math.random()*20+1)); list2.add((int)Math.floor(Math.random()*20+1)); list2.add((int)Math.floor(Math.random()*20+1)); list2.add((int)Math.floor(Math.random()*20+1)); Map map = new HashMap(); map.put("man", list1); map.put("women", list2); return map; }
2.前臺界面
按鈕
<button class="layui-btn" data-type="reload">搜索</button>
存放圖標(biāo)的div
<div id="main-line" style="height: 450px;"></div>
3.echarts代碼
// 基于準(zhǔn)備好的dom,初始化echarts實例 var myChart = echarts.init(document.getElementById('main-line')); // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['男', '女'] }, toolbox: { show: false, feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, calculable: true, xAxis: [ { type: 'category', data: ['1930', '1940', '1950', '1960', '1970', '1980','1990'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '男', type: 'bar', data: [], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } }, { name: '女', type: 'bar', data: [], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } } ] });
4.點擊搜索按鈕觸發(fā)的函數(shù)
function loadsexnums(){ var nums_man=[]; //存放男性數(shù)量 var nums_women=[]; //存放女性數(shù)量 myChart.showLoading(); //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫 $.ajax({ type : "post", async : true, //異步請求(同步請求將會鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執(zhí)行) url : "/queryMiddleAppinfo", //請求發(fā)送到TestServlet處 data : {}, dataType : "json", //返回數(shù)據(jù)形式為json success : function(result) { //請求成功時執(zhí)行該函數(shù)內(nèi)容,result即為服務(wù)器返回的json對象 if (result) { var man = result.man; var women = result.women; for(var i=0;i<man.length;i++){ nums_man.push(man[i]); //挨個取出類別并填入類別數(shù)組 } for(var i=0;i<women.length;i++){ nums_women.push(women[i]); //挨個取出銷量并填入銷量數(shù)組 } myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ //加載數(shù)據(jù)圖表 series: [ { data: nums_man //此處只對data數(shù)據(jù)修改即可 }, { data: nums_women } ] }); } }, error : function(errorMsg) { alert("圖表請求數(shù)據(jù)失敗!"); myChart.hideLoading(); } }) }
5.效果
每次點擊查詢圖標(biāo)展示都會變化
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-mugen-scroll組件實現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細(xì)介紹了vue-mugen-scroll組件實現(xiàn)pc端滾動刷新,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08Vue $emit $refs子父組件間方法的調(diào)用實例
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue結(jié)合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項,每個列表項包含一個復(fù)選框,復(fù)選框的v-model綁定到一個數(shù)組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09defineProperty和Proxy基礎(chǔ)功能及性能對比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對比,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue中v-if和v-for一起使用的弊端及解決辦法(同時使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時存在于一個元素上的時候,v-if 會首先被執(zhí)行,這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下2023-07-07