echart默认参数有值自动赋值动态展示,图表X轴每行最大字符数超过换行

方法：

async handleMapClickAdd() {
      // 合并异步请求处理
      const { data: gmData } = await zcfxsbtz();
      this.mxgmList = gmData.data;
      // console.log(this.mxgmList)
      方法一：
      this.mxgmList.forEach((item) => {
        this.heLista.push(item.num);
      });
      //  获取x轴名字
      this.mxxsname = gmData.data.map((item) => item.name);
	  //获取最大值
      this.maxSuma = Math.ceil(Math.max(...this.heLista) / 10) * 10;
      this.$nextTick(() => {
        this.createChart1(); // 在更新相关数据后调用图表创建方法
      });
    },

图表：

createChart1() {
      var myCharts = echarts.init(document.getElementById('app1'));
      // 构建默认值为0的对象数组要定义的数据
      var defaultData = [
        { name: '输电线路', value: 0 },
        { name: '变电设备', value: 0 },
        { name: '通讯线路及设备', value: 0 },
        { name: '自动化控制设备及仪器仪表', value: 0 },
        { name: '生产管理用工器具', value: 0 },
        { name: '运输设备', value: 0 },
        { name: '辅助生产设备及器具', value: 0 },
        { name: '房屋', value: 0 },
        { name: '建筑物', value: 0 }
      ];
      //遍历数据让名字和值对应上
      //1简洁方法
      this.mxgmList.forEach(item => {
        const index = defaultData.findIndex(element => element.name === item.name);
        if (index !== -1) defaultData[index].value = item.num;
      });
      //2老方法
      // 更新对象数组中的值1
      // this.mxgmList.forEach(function (item) {
      //   var index = defaultData.findIndex(function (element) {
      //     return element.name === item.name;
      //   });
      //   if (index !== -1) {
      //     defaultData[index].value = item.num;
      //   }
      // });
	 //图表配置:
      var option = {
        title: {
          text: ''
        },
        grid: {
          
          show: false,
          top: '10%',
          right: '5%',
          left: '15%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: defaultData.map(function (item) {
            return item.name;
          }),
          axisLabel: {
            rotate: 45, // 旋转角度，使得标签斜着显示
            interval: 0,
            formatter: function (value) {
              // 定义每行最大字符数
              var maxCharactersPerLine = 4;
              // 如果标签字段长度小于等于最大字符数，直接返回原始值
              if (value.length <= maxCharactersPerLine) {
                return value;
              }
              var result = '';
              for (var i = 0; i < value.length; i++) {
                result += value[i];
                if ((i + 1) % maxCharactersPerLine === 0 && i !== value.length - 1) {
                  result += '\n';
                }
              }
              return result;
            },
            textStyle: {
              fontSize: 10
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位 台/条/套',
          min: 0,
          max: this.maxSuma
        },
        legend: {
          textStyle: {
            color: '#333',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}:<br/> {c}台/条/套"
        },
        color: ['#00b5a3', '#34c1f0', '#ec808d'],
        series: [
          {
            data: defaultData.map(function (item) {
              return item.value;
            }),
            barWidth: 20, // 设置柱子的宽度为30
            type: 'bar',
            label: {
              show: false,
              position: 'top'
            }
          },
        ]
      };
      option.legend.top = 'top';
      myCharts.setOption(option);
    },