左右列表

src/main/data-center/src/components/card.vue

@@ -37,11 +37,11 @@ export default {
 
 <style lang="less" scoped>
 .card {
-    width: 410px;
-    height: 251px;
+    height: 100%;
+    max-width: 410px;
     .flex-col();
     .card-top {
-        background-size: contain;
+        background-size: 100% 100%;
         height: 49px;
         box-sizing: border-box;
         .flex();
@@ -53,12 +53,13 @@ export default {
     .card-center {
         flex-grow: 1;
         background-size: 100% 100%;
-        padding: 20px 20px 0;
+        padding: 0;
         box-sizing: border-box;
+        .flex-col();
     }
 
     .card-bottom {
-        background-size: contain;
+        background-size: 100% 100%;
         height: 31px;
         flex-shrink: 0;
     }

src/main/data-center/src/components/charts/amountByCity.vue

@@ -0,0 +1,86 @@
+<template>
+    <card icon="shuju_icon_geshiqiye" title="各市企业数量对比图">
+        <div class="chart" ref="chart"></div>
+    </card>
+</template>
+
+<script>
+import card from '../card.vue';
+import * as echarts from 'echarts';
+import chartOptions from '../../mixins/chartOptions';
+
+export default {
+    name: 'AmountByCity',
+    components: { card },
+    mixins: [chartOptions],
+    mounted() {
+        this.$nextTick(() => {
+            this.myChart = echarts.init(this.$refs.chart, 'jmrh');
+            this.initChat(this.myChart);
+            this.value = [5, 10, 9, 15, 20, 18, 22];
+            var option = {
+                xAxis: {
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                },
+                tooltip: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
+                color: ['#fb7463'],
+                series: [
+                    {
+                        name: '企业数量',
+                        data: this.value,
+                        type: 'line',
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#FB7463',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(251, 116, 99, 0)',
+                                    },
+                                ],
+                                global: false,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            formatter: '{b}:{c}',
+                            backgroundColor: '#fb7463',
+                            color: '#fff',
+                            padding: [3, 5],
+                            borderRadius: 4,
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                            },
+                        },
+                    },
+                ],
+            };
+            this.myChart.setOption(option, {
+                replaceMerge: ['series'],
+            });
+        });
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+}
+</style>

src/main/data-center/src/components/charts/companyAmount.vue

@@ -17,30 +17,28 @@ import * as echarts from 'echarts';
 import chartOptions from '../../mixins/chartOptions';
 
 export default {
-    name: 'CompanyAmount',
+    name: 'Project',
     components: { card },
     mixins: [chartOptions],
     mounted() {
         this.$nextTick(() => {
-            this.myChart = echarts.init(this.$refs.chart, 'jmrhTheme');
+            this.myChart = echarts.init(this.$refs.chart, 'jmrh');
             this.initChat(this.myChart);
+            this.value = [5, 10, 9, 15, 20, 18, 22];
             var option = {
                 xAxis: {
-                    axisLine: {
-                        lineStyle: {
-                            color: '#31DDFA',
-                        },
-                    },
                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                 },
+                tooltip: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
                 series: [
                     {
                         name: '企业数量',
-                        data: [5, 10, 9, 15, 12, 18, 20],
+                        data: this.value,
                         type: 'line',
-                        lineStyle: {
-                            color: '#00000080',
-                        },
                         areaStyle: {
                             color: {
                                 type: 'linear',
@@ -61,10 +59,17 @@ export default {
                                 global: false,
                             },
                         },
+                        label: {
+                            show: false,
+                            formatter: '{b}:{c}',
+                            backgroundColor: this.$colors.prim,
+                            color: '#fff',
+                            padding: [3, 5],
+                            borderRadius: 4,
+                        },
                         emphasis: {
-                            focus: 'series',
                             label: {
-                                backgroundColor: '#4DACFF40',
+                                show: true,
                             },
                         },
                     },
@@ -73,6 +78,8 @@ export default {
             this.myChart.setOption(option, {
                 replaceMerge: ['series'],
             });
+
+            this.myChart.on('highlight', this.highlighted);
         });
     },
     data() {
@@ -80,12 +87,23 @@ export default {
             type: 'date',
         };
     },
+    methods: {
+        highlighted(params) {
+            var highlightComponent = params.batch[0];
+            console.log(params);
+            // this.myChart.setOption()
+            highlightComponent.dataIndex;
+
+            // this.myChart.setOption({});
+        },
+    },
 };
 </script>
 
 <style lang="less" scoped>
 .chart {
     width: 100%;
-    height: 150px;
+    height: 100%;
+    flex-grow: 1;
 }
 </style>

src/main/data-center/src/components/charts/compare.vue

@@ -0,0 +1,90 @@
+<template>
+    <card icon="shuju_icon_geshixiangmu" title="各市军民融合指数对比图">
+        <div class="chart" ref="chart"></div>
+    </card>
+</template>
+
+<script>
+import card from '../card.vue';
+import chartOptions from '../../mixins/chartOptions';
+import * as echarts from 'echarts';
+export default {
+    name: 'Compare',
+    components: { card },
+    mixins: [chartOptions],
+    mounted() {
+        this.myChart = echarts.init(this.$refs.chart, 'jmrh');
+        var data1 = [];
+
+        for (var i = 0; i < 7; i++) {
+            data1.push((Math.random() * 2).toFixed(2) * 100);
+        }
+        this.$nextTick(() => {
+            // this.initChat(this.myChart);
+            var option = {
+                grid: {
+                    top: 30,
+                    bottom: 20,
+                    left: 60,
+                    right: 40,
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                },
+                xAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false,
+                    },
+                },
+                tooltip: {
+                    trigger: 'axis',
+                },
+                series: [
+                    {
+                        name: '交易数',
+                        data: data1,
+                        type: 'bar',
+                        barWidth: '60%',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(125, 212, 255, 0.29)',
+                        },
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#0D72FE',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: '#34E5FA',
+                                    },
+                                ],
+                                global: false,
+                            },
+                        },
+                    },
+                ],
+            };
+            this.myChart.setOption(option);
+        });
+    },
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+}
+</style>

