前言：
今天遇到的一个要求，让在页面上添加一个按钮，点击的时候所有的图表会显示节点数据，然后再点击一次就全部隐藏。这里就把各个方法详细的告诉大家，希望以后如果有同样的人遇到这种类似的需求可以看了我的帖子直接搞定。
效果图
原本默认有显示节点数据
点击按钮后可以切换，不显示节点数据。同时图表也不刷新，不再从新请求一次后台，直接可以改配置后生成图表
介绍：两个方面的写法介绍
1，循环多个图表的时候如何改配置
2，只有一个图表的时候如何该配置
代码部分
（1）循环多个图表修改配置方法
核心点：循环配合myChart.setOption，重新加载配置项，这里可以填入新的配置，也可以这种直接series这样写，里面你有几条数据就对应写几个对象，是对应顺序来的。
<template>
<div>
<!-- 按钮-->
<div>
<el-button size="mini" type="primary" @click="isShowNumber">数值</el-button>
</div>
<!-- 图表 -->
<div class="roseChart_wrap">
<div
v-loading="roseChart_show"
style="height: 50vh; margin-top: 70px"
v-for="(item, index) in echarts_map"
:key="index"
>
<div style="height: 100%; width: 100%" class="roseChart"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//循环图表的数据，数据是请求后台发过来的，后台发过来数据格式为多个对象，每个对象内数据就是一个图表的数据，几个对象就是几个图。我们根据这个长度来循环对应的图表，然后用循环配合setoption构建对应的不同数据的图表
echarts_map: [],
//图表loading图
roseChart_show: false,
//修改配置切换状态
isShownbr: true,
};
},
methods: {
isShowNumber() {
//点击按钮切换true和false的。
this.isShownbr = !this.isShownbr;
//获取到图表的dom
let roseCharts = document.getElementsByClassName("roseChart");
//循环生成图表
for (var i = 0; i < this.echarts_map.length; i++) {
//构建图表实例
let myChart = echarts.init(roseCharts[i]);
//把每一个实例再用setoption生成一遍，里面配置信息可以直接这样放。这里series内有条数据，所以可以写多个对象，按顺序对应每一个。有两条数据那就写两个，10个就10个，不确定的可以多复制一些，不碍事。
myChart.setOption({
series: [
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
{
label: {
show: this.isShownbr,
},
},
],
});
}
},
//柱状图
topGraph(val) {
var roseCharts = document.getElementsByClassName("roseChart");
for (var i = 0; i < roseCharts.length; i++) {
var myChart = echarts.init(roseCharts[i]);
var option = {
color: val[i].colorArray,
title: {
text: val[i].text,
left: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
grid: {
left: "3%",
right: "4%",
bottom: 60,
containLabel: true,
},
toolbox: {
feature: {
dataView: {
show: true, readOnly: false },
restore: {
show: true },
saveAsImage: {
show: true },
},
},
legend: [
{
data: val[i].bararray,
bottom: 30,
},
{
data: val[i].linearray,
bottom: 10,
},
],
xAxis: [
{
type: "category",
//X轴刻度信息
data: val[i].xaiastime,
//X轴文字倾斜角度
axisLabel: {
interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
rotate: 50, //设置日期显示样式（倾斜度)
},
axisPointer: {
type: "shadow",
},
},
],
yAxis: [
{
type: "value",
},
{
type: "value",
min: val[i].minLine,
max: val[i].maxLine,
interval: val[i].intervalFloat,
},
],
series: val[i].realvalue,
};
//初始化表格
myChart.clear();
myChart.setOption(option);
//监听，根据视口变化动态从新渲染表格
window.addEventListener("resize", function () {
myChart.resize();
});
}
},
},
};
</script>
<style scoped>
.roseChart_wrap {
width: 100%;
height: 80vh;
overflow: auto;
}
</style>
（2）单个图表修改配置
和上面的基本一致，只不过不需要循环了，直接生成这个图表的实例重新渲染就行了。
<template>
<div>
<!-- 选项 -->
<div>
<el-button size="mini" type="primary" @click="isShowNumber">数值</el-button>
</div>
<!-- 图表 -->
<div style="height: 50vh; margin-top: 70px">
<div ref="topechart" style="height: 100%; width: 100%"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowNumber2: false,
};
},
methods: {
isShowNumber() {
//切换图表的显示隐藏
this.isShowNumber2 = !this.isShowNumber2;
//生成图表实例，这里因为不是循环的，所以不需要循环生成，一个就行了。
let myChart = this.$echarts.init(this.$refs["topechart"]);
//然后把图表的实例从新渲染一下，配置因为我这个图是固定只有两条线，所以我就只用添加两个就可以，对应两条线
myChart.setOption({
series: [
{
label: {
show: this.isShowNumber2,
},
},
{
label: {
show: this.isShowNumber2,
},
},
],
});
},
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();
});
},
},
};
</script>
<style scoped>
.box {
margin-top: 20px;
text-align: center;
}
</style>