使用echarts点击按钮从新渲染图表并更新数据

export default {
data() {
return {
//默认给一个数据，一进来就能看到的。
barDatas:[730, 801, 924, 222, 1333, 411, 566, 888, 466, 877]
};
},
mounted() {
//一进页面就加载试图，并把默认的数据传给他渲染出来，这个默认的不是写死的，实际工作可以一进来直接发请求那数据给试图
this.barGraph(this.barDatas);
},
methods: {
//横向条形图
barGraph(val) {
//初始化图标
var myCharts = this.$echarts.init(this.$refs["echart-right"]);
//Y轴的数据，和数据值位置一一对应
var cate = [
"0001",
"0002",
"0003",
"0004",
"0005",
"0006",
"0007",
"0008",
"0009",
"0010",
];
//数据值，顺序和Y轴的名字一一对应
var barData = val    //这个地方参数传给他渲染数据
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轴刻度线和数字
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轴名字跟着数据动
realtimeSort: true,
name: "数量",
type: "bar",
data: barData,
barWidth: 14,
barGap: 10,
smooth: true,
valueAnimation: true,
//Y轴数字显示部分
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);
//图表大小变动从新渲染，动态自适应
window.addEventListener("resize", function () {
myCharts.resize();
});
},
//点击高亮
// 点击后渲染不同echarts试图
acts(index) {
this.actlist = index;
if (index == 4) {
this.isshow = true;
} else {
this.isshow = false;
//我是循环写的按钮，所以通过判断点击的是哪一个按钮，来对应赋值新的数据然后调用方法传参从新渲染试图，单独写的按钮直接在上面加点击事件就行。
//当然这个数据不是死的，后面给成点击按钮发请求接口那数据赋值。
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");
}
}
}
},
};

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

<button class="layui-btn" data-type="reload">搜索</button>

<div id="main-line"></div>

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main-line'));
// 使用刚指定的配置项和数据显示图表。
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: '最小值'}
]
}
}
]
});

function loadsexnums(){
var nums_man=[];    //存放男性数量
var nums_women=[];    //存放女性数量
myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
$.ajax({
type : "post",
async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/queryMiddleAppinfo",    //请求发送到TestServlet处
data : {},
dataType : "json",        //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
var man = result.man;
var women = result.women;
for(var i=0;i<man.length;i++){
nums_man.push(man[i]);    //挨个取出类别并填入类别数组
}
for(var i=0;i<women.length;i++){
nums_women.push(women[i]);    //挨个取出销量并填入销量数组
}
myChart.hideLoading();    //隐藏加载动画
myChart.setOption({        //加载数据图表
series: [
{
data: nums_man //此处只对data数据修改即可
},
{
data: nums_women
}
]
});
}
},
error : function(errorMsg) {
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
}