src/main/data-center/src/components/charts/project.vue

@@ -0,0 +1,85 @@
+<template>
+    <card icon="shuju_icon_xiangmu" title="项目分布">
+        <div class="chart" ref="chart"></div>
+    </card>
+</template>
+
+<script>
+import card from '../card.vue';
+import * as echarts from 'echarts';
+import chartOptions from '../../mixins/chartOptions';
+
+export default {
+    name: 'ProjectAmount',
+    components: { card },
+    mixins: [chartOptions],
+    mounted() {
+        this.$nextTick(() => {
+            this.myChart = echarts.init(this.$refs.chart, 'jmrh');
+            this.initChat(this.myChart);
+            this.value = [5, 10, 9, 15, 20, 18, 22];
+            var option = {
+                xAxis: {
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                },
+                tooltip: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
+                series: [
+                    {
+                        name: '企业数量',
+                        data: this.value,
+                        type: 'line',
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#4DACFF',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(77, 172, 255, 0)',
+                                    },
+                                ],
+                                global: false,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            formatter: '{b}:{c}',
+                            backgroundColor: this.$colors.prim,
+                            color: '#fff',
+                            padding: [3, 5],
+                            borderRadius: 4,
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                            },
+                        },
+                    },
+                ],
+            };
+            this.myChart.setOption(option, {
+                replaceMerge: ['series'],
+            });
+        });
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+}
+</style>

src/main/data-center/src/components/charts/projectAmount.vue

@@ -0,0 +1,86 @@
+<template>
+    <card icon="shuju_icon_xiangmu" title="项目分布">
+        <div class="chart" ref="chart"></div>
+    </card>
+</template>
+
+<script>
+import card from '../card.vue';
+import * as echarts from 'echarts';
+import chartOptions from '../../mixins/chartOptions';
+
+export default {
+    name: 'CompanyAmount',
+    components: { card },
+    mixins: [chartOptions],
+    mounted() {
+        this.$nextTick(() => {
+            this.myChart = echarts.init(this.$refs.chart, 'jmrh');
+            this.initChat(this.myChart);
+            this.value = [5, 10, 9, 15, 20, 18, 22];
+            var option = {
+                xAxis: {
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                },
+                tooltip: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
+                color: ['#5CFFAC'],
+                series: [
+                    {
+                        name: '企业数量',
+                        data: this.value,
+                        type: 'line',
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#5CFFAC',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(92, 255, 172, 0)',
+                                    },
+                                ],
+                                global: false,
+                            },
+                        },
+                        label: {
+                            show: false,
+                            formatter: '{b}:{c}',
+                            backgroundColor: '#34D281',
+                            color: '#fff',
+                            padding: [3, 5],
+                            borderRadius: 4,
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                            },
+                        },
+                    },
+                ],
+            };
+            this.myChart.setOption(option, {
+                replaceMerge: ['series'],
+            });
+        });
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+}
+</style>

