vue项目中使用ElementUI-Table嵌套Echarts柱状图

最新推荐文章于 2024-04-20 09:26:20 发布

小陈同学の

最新推荐文章于 2024-04-20 09:26:20 发布

阅读量3.6k

点赞数 1

分类专栏： VUE项目问题记录文章标签： vue elementui echarts

本文链接：https://blog.csdn.net/weixin_43781426/article/details/124443423

版权

VUE项目问题记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目场景：

项目场景：在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)
      }