Echarts图表之带提示框的柱形图可以动态更新legend块名称，以及根据数量设置动态高度

  html

    <template>
<div class="home" style="margin-left: 20px;margin-top: 30px;">
      <div id="container" ref="echart1"></div>
    </div>
</template>

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);
      },