使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
更新時(shí)間：2022年10月22日 10:06:59 作者：接口寫好了嗎
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
效果圖
像這樣的，點(diǎn)擊一個(gè)會(huì)顯示不同的數(shù)據(jù)的試圖。
思路
很簡(jiǎn)單，就是點(diǎn)擊按鈕后從新調(diào)用一下echarts試圖的方法，然后把新的數(shù)據(jù)當(dāng)參數(shù)傳給echarts方法內(nèi)，然后給到data就能渲染了。
上代碼
export default {
data() {
return {
//默認(rèn)給一個(gè)數(shù)據(jù)，一進(jìn)來就能看到的。
barDatas:[730, 801, 924, 222, 1333, 411, 566, 888, 466, 877]
};
},
mounted() {
//一進(jìn)頁(yè)面就加載試圖，并把默認(rèn)的數(shù)據(jù)傳給他渲染出來，這個(gè)默認(rèn)的不是寫死的，實(shí)際工作可以一進(jìn)來直接發(fā)請(qǐng)求那數(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ù)值位置一一對(duì)應(yīng)
var cate = [
"0001",
"0002",
"0003",
"0004",
"0005",
"0006",
"0007",
"0008",
"0009",
"0010",
];
//數(shù)據(jù)值，順序和Y軸的名字一一對(duì)應(yīng)
var barData = val //這個(gè)地方參數(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,
//動(dòng)畫部分
animationDuration: 300,
animationDurationUpdate: 300,
//key文字大小
nameTextStyle: {
fontSize: 5,
},
},
series: [
{
//柱狀圖自動(dòng)排序，排序自動(dòng)讓Y軸名字跟著數(shù)據(jù)動(dòng)
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" },
]),
},
},
},
],
//動(dòng)畫部分
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear",
};
myCharts.setOption(option);
//圖表大小變動(dòng)從新渲染，動(dòng)態(tài)自適應(yīng)
window.addEventListener("resize", function () {
myCharts.resize();
});
},
//點(diǎn)擊高亮
// 點(diǎn)擊后渲染不同echarts試圖
acts(index) {
this.actlist = index;
if (index == 4) {
this.isshow = true;
} else {
this.isshow = false;
//我是循環(huán)寫的按鈕，所以通過判斷點(diǎn)擊的是哪一個(gè)按鈕，來對(duì)應(yīng)賦值新的數(shù)據(jù)然后調(diào)用方法傳參從新渲染試圖，單獨(dú)寫的按鈕直接在上面加點(diǎn)擊事件就行。
//當(dāng)然這個(gè)數(shù)據(jù)不是死的，后面給成點(diǎn)擊按鈕發(fā)請(qǐng)求接口那數(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點(diǎn)擊按鈕動(dòng)態(tài)更新數(shù)據(jù)
1.后臺(tái)代碼（模擬數(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.前臺(tái)界面
按鈕
<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實(shí)例
var myChart = echarts.init(document.getElementById('main-line'));
// 使用剛指定的配置項(xiàng)和數(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.點(diǎn)擊搜索按鈕觸發(fā)的函數(shù)
function loadsexnums(){
var nums_man=[]; //存放男性數(shù)量
var nums_women=[]; //存放女性數(shù)量
myChart.showLoading(); //數(shù)據(jù)加載完之前先顯示一段簡(jiǎn)單的loading動(dòng)畫
$.ajax({
type : "post",
async : true, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行）
url : "/queryMiddleAppinfo", //請(qǐng)求發(fā)送到TestServlet處
data : {},
dataType : "json", //返回?cái)?shù)據(jù)形式為json
success : function(result) {
//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對(duì)象
if (result) {
var man = result.man;
var women = result.women;
for(var i=0;i<man.length;i++){
nums_man.push(man[i]); //挨個(gè)取出類別并填入類別數(shù)組
}
for(var i=0;i<women.length;i++){
nums_women.push(women[i]); //挨個(gè)取出銷量并填入銷量數(shù)組
}
myChart.hideLoading(); //隱藏加載動(dòng)畫
myChart.setOption({ //加載數(shù)據(jù)圖表
series: [
{
data: nums_man //此處只對(duì)data數(shù)據(jù)修改即可
},
{
data: nums_women
}
]
});
}
},
error : function(errorMsg) {
alert("圖表請(qǐng)求數(shù)據(jù)失敗!");
myChart.hideLoading();
}
})
}5.效果
每次點(diǎn)擊查詢圖標(biāo)展示都會(huì)變化
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue通過provide & inject兩個(gè)關(guān)鍵字完成父組件向子孫組件直接傳值，很像子類能夠使用父類的屬性一樣方便。provide & inject一般用于多層之間的傳值，兩層之間還是使用props進(jìn)行2021-10-10
詳解VueJS 數(shù)據(jù)驅(qū)動(dòng)和依賴追蹤分析
這篇文章主要介紹了詳解VueJS 數(shù)據(jù)驅(qū)動(dòng)和依賴追蹤分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
vue使用Vue.extend方法仿寫個(gè)loading加載中效果實(shí)例
在vue中提供v-loading命令,用于div的loading加載,下面這篇文章主要給大家介紹了關(guān)于vue使用Vue.extend方法仿寫個(gè)loading加載中效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue 實(shí)現(xiàn)定時(shí)刷新與自動(dòng)更新(示例詳解)
在現(xiàn)代 Web 開發(fā)中,定時(shí)刷新頁(yè)面或定時(shí)更新數(shù)據(jù)是一種常見的需求,尤其是在需要與服務(wù)器進(jìn)行定時(shí)通信或者展示實(shí)時(shí)數(shù)據(jù)的場(chǎng)景下,Vue.js 提供了簡(jiǎn)單而有效的方法來實(shí)現(xiàn)定時(shí)刷新和自動(dòng)更新,本文將介紹幾種常見的定時(shí)刷新方式、適用場(chǎng)景、優(yōu)缺點(diǎn)以及性能考慮2024-11-11
使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目搭建的詳細(xì)過程,需要的朋友可以參考下2022-10-10
vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了如何理解Vue的作用域插槽的實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
如何使用Vue3.2+Vite2.7從0快速打造一個(gè)UI組件庫(kù)
構(gòu)建工具使用vue3推薦的vite,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3.2+Vite2.7從0快速打造一個(gè)UI組件庫(kù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了VueX模塊的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06