需求:我请求后台拿数据渲染了图表后,我想要通过点击一个按钮,然后让图表上的节点数值显示和隐藏。就是series内的那个show。
我试过把show后面填变量,然后点击按钮修改变量,但是这样图表并不会刷新,如果要刷新成有数值的,就要从新调用一下接口从哪数据渲染就可以。但是这一直掉接口也不好,有什么办法可以让他不用掉接口从新拿数据就能前台操作更新配置吗。
topGraph(val) {
var myChart = this.$echarts.init(this.$refs["topechart"]);
var option = {
color: ["#222222", "#ff0000"],
title: {
text: val.unStandedTitle,
left: "center",
},
tooltip: {
trigger: "axis",
formatter: "{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%",
},
legend: {
data: ["实际", "指标"],
right: 100,
},
grid: {
left: "3%",
right: "4%",
bottom: 10,
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
//X轴刻度信息
data: val.xaxisList,
axisLabel: {
interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
rotate: 0, //设置日期显示样式(倾斜度)
},
},
yAxis: [
{
type: "value",
min: val.minPercentage,
max: val.maxPercentage,
interval: val.intervalInt,
axisLabel: {
formatter: "{value}" + "%",
},
},
],
series: [
{
name: "实际",
type: "line",
symbol: "circle",
symbolSize: 9,
data: val.unStandedArray,
label: {
show: this.isShownbr,
},
lineStyle: {
width: 5, //设置线条粗细
},
},
{
name: "指标",
type: "line",
symbol: "circle",
symbolSize: 0,
data: val.indexArray,
label: {
show: this.isShownbr,
},
lineStyle: {
width: 5, //设置线条粗细
},
},
],
};
//初始化表格
myChart.clear();
myChart.setOption(option);
//监听,根据视口变化动态从新渲染表格
window.addEventListener("resize", function () {
myChart.resize();
});
},