项目场景：

项目场景：在VUE项目的一个页面中，需要使用Echarts中的柱状图进行数据可视化处理。 要求：每个柱状图的粗细要相等，颜色要自动使用不同颜色，特殊数据要固定黑色。 难点：页面中需要有多个柱状图，类似于表格里嵌套柱状图。 解决办法，使用v-for循环生成柱状图容器，使用v-bind动态绑定柱状图容器id值。

解决思路

按照Echarts的官方文档在项目中引入，使用el-table，通过v-for生成多个柱状图，放在table的列中，每个柱状图的div容器使用v-bind动态绑定id值。

html代码：

<el-table :data="projectList" id="proFunction" style="width: 100%;" max-height="670">
	<el-table-column v-for="(value,index) in functionList" :key="index" align=center min-width="230">
        <template slot-scope="scope">
          <!-- 柱状图放置区域 -->
          <div :id="scope.row.projectName+_+value.name" style="width:100%;height:200px;border:1px solid skyblue;margin: 0 auto;"></div>
        </template>
      </el-table-column>
</el-table>

js代码：

import echarts from echarts
methods: {
          
   
//柱状图数据处理和渲染
zhu () {
          
   
      let that = this
      let option = {
          
   }
      console.time(柱状图绘制)
      console.log(this.projectList)
      console.log(this.functionList)
      //数据处理部分
      //柱状图渲染部分
      option = {
          
   
              xAxis: {
          
   
                type: category,
                data: deptName,//横坐标名称集合
              },
              yAxis: {
          
   
                type: value
              },
              series: [
                {
          
   
                  data: deptUserNum,//纵坐标数据集
                  type: bar,
                  barWidth: 15,//柱子宽度
                  itemStyle: {
          
   
                    normal: {
          
   
                      label: {
          
   
                        show: true,		//开启数值显示
                        position: top,	//在上方显示
                        textStyle: {
          
   	    //数值样式
                          color: black,
                          fontSize: 16
                        }
                      },
                      color: function (params) {
          
   
                        // 定义颜色集合
                        var colorList = [
                          #C6E579, #B5C334, #FCCE10, #E87C25, #27727B,
                          #FE8463, #9BCA63, #FAD860, #F3A43B, #60C0DD,
                          #D7504B, #C1232B, #F4E001, #F0805A, #26C0C0
                        ];
                        //根据数据量返回颜色列表
                        if (params) {
          
   
                          if ($.inArray(params.name, that.Bgs) == -1) {
          
   
                            return colorList[params.dataIndex]
                          } else {
          
   
                          //特殊情况，如果横坐标数据名在特殊集合中，统一使用黑色渲染
                            return black
                          }
                        }
                      },
                    }
                  },
                  markLine: {
          
    // 设置平均线
                    data: [
                      {
          
   
                        type: "average",
                        name: "我是平均值",
                        color: "#baf"
                      }
                    ]
                  },
                }
              ]
            };
            //渲染
            myChart.setOption(option)
      }

效果展示：部分数据涉及公司保密，已打码