src/main/data-center/src/components/charts/transaction.vue

@@ -13,7 +13,7 @@ export default {
     components: { card },
     mixins: [chartOptions],
     mounted() {
-        this.myChart = echarts.init(this.$refs.chart, 'jmrhTheme');
+        this.myChart = echarts.init(this.$refs.chart, 'jmrh');
         var data1 = [];
         var data2 = [];
 
@@ -34,22 +34,17 @@ export default {
                     show: true,
                     data: ['交易数', '咨询数'],
                     left: '10%',
-                    textStyle: {
-                        color: '#FFFFFF',
-                        fontSize: 14,
-                        lineHeight: 20,
-                    },
+                    top: 20,
                 },
                 grid: {
-                    top: 50,
+                    top: 70,
+                },
+                tooltip: {
+                    trigger: 'axis',
                 },
                 xAxis: {
-                    axisLine: {
-                        lineStyle: {
-                            color: '#31DDFA',
-                        },
-                    },
                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    boundaryGap: true,
                 },
                 series: [
                     {
@@ -57,6 +52,7 @@ export default {
                         data: data1,
                         type: 'bar',
                         stack: 'one',
+                        barWidth: '60%',
                         emphasis: emphasisStyle,
                     },
                     {
@@ -64,27 +60,22 @@ export default {
                         data: data2,
                         type: 'bar',
                         stack: 'one',
+                        barWidth: '60%',
                         emphasis: emphasisStyle,
                     },
                 ],
             };
-
-            this.myChart.setOption(option, {
-                replaceMerge: ['series'],
-            });
+            this.myChart.setOption(option);
         });
     },
-    data() {
-        return {
-            type: 'date',
-        };
-    },
+    methods: {},
 };
 </script>
 
 <style lang="less" scoped>
 .chart {
     width: 100%;
-    height: 381px;
+    height: 100%;
+    flex-grow: 1;
 }
 </style>

src/main/data-center/src/components/navMenus.vue

