后端数据 动态修改Echarts

获取到后端数据

  基于y轴的柱状图，

for 循环 赋值拿到的数据，要放在data 中， 方便 options 配置中使用

 initChart() {
 >> 柱状图
      this.chart = this.$echarts.init(this.$refs.refchart);
      getbizcount("11320722014281341M").then(res=>  {
        this.bizChart=res.data.data
        console.log(  this.bizChart)

        for (let i = 0; i < this.bizChart.length; i++) {
           this.datay[i] = this.bizChart[i].name  // 拿到 展示的name
            this.serData[i]= this.bizChart[i].count     // 具体数据
          // console.log(this.bizChart[i].name)
        }
    
            // 初始化图表配置
            var option = {
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: { 
                      axisLabel:{
          //                 width: 100,//将内容的宽度固定
          // overflow: 'truncate',//超出的部分截断
          // // truncate: '...',//截断的部分用...代替
                      },
          show: true,
          axisLine: {
            show: false,
            lineStyle: {
              width: 2, // 轴线宽度
            },
          },
          axisTick: {
            show: false,
          },
          textStyle: {
            fontSize: "10",
          },
          axisLabel: {
            textStyle: {
              width: 60, //将内容的宽度固定
          overflow: 'truncate',//超出的部分截断
              color: "#fff",
            },
          },
          lineStyle: {
            color: "yellow",
            type: "solid", //y轴线为实线
          },
          type: "category",
          data:  this.datay, // 展示的name数据
        },
        series: [
          {
            // barWidth: 8, // 柱图宽度
            // barGap: 36, // 柱图之间的间距
            grid: {
              containLabel: true,
              top: 30,
              left: 10,
              right: 10,
              bottom: 8,
            },
            color: "#0BDEDB",
            data:this.serData, // 具体数据
            type: "bar",
            label: {
              show: true, // 开启显示
              position: "right", // 在上方显示
              distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: "middle",
              textStyle: {
                // 数值样式
                color: "#fff",
                fontSize: 10,
              },
              // formatter: function (params) {
              //   return params.value + "%";
              // },
            },
          },
        ],
      };
      this.chart.setOption(option);
      
      
      
      
      
      
    }) 


    },

渲染出来的。