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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <basic-container>
    <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
  </basic-container>
 
</template>
 
<script>
import 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
 
var data = [
  [120, 132, 101, 134, 90, 230, 210, 130, 0, 122, 100, 80],
  [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
];
 
// 找到每一项数据中的最大值并保存到数组
var maxValues = data[0].map(function (_, i) {
  return Math.max.apply(null, data.map(function (item) {
    return item[i];
  }));
});
 
var colors = ['#91CC75', '#5470C6'];
// 生成柱状图的 series 数据
var seriesData = [];
for (var i = 0; i < data.length; i++) {
  var curSeriesData = [];
  // 计算数据中的每组数据的最大值
  for (var j = 0; j < data[i].length; j++) {
    var borderRadius = [0, 0, 0, 0];  // 默认不设置圆角
    if (data[i][j] === maxValues[j]) {  // 如果当前柱子的值等于对应列的最大值，设置圆角
      borderRadius = [50, 50, 0, 0];  // 设置四个角都为圆角
    }
    curSeriesData.push({
      value: data[i][j],
      itemStyle: {
        normal: {
          barBorderRadius: borderRadius,  // 设置圆角
          color: colors[i],
          show: function (params) {
            // 根据数据值的大小来判断是否显示 label
            return params.value > 30;
          }
        }
      }
    });
  }
  var seriesName = '';
  if (i === 0) {
    seriesName = '总量';
  } else if (i === 1) {
    seriesName = '新增';
  }
  seriesData.push({
    name: seriesName,
    type: 'bar',
    stack: '总量',
    data: curSeriesData,
    label: {
      show: true,
      position: 'top'
    },
    itemStyle: {
      color: colors[i]  // 设置柱子的颜色
    },
    emphasis: {
      focus: 'series'
    }
  });
}
 
export default {
  name: "ColumnarChart",
  data() {
    return {
      chartOptions: {
        title: {
          text: '人员主数据统计'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总量', '新增'],
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData,
      }
    }
  }
}
</script>
 
<style scoped lang="scss">
#chart {
  width: 1280px;
  height: 800px;
}
</style>