@@ -17,7 +17,7 @@
 
 <script>
 export default {
-    name: 'menu',
+    name: 'Navmenu',
     data() {
         return {
             menus: [

src/main/data-center/src/jmrh.project.json

@@ -1,172 +1,123 @@
 {
-    "version": 1,
-    "themeName": "jmrh",
-    "theme": {
-        "seriesCnt": "4",
-        "backgroundColor": "#0a2b6a",
-        "titleColor": "#ffffff",
-        "subtitleColor": "#aaaaaa",
-        "textColorShow": false,
-        "textColor": "#333",
-        "markTextColor": "#ffffff",
-        "color": [
-            "#ff896a",
-            "#5ac1ff",
-            "#fda033",
-            "#fd6c33",
-            "#fd4c33",
-            "#5cffac",
-            "#34e5fa",
-            "#0d72fe",
-            "#7289ab",
-            "#91ca8c",
-            "#f49f42"
-        ],
-        "borderColor": "#ccc",
-        "borderWidth": 0,
-        "visualMapColor": [
-            "#bf444c",
-            "#d88273",
-            "#f6efa6"
-        ],
-        "legendTextColor": "#ffffff",
-        "kColor": "#fd1050",
-        "kColor0": "#0cf49b",
-        "kBorderColor": "#fd1050",
-        "kBorderColor0": "#0cf49b",
-        "kBorderWidth": 1,
-        "lineWidth": "1",
-        "symbolSize": "6",
-        "symbol": "emptyCircle",
-        "symbolBorderWidth": "0",
-        "lineSmooth": false,
-        "graphLineWidth": "1",
-        "graphLineColor": "#aaaaaa",
-        "mapLabelColor": "#000",
-        "mapLabelColorE": "rgb(100,0,0)",
-        "mapBorderColor": "#444",
-        "mapBorderColorE": "#444",
-        "mapBorderWidth": 0.5,
-        "mapBorderWidthE": 1,
-        "mapAreaColor": "#eee",
-        "mapAreaColorE": "rgba(255,215,0,0.8)",
-        "axes": [
-            {
-                "type": "all",
-                "name": "通用坐标轴",
-                "axisLineShow": true,
-                "axisLineColor": "#34e4fa",
-                "axisTickShow": true,
-                "axisTickColor": "#ffffff",
-                "axisLabelShow": true,
-                "axisLabelColor": "#34e4fa",
-                "splitLineShow": true,
-                "splitLineColor": [
-                    "#34e4fa"
-                ],
-                "splitAreaShow": false,
-                "splitAreaColor": [
-                    "#eeeeee"
-                ]
-            },
-            {
-                "type": "category",
-                "name": "类目坐标轴",
-                "axisLineShow": true,
-                "axisLineColor": "#333",
-                "axisTickShow": true,
-                "axisTickColor": "#333",
-                "axisLabelShow": true,
-                "axisLabelColor": "#333",
-                "splitLineShow": false,
-                "splitLineColor": [
-                    "#ccc"
-                ],
-                "splitAreaShow": false,
-                "splitAreaColor": [
-                    "rgba(250,250,250,0.3)",
-                    "rgba(200,200,200,0.3)"
-                ]
-            },
-            {
-                "type": "value",
-                "name": "数值坐标轴",
-                "axisLineShow": true,
-                "axisLineColor": "#333",
-                "axisTickShow": true,
-                "axisTickColor": "#333",
-                "axisLabelShow": true,
-                "axisLabelColor": "#333",
-                "splitLineShow": true,
-                "splitLineColor": [
-                    "#ccc"
-                ],
-                "splitAreaShow": false,
-                "splitAreaColor": [
-                    "rgba(250,250,250,0.3)",
-                    "rgba(200,200,200,0.3)"
-                ]
-            },
-            {
-                "type": "log",
-                "name": "对数坐标轴",
-                "axisLineShow": true,
-                "axisLineColor": "#333",
-                "axisTickShow": true,
-                "axisTickColor": "#333",
-                "axisLabelShow": true,
-                "axisLabelColor": "#333",
-                "splitLineShow": true,
-                "splitLineColor": [
-                    "#ccc"
-                ],
-                "splitAreaShow": false,
-                "splitAreaColor": [
-                    "rgba(250,250,250,0.3)",
-                    "rgba(200,200,200,0.3)"
-                ]
-            },
-            {
-                "type": "time",
-                "name": "时间坐标轴",
-                "axisLineShow": true,
-                "axisLineColor": "#333",
-                "axisTickShow": true,
-                "axisTickColor": "#333",
-                "axisLabelShow": true,
-                "axisLabelColor": "#333",
-                "splitLineShow": true,
-                "splitLineColor": [
-                    "#ccc"
-                ],
-                "splitAreaShow": false,
-                "splitAreaColor": [
-                    "rgba(250,250,250,0.3)",
-                    "rgba(200,200,200,0.3)"
-                ]
+    "darkMode": true,
+    "color": ["#4dacff", "#fb7463", "#5cffac", "#fda033", "#fd4c33"],
+    "backgroundColor": "rgba(255,255,255,0)",
+    "axisPointer": {
+        "lineStyle": { "color": "#34e4fa" },
+        "crossStyle": { "color": "#34e4fa" },
+        "label": { "color": "#34e4fa" }
+    },
+    "legend": { "textStyle": { "color": "#34e4fa" } },
+    "textStyle": { "color": "#34E4FA", "fontSize": 12, "lineHeight": 20 },
+    "title": {
+        "textStyle": { "color": "#FFFFFF" },
+        "subtextStyle": { "color": "#FFFFFF" }
+    },
+    "toolbox": { "iconStyle": { "borderWidth": 1, "borderColor": "#B9B8CE" } },
+    "dataZoom": {
+        "borderColor": "#71708A",
+        "textStyle": { "color": "#B9B8CE" },
+        "brushStyle": { "color": "rgba(135,163,206,0.3)" },
+        "handleStyle": { "color": "#353450", "borderColor": "#C5CBE3" },
+        "moveHandleStyle": { "color": "#B0B6C3", "opacity": 0.3 },
+        "fillerColor": "rgba(135,163,206,0.2)",
+        "emphasis": {
+            "handleStyle": { "borderColor": "#91B7F2", "color": "#4D587D" },
+            "moveHandleStyle": { "color": "#636D9A", "opacity": 0.7 }
+        },
+        "dataBackground": {
+            "lineStyle": { "color": "#71708A", "width": 1 },
+            "areaStyle": { "color": "#71708A" }
+        },
+        "selectedDataBackground": {
+            "lineStyle": { "color": "#87A3CE" },
+            "areaStyle": { "color": "#87A3CE" }
+        }
+    },
+    "visualMap": {
+        "color": ["#fd4c33", "#fd6c33", "#fda033"],
+        "textStyle": { "color": "#34e4fa" }
+    },
+    "timeline": {
+        "lineStyle": { "color": "#B9B8CE" },
+        "label": { "color": "#B9B8CE" },
+        "controlStyle": { "color": "#B9B8CE", "borderColor": "#B9B8CE" }
+    },
+    "calendar": {
+        "itemStyle": { "color": "#100C2A" },
+        "dayLabel": { "color": "#B9B8CE" },
+        "monthLabel": { "color": "#B9B8CE" },
+        "yearLabel": { "color": "#B9B8CE" }
+    },
+    "timeAxis": {
+        "axisLine": { "lineStyle": { "color": "#B9B8CE" } },
+        "splitLine": { "lineStyle": { "color": "#34e4fa" } },
+        "splitArea": {
+            "areaStyle": {
+                "color": ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
+            }
+        },
+        "minorSplitLine": { "lineStyle": { "color": "#20203B" } }
+    },
+    "logAxis": {
+        "axisLine": { "lineStyle": { "color": "#B9B8CE" } },
+        "splitLine": { "lineStyle": { "color": "#34e4fa" } },
+        "splitArea": {
+            "areaStyle": {
+                "color": ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
+            }
+        },
+        "minorSplitLine": { "lineStyle": { "color": "#20203B" } }
+    },
+    "valueAxis": {
+        "axisLine": { "lineStyle": { "color": "#34e4fa" } },
+        "splitLine": {
+            "lineStyle": {
+                "color": "#34E4FA",
+                "type": "dashed",
+                "opacity": 0.6
             }
-        ],
-        "axisSeperateSetting": false,
-        "toolboxColor": "#ffffff",
-        "toolboxEmphasisColor": "#34e5fa",
-        "tooltipAxisColor": "#0d72fe",
-        "tooltipAxisWidth": "1",
-        "timelineLineColor": "#eeeeee",
-        "timelineLineWidth": 1,
-        "timelineItemColor": "#dd6b66",
-        "timelineItemColorE": "#a9334c",
-        "timelineCheckColor": "#e43c59",
-        "timelineCheckBorderColor": "#c23531",
-        "timelineItemBorderWidth": 1,
-        "timelineControlColor": "#eeeeee",
-        "timelineControlBorderColor": "#eeeeee",
-        "timelineControlBorderWidth": 0.5,
-        "timelineLabelColor": "#eeeeee",
-        "datazoomBackgroundColor": "rgba(47,69,84,0)",
-        "datazoomDataColor": "rgba(255,255,255,0.3)",
-        "datazoomFillColor": "rgba(167,183,204,0.4)",
-        "datazoomHandleColor": "#a7b7cc",
-        "datazoomHandleWidth": "100",
-        "datazoomLabelColor": "#eeeeee"
-    }
-}
+        },
+        "splitArea": {
+            "areaStyle": {
+                "color": ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
+            }
+        },
+        "minorSplitLine": { "lineStyle": { "color": "#34e4fa" } }
+    },
+    "categoryAxis": {
+        "axisLine": { "lineStyle": { "color": "#34e4fa" } },
+        "splitLine": { "lineStyle": { "color": "#34e4fa" }, "show": false },
+        "splitArea": {
+            "areaStyle": {
+                "color": ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
+            }
+        },
+        "minorSplitLine": { "lineStyle": { "color": "#34e4fa" } }
+    },
+    "line": {
+        "symbol": "emptyCircle",
+        "symbolSize": 4,
+        "lineStyle": {
+            "width": 1
+        }
+    },
+    "graph": {
+        "color": ["#4dacff", "#fb7463", "#5cffac", "#fda033", "#fd4c33"]
+    },
+    "gauge": {
+        "title": { "color": "#B9B8CE" },
+        "axisLine": { "lineStyle": { "color": [[1, "rgba(207,212,219,0.2)"]] } },
+        "axisLabel": { "color": "#B9B8CE" },
+        "detail": { "color": "#EEF1FA" }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#f64e56",
+            "color0": "#54ea92",
+            "borderColor": "#f64e56",
+            "borderColor0": "#54ea92"
+        }
+    },
+    "series": []
+}

src/main/data-center/src/main.js

@@ -10,7 +10,7 @@ import JiangXi from './JiangXi.json';
 import jmrhTheme from './jmrh.project.json';
 
 echarts.registerMap('JangXi', JiangXi);
-echarts.registerTheme('jmrhTheme', jmrhTheme);
+echarts.registerTheme('jmrh', jmrhTheme);
 
 Vue.config.productionTip = false;
 Vue.use(http);

src/main/data-center/src/mixins/chartOptions.js

@@ -2,6 +2,7 @@ export default {
     data() {
         return {
             myChart: null,
+            value: [],
         };
     },
     methods: {
@@ -9,15 +10,10 @@ export default {
             console.log(myChart);
             var option = {
                 grid: {
-                    left: '10%',
-                    top: 10,
-                    right: '10%',
+                    top: 30,
                     bottom: 20,
-                },
-                textStyle: {
-                    color: '#34E4FA',
-                    fontSize: 12,
-                    lineHeight: 20,
+                    left: 60,
+                    right: 40,
                 },
                 xAxis: {
                     type: 'category',
@@ -25,29 +21,9 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    splitLine: {
-                        lineStyle: {
-                            color: '#34E4FA',
-                            type: 'dashed',
-                            opacity: 0.6,
-                        },
-                    },
                 },
                 tooltip: {
                     trigger: 'axis',
-                    backgroundColor: '#3CBEF2',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 12,
-                        lineHeight: 20,
-                    },
-                    formatter: '{b0}: {c0}',
-                    borderWidth: 0,
-                    padding: [0, 5, 0, 5],
-                    position: function (point, params, dom, rect, size) {
-                        // 固定在顶部
-                        return [point[0], '10%'];
-                    },
                 },
             };
 

src/main/data-center/src/views/Home.vue

@@ -1,11 +1,32 @@
 <template>
     <div class="home">
         <div class="left">
-            <company-amount></company-amount>
-            <transaction></transaction>
+            <div class="grid">
+                <div class="grid-item">
+                    <company-amount></company-amount>
+                </div>
+                <div class="grid-item">
+                    <transaction></transaction>
+                </div>
+                <div class="grid-item">
+                    <project></project>
+                </div>
+            </div>
         </div>
         <div class="chart-map" id="map-chart"></div>
-        <div class="right" style="width: 410px"></div>
+        <div class="right">
+            <div class="grid">
+                <div class="grid-item">
+                    <amount-by-city></amount-by-city>
+                </div>
+                <div class="grid-item">
+                    <project-amount></project-amount>
+                </div>
+                <div class="grid-item">
+                    <compare></compare>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -15,12 +36,16 @@ import 'echarts-gl';
 import JiangXi from '../JiangXi.json';
 import companyAmount from '../components/charts/companyAmount.vue';
 import Transaction from '../components/charts/transaction.vue';
+import Project from '../components/charts/project.vue';
+import AmountByCity from '../components/charts/amountByCity.vue';
+import ProjectAmount from '../components/charts/projectAmount.vue';
+import Compare from '../components/charts/compare.vue';
 export default {
-    components: { companyAmount, Transaction },
+    components: { companyAmount, Transaction, Project, AmountByCity, ProjectAmount, Compare },
     name: 'Home',
     mounted() {
         var chartDom = document.getElementById('map-chart');
-        var myChart = echarts.init(chartDom, 'jmrhTheme');
+        var myChart = echarts.init(chartDom, 'jmrh');
 
         var data = JiangXi.features.map((item) => {
             return {
@@ -165,11 +190,56 @@ export default {
     },
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .home {
     display: flex;
     .chart-map {
         flex-grow: 1;
     }
 }
+.left {
+    position: absolute;
+    top: 0;
+    padding: 129px 30px 30px;
+    bottom: 0;
+    left: 0;
+    z-index: 30;
+    .grid {
+        .grid-item {
+            &:nth-child(2) {
+                height: 40%;
+            }
+        }
+    }
+}
+.grid {
+    height: 100%;
+    .grid-item {
+        height: 30%;
+        box-sizing: border-box;
+        .card {
+            width: 25vw;
+            height: 100%;
+        }
+    }
+    .grid-item + .grid-item {
+        padding-top: 20px;
+    }
+}
+
+.right {
+    position: absolute;
+    top: 0;
+    padding: 129px 30px 30px;
+    bottom: 0;
+    right: 0;
+    z-index: 30;
+    .grid {
+        .grid-item {
+            &:nth-child(3) {
+                height: 40%;
+            }
+        }
+    }
+}
 </style>