first commit

web/statics/script/column1.js

@@ -0,0 +1,141 @@
+layui.use(['echarts'], function () {
+    let echarts = layui.echarts;
+    var column1 = echarts.init(document.getElementById('column1'), null, {
+        width: 500,
+        height: 400
+    });
+    option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                color: '#fff',
+                fontSize: '26'
+            }
+        },
+        legend: {
+            top: '0%',
+            right: '1%',
+            data: ['收入金额', '支出金额'],
+            fontSize: 12,
+            color: '#808080',
+            icon: 'rect'
+        },
+        grid: {
+            // show: true,
+            top: 60,
+            left: 50,
+            bottom: 50,
+            right: 50,
+            // containLabel: true
+        },
+        xAxis: [{
+            type: 'category',
+            axisTick: {
+                show: true,
+                alignWithLabel: true
+            },
+            axisLine: {
+                show: true,
+            },
+            // axisLabel: {
+            //     color: '#4D4D4D',
+            //     fontSize: 14,
+            //     margin: 20,
+            //     fontWeight: 'bold'
+            // },
+            data: ['阿里云合作项目', '上海帆软合作项目', '简道云合作项目'],
+
+        }],
+        yAxis: [{
+            name: '单位：元',
+            nameTextStyle: {
+                color: '#808080',
+                fontSize: 12,
+                padding: [0, 0, 0, -5]
+            },
+            max: function (value) {
+                if (value.max < 5) {
+                    return 5
+                } else {
+                    return value.max
+                }
+            },
+            type: 'value',
+            axisLine: {
+                show: false,
+                with: 1,
+            },
+            axisLabel: {
+                color: '#808080',
+                fontSize: 12,
+                margin: 5
+            },
+            splitLine: {
+                show: true
+            },
+            axisTick: {
+                show: false
+            }
+        }],
+        series: [
+            {
+                name: '收入金额',
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'top',
+                    fontSize: 14,
+                    color: '#3DC3F0',
+                    fontWeight: 'bold'
+                },
+                barMaxWidth: 30,
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#3DC3F0' // 0% 处的颜色
+                    }, {
+                        offset: 1, color: '#CCF2FF' // 100% 处的颜色
+                    }]
+                },
+                data: [60, 110, 180]
+            },
+            {
+                name: '支出金额',
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'top',
+                    fontSize: 14,
+                    color: '#3D8BF0',
+                    fontWeight: 'bold'
+                },
+                barMaxWidth: 30,
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#3D8BF0' // 0% 处的颜色
+                    }, {
+                        offset: 1, color: '#CCE2FF' // 100% 处的颜色
+                    }]
+                },
+                data: [90, 130, 780]
+            }
+        ]
+    };
+
+    column1.setOption(option);
+
+    window.onresize = function () {
+        column1.resize();
+    }
+
+})