1

轴线位置 = (Math.abs(min) / (max - min)) * 100

1

数据条宽度 = (Math.abs(当前值) / (max - min)) * 100

1

2

3

4

5

// 当前值 < 0 时数据条在轴线左边，改变 right 值

// 数据条的总长为100%

right = 100 - 轴线位置

// 当前值 > 0 时数据条在轴线右边，改变 left 值

left = 轴线位置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template>

  <el-table :data="tableData" border style="width: 100%">

    <el-table-column

      v-for="item in columns"

      sortable

      :key="item.prop"

      :prop="item.prop"

      :label="item.label"

    >

      <template slot-scope="scope">

        <!-- 数据条 -->

        <div class="data-bar" :style="renderDataBar(item, scope.row)"></div>

        <!-- 轴线 -->

        <div class="data-bar-axis" :style="renderAxis(item, scope.row)"></div>

        <!-- 当前值 -->

        <span class="cell-value">{{ scope.row[item.prop] }}</span>

      </template>

    </el-table-column>

  </el-table>

</template>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<style>

    .el-table .cell-value {

      position: relative;

    }

    .data-bar {

      position: absolute;

      top: 0;

      bottom: 0;

      margin: 5px auto;

      transition: width 0.2s;

    }

    .data-bar-axis {

      position: absolute;

      top: -1px;

      bottom: 0;

      border-right: 1px dashed #303133;

    }

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

<script>

export default {

  data() {

    return {

      columns: [

        {

          prop: 'positive',

          label: '正值',

          min: 1,

          max: 10

        },

        {

          prop: 'negative',

          label: '负值',

          min: -1,

          max: -12

        },

        {

          prop: 'mixed',

          label: '正负值',

          min: -6,

          max: 5

        }

      ],

      tableData: []

    }

  },

  created() {

    this.initData()

  },

  methods: {

    initData() {

      // mock数据过程，忽略 ...

      this.tableData.push({...})

    },

    renderDataBar(column, row) {

      const { min, max, prop } = column

      // 当前单元格值

      const cellVal = row[prop]

      if (cellVal === 0) return { display: 'none' };

      let style = {

        width: '0',

        background: '#409eff'

      }

      // 全是正值 或 全是负值

      if (min >= 0 || max <= 0) {

        const width = ((cellVal / max) * 100).toFixed(2);

        style.width = `${width}%`

        style = min >= 0 ? { ...style, left: '0' } : { ...style, right: '0' }

      }

      // 正负值都有

      if (min < 0 && max > 0) {

        const range = max - min;

        // 轴线位置

        const leftOffset = Math.abs((min / range) * 100)

        // 数据条宽度

        const width = ((Math.abs(cellVal / range) * 100)).toFixed(2)

        style = cellVal > 0 ? {

          width: `${width}%`,

          left: `${leftOffset.toFixed(2)}%`

        } : {

          width: `${width}%`,

          background: '#F56C6C', // 负值进行颜色区分

          right: `${(100 - leftOffset).toFixed(2)}%`

        }

      }

      return style;

    },

    renderAxis(column) {

      const { min, max } = column

      if (min < 0 && max > 0) {

        // 正负值都有的情况下，显示轴线

        const range = max - min;

        const leftOffset = (((0 - min) / range) * 100).toFixed(2)

        return {

          left: `${leftOffset}%`

        }

      } else {

        return {

          display: 'none'

        }

      }

    }

  }

}

</script>