html
js
data() {
return {
option1: {
grid: {
top: "40px",
left: "17%",
right: "2%",
bottom: "8%",
containLabel: false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
yAxis: {},
xAxis: {
type: 'value',
},
legend: {
selectedMode: 'single', //只能选一个
data: ['销量: ㎡', '实收平均: 元/㎡'],
selected: {
'销量: ㎡': true,
'实收平均: 元/㎡': false
}
},
series: [{
name: '销量: ㎡',
type: 'bar',
data: [],
barWidth: 25,
label: {
formatter: "{c}",
show: true, //开启显示
position: 'right',
textStyle: { //数值样式
color: '#5087EC',
fontSize: 12
}
},
itemStyle: { //柱状颜色和圆角
color: '#5087EC',
},
},
{
name: '实收平均: 元/㎡',
type: 'bar',
data: [],
label: {
formatter: "{c}",
show: true, //开启显示
position: 'right',
textStyle: { //数值样式
color: '#68BBC4',
fontSize: 12
}
},
barWidth: 25,
itemStyle: { //柱状颜色和圆角
color: '#68BBC4',
},
}
]
}
};
监听option数据变化 ，很重要（不然数据不会动态更新）
watch: {
option1: {
handler() {
console.log('监听')
this.mychart1();
},
deep: true
}
},
第一步：动态获取xy轴坐标名称和数据
// 获取xy轴
getOrderAuditDiscountReportFun() {
getOrderAuditDiscountReport2(this.searchObj).then((res) => {
if (res.code == 1) {
this.HistogramList = res.data
// 遍历y轴
this.option1.series[0].data = res.data.series[0].data // 初始化时，遍历y轴坐标数据
var x_Data = res.data.series[0].titles
this.option1.yAxis = {
type: 'category',
data: x_Data, // 遍历y轴名称
}
// 遍历x轴
this.option1.series[1].data = res.data.series[1].data // 初始化时，遍历x轴坐标数据
// 动态更新legend块名称
if (this.searchObj.classify == 'F1') {
this.option1.series[0].name = '销量: 单位'
this.option1.series[1].name = '实收平均: 元/单位'
this.option1.legend.data = ['销量: 单位', '实收平均: 元/单位']
} else {
this.option1.series[0].name = '销量: ㎡'
this.option1.series[1].name = '实收平均: 元/㎡'
this.option1.legend.data = ['销量: ㎡', '实收平均: 元/㎡']
}
// 动态更新legend块名称选中状态，true为高亮，false置灰
if (this.searchObj.classify == 'F1') {
// 五金类
this.option1.legend.selected = {
'销量: 单位': true,
'实收平均: 元/单位': false
} //回到第一个legend块
} else {
this.option1.legend.selected = {
'销量: ㎡': true,
'实收平均: 元/㎡': false
} //回到第一个legend块
}
this.mychart1()
}
});
},
下面实现了：
更新y轴坐标数据，y轴名称
点击一个legend，另个不要选中，
条件判断，动态更新legend名称
动态调整图标高度
默认每次调用回到第一个legend块
mychart1() {
//加载echart
var echart = this.$echarts.init(document.getElementById("container"));
echart.setOption({}, true)
// series[0].titles.length为柱状图的条数，即数据长度。40为我给每个柱状图的高度。
//动态更新图标高度
if (this.HistogramList.series[0].titles.length > 16) {
var autoHeight = this.HistogramList.series[0].titles.length * 40 //默认第一个块
} else {
var autoHeight = 700
}
var sel_name = this.option1.series[0].name
echart.off('legendselectchanged') //解决重复触发
// 下面是为了点击一个legend，另个不选中，并且动态更新，当classify == 'F1时动态更新legend名称
echart.on('legendselectchanged', (e) => {
if (this.searchObj.classify == 'F1') {
// 五金特殊处理
if (e.name == '销量: 单位') {
this.option1.yAxis = {
type: 'category',
data: this.HistogramList.series[0].titles,
boundaryGap: true
}
this.option1.legend.selected = {
'销量: 单位': true,
'实收平均: 元/单位': false
} //回到第一个legend块
autoHeight = this.HistogramList.series[0].titles.length * 70
} else {
this.option1.yAxis = {
type: 'category',
data: this.HistogramList.series[1].titles,
boundaryGap: true
}
this.option1.legend.selected = {
'销量: 单位': false,
'实收平均: 元/单位': true
} //回到第一个legend块
autoHeight = this.HistogramList.series[1].titles.length * 70
}
} else {
// 除了五金
if (e.name == '销量: ㎡') {
this.option1.yAxis = {
type: 'category',
data: this.HistogramList.series[0].titles,
boundaryGap: true
}
this.option1.legend.selected = {
'销量: ㎡': true,
'实收平均: 元/㎡': false
} //回到第一个legend块
autoHeight = this.HistogramList.series[0].titles.length * 70
} else {
this.option1.yAxis = {
type: 'category',
data: this.HistogramList.series[1].titles,
boundaryGap: true
}
this.option1.legend.selected = {
'销量: ㎡': false,
'实收平均: 元/㎡': true
} //回到第一个legend块
autoHeight = this.HistogramList.series[1].titles.length * 70
}
}
sel_name = e.name
})
echart.getDom().style.height = autoHeight + "px"; //高度动态设定
echart.resize();
echart.setOption(this.option1, true);
},
