美化dashbord

2021-09-02 11:49:22 +08:00
parent 55ba5d2fef
commit 836a3d0957
6 changed files with 266 additions and 38 deletions
@@ -0,0 +1,119 @@
+<template>
+    <div class="dashbord-line" style="height: 400px;width: 100%;"></div>
+</template>
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons");
+
+
+var dataAxis = [];
+for (var i = 1 ; i < 21 ; i++){
+    dataAxis.push(`${i}号`)
+}
+var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
+var yMax = 500;
+var dataShadow = [];
+
+for (var i = 0; i < data.length; i++) {
+    dataShadow.push(yMax);
+}
+
+export default {
+    name: "line",
+    data() {
+        return {
+            chart: null,
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart();
+        });
+    },
+    beforeDestroy() {
+        if (!this.chart) {
+            return;
+        }
+        this.chart.dispose();
+        this.chart = null;
+    },
+    methods: {
+        initChart() {
+            this.chart = echarts.init(this.$el, "macarons");
+            this.setOptions();
+        },
+        setOptions() {
+            this.chart.setOption({
+                title: {
+                    text: 'GVA 图标示例',
+                },
+                xAxis: {
+                    data: dataAxis,
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    z: 10
+                },
+                yAxis: {
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                dataZoom: [
+                    {
+                        type: 'inside'
+                    }
+                ],
+                series: [
+                    {
+                        type: 'bar',
+                        itemStyle: {
+                            borderRadius: [5, 5, 0, 0],
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: '#83bff6' },
+                                    { offset: 0.5, color: '#188df0' },
+                                    { offset: 1, color: '#188df0' }
+                                ]
+                            ),
+
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 0, 0, 1,
+                                    [
+                                        { offset: 0, color: '#2378f7' },
+                                        { offset: 0.7, color: '#2378f7' },
+                                        { offset: 1, color: '#83bff6' }
+                                    ]
+                                )
+                            }
+                        },
+                        data: data
+                    }
+                ]
+            });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.dashbord-line {
+    margin: 20px 0;
+    padding: 20px;
+    background-color: #fff;
+}
+</style>