初步完成屠宰

src/router/index.js

@@ -13,13 +13,18 @@ const routes = [
   {
     path: '/lvShanXiang',
     name: 'lvShanXiang',
-    component: () => import(/* webpackChunkName: "about" */ '@/views/LvShanXiang/LvShanXiang.vue')
+    component: () => import('@/views/LvShanXiang/LvShanXiang.vue')
   },
   {
     path: '/yield',
     name: 'yield',
     component: () => import('@/views/Yield/Yield.vue')
   },
+  {
+    path: '/butcher',
+    name: 'butcher',
+    component: () => import('@/views/Butcher/Butcher.vue')
+  },
 ]
 
 const router = new VueRouter({

src/views/Butcher/Butcher.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="Butcher">
+        <header>
+            <h1 class="title">湖羊全产业链数字化管理系统</h1>
+        </header>
+        <section>
+            <aside class="left">
+                <article class="left_1">
+                    <h3>市场行情</h3>
+                    <table class="table">
+                        <tr>
+                            <th>产品</th>
+                            <th>价格</th>
+                            <th>市场</th>
+                        </tr>
+                        <tr v-for="item in 8" :key="item">
+                            <td>羊肉</td>
+                            <td>
+                                55元/公斤
+                                <b v-if="item % 2 == 0" style="color: #00ca01"
+                                    >▲</b
+                                >
+                                <b v-else style="color: red">▼</b>
+                            </td>
+                            <td>杭州市</td>
+                        </tr>
+                    </table>
+                </article>
+                <article class="left_2">
+                    <h3>市场行情</h3>
+                    <E-Left1 style="height: 100%"></E-Left1>
+                </article>
+                <article class="left_3">
+                    <h3>长兴县销售情况</h3>
+                    <E-Left2 style="height: 100%"></E-Left2>
+                </article>
+            </aside>
+            <div class="center">
+                <div class="top"></div>
+                <div class="bottom">
+                    <article>
+                        <E-Bottom1 style="height: 100%"></E-Bottom1>
+                    </article>
+                    <article>
+                        <E-Bottom2 style="height: 100%"></E-Bottom2>
+                    </article>
+                    <article>
+                        <E-Bottom3 style="height: 100%"></E-Bottom3>
+                    </article>
+                </div>
+            </div>
+            <aside class="right">
+                <article class="right_1">
+                    <h3>产品运输任务</h3>
+                    <E-Right1 style="height: 100%"></E-Right1>
+                </article>
+                <article class="right_2">
+                    <h3>屠宰采购来源</h3>
+                    <!--  cellspacing="0px" -->
+                    <table class="table">
+                        <tr>
+                            <th>羊只</th>
+                            <th>来源地</th>
+                        </tr>
+                        <tr v-for="item in 8" :key="item" class="row">
+                            <td>12457</td>
+                            <td>湖州市长兴县吕山乡</td>
+                        </tr>
+                    </table>
+                </article>
+                <article class="right_3">
+                    <h3>屠宰销售去向</h3>
+                    <table class="table">
+                        <tr>
+                            <th>羊只</th>
+                            <th>去向</th>
+                        </tr>
+                        <tr v-for="item in 8" :key="item" class="row">
+                            <td>12457</td>
+                            <td>湖州市长兴县吕山乡</td>
+                        </tr>
+                    </table>
+                </article>
+            </aside>
+        </section>
+    </div>
+</template>
+
+<script>
+import ELeft1 from "./charts/ELeft1";
+import ELeft2 from "./charts/ELeft2";
+import ERight1 from "./charts/ERight1";
+import EBottom1 from "./charts/EBottom1";
+import EBottom2 from "./charts/EBottom2";
+import EBottom3 from "./charts/EBottom3";
+export default {
+    name: "Butcher",
+    components: {
+        ELeft1,
+        ELeft2,
+        ERight1,
+        EBottom1,
+        EBottom2,
+        EBottom3,
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.Butcher {
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    > header {
+        height: 180px;
+        display: flex;
+        justify-content: center;
+        .title {
+            border: 1px solid rgb(218, 99, 99);
+            width: 46%;
+            height: 100%;
+            font-size: 50px;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+        }
+    }
+    > section {
+        flex-grow: 1;
+        border: 1px solid rgb(62, 58, 128);
+        height: 61%;
+        display: flex;
+        > aside {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            > article {
+                height: 31%;
+                background-image: url(../../assets/download.png);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                > h3 {
+                    color: #fff;
+                    font-size: 25px;
+                    margin-left: 12%;
+                    margin-top: 13px;
+                    display: flex;
+                    align-items: center;
+                    &:before {
+                        content: "";
+                        display: inline-block;
+                        height: 25px;
+                        width: 25px;
+                        margin-right: 50px;
+                        background-color: #fff;
+                    }
+                }
+            }
+        }
+        > .left {
+            width: 20%;
+            border: 1px solid rgb(218, 99, 99);
+            display: flex;
+            flex-direction: column;
+            > .left_1 {
+                > .table {
+                    color: #fff;
+                    font-size: 30px;
+                    margin: 20px;
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+        }
+        > .center {
+            width: 60%;
+            border: 1px solid rgb(163, 147, 58);
+            display: flex;
+            flex-direction: column;
+            > .top {
+                height: 72%;
+                border: 1px solid rgb(62, 58, 128);
+            }
+            > .bottom {
+                height: 28%;
+                border: 1px solid rgb(23, 131, 116);
+                display: flex;
+                justify-content: space-between;
+                > article {
+                    width: 33%;
+                }
+            }
+        }
+        > .right {
+            width: 20%;
+            border: 1px solid rgb(61, 197, 179);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            > .right_2,>.right_3 {
+                > .table {
+                    color: #fff;
+                    font-size: 30px;
+                    margin: 20px;
+                    width: 96%;
+                    text-align: center;
+                    .row{
+                        background-color: #006666ee;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/Butcher/charts/EBottom1.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="container">
+        <div id="EBottom1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom1",
+    data() {
+        return {
+            data1: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
+            data2: [28, 28, 18.2, 25.6, 28.8, 35.6, 30.6],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom1")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    text: "销售占比",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "22%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    }
+                },
+                legend: {
+                    data: ["胴体", "种羊"],
+                    top: 10,
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    data: [
+                        "9-24",
+                        "9-25",
+                        "9-26",
+                        "9-27",
+                        "9-28",
+                        "9-29",
+                        "9-30",
+                    ],
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                            width: 2,
+                        },
+                    },
+                },
+                yAxis: {
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    name: "(万元)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //真实数据所在
+                        name: "胴体",
+                        type: "bar",
+                        itemStyle: {
+                            color: "#147CE3",
+                            barBorderRadius: 3,
+                        },
+                        barWidth: '50%',
+                        label: {
+                            show: true, //开启显示
+                            position: "top", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                color: "#42EFF5",
+                                fontSize: 20,
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.data1,
+                    },
+                    {
+                        //真实数据所在
+                        name: "种羊",
+                        type: "bar",
+                        itemStyle: {
+                            color: "#28A757ee",
+                            barBorderRadius: 3,
+                        },
+                        barGap: "-100%",
+                        barWidth: '50%',
+                        label: {
+                            show: true, //开启显示
+                            position: "top", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                color: "#1BF538",
+                                fontSize: 20,
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.data2,
+                    }
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/EBottom2.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="container">
+        <div id="EBottom2" style="height: 100%"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom2",
+    data() {
+        return {
+            X: [1500, 1858, 1955, 2485, 3857],
+            Y: ["和平镇", "泗安镇", "水口乡", "林城镇", "吕山乡"],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "来源地排行",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "15%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    // formatter(val) {
+                    //     console.log(val)
+                    // },
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                yAxis: {
+                    data: this.Y,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(万元)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //真实数据所在
+                        name: "胴体",
+                        type: "bar",
+                        barWidth: "60%",
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                0,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: "#10303F",
+                                    },
+                                    {
+                                        offset: 0.4,
+                                        color: "#16AFB8",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#16AFB8",
+                                    },
+                                ]
+                            ),
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        label: {
+                            show: true, //开启显示
+                            position: "right", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                fontSize: 20,
+                                color: '#7CF5E9'
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.X,
+                    },
+                    {
+                        type: "bar",
+                        itemStyle: {
+                            color: "#052E3D",
+                            barBorderRadius: 3,
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        barGap: "-100%",
+                        barWidth: "60%",
+                        z: -1,
+                        data: [...this.X].fill(
+                            Math.ceil(Math.max(...this.X) / 1000) * 1000
+                        ),
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/EBottom3.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="container">
+        <div id="EBottom3" style="height: 100%"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom3",
+    data() {
+        return {
+            X: [1500, 1858, 1955, 2485, 3857],
+            Y: ["其他", "江苏", "上海", "福建", "浙江"],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom3")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "销售地排行",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "15%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    // formatter(val) {
+                    //     console.log(val)
+                    // },
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                yAxis: {
+                    data: this.Y,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(万元)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //真实数据所在
+                        name: "胴体",
+                        type: "bar",
+                        barWidth: "60%",
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                0,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: "#10303F",
+                                    },
+                                    {
+                                        offset: 0.4,
+                                        color: "#16AFB8",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#16AFB8",
+                                    },
+                                ]
+                            ),
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        label: {
+                            show: true, //开启显示
+                            position: "right", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                fontSize: 20,
+                                color: '#7CF5E9'
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.X,
+                    },
+                    {
+                        type: "bar",
+                        itemStyle: {
+                            color: "#052E3D",
+                            barBorderRadius: 3,
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        barGap: "-100%",
+                        barWidth: "60%",
+                        z: -1,
+                        data: [...this.X].fill(
+                            Math.ceil(Math.max(...this.X) / 1000) * 1000
+                        ),
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/ELeft1.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="container">
+        <div id="ELeft1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft1",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ELeft1"));
+            // 指定图表的配置项和数据
+            let option = {
+                color: ["#01D7EF"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "10%",
+                    y2: "13%",
+                    containLabel: true,
+                },
+                calculable: true,
+                xAxis: {
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "category",
+                    data: ["四月", "五月", "六月", "七月", "九月"],
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                            width: 2,
+                        },
+                    },
+                },
+
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                            width: 2,
+                        },
+                    },
+                    scale: true,
+                    min(val) {
+                        return Number((val.min*0.7).toFixed(0))
+                    }
+                },
+                series: [
+                    {
+                        name: "公羊",
+                        type: "line",
+                        barWidth: "30%",
+                        data: [1289, 1345, 1277, 1388, 1327],
+                        markLine: {
+                            data: [{ type: "average", name: "平均值", label: {fontSize: 20} }],
+                        },
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/ELeft2.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="container">
+        <div id="ELeft2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft2",
+    data() {
+        return {
+            data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("ELeft2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "13%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                legend: {
+                    data: ["种羊", "肉羊"],
+                    top: 10,
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    data: [
+                        "08-01",
+                        "08-02",
+                        "08-03",
+                        "08-04",
+                        "08-05",
+                        "08-06",
+                        "08-07",
+                    ],
+                },
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "(元)",
+                        nameTextStyle: {
+                            fontSize: 20,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "solid",
+                                color: "#fff", //左边线的颜色
+                                width: "2", //坐标线的宽度
+                            },
+                        },
+                        axisLabel: {
+                            formatter: "{value} ",
+                            textStyle: {
+                                color: "#fff",
+                                fontSize: 20,
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "肉羊",
+                        type: "line",
+                        lineStyle: {
+                            color: "#01d7ef",
+                            width: 2,
+                        },
+                        areaStyle: {
+                            //区域填充样式
+                            normal: {
+                                //线性渐变
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#01d7ef", // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "#0d1943", // 100% 处的颜色
+                                        },
+                                    ],
+                                    false
+                                ),
+                            },
+                        },
+                        itemStyle: {
+                            //borderWidth: 3,
+                            //borderColor: 'yellow',
+                            color: "#01d7ef",
+                        },
+                        smooth:true,
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [14800, 11570, 12339, 8670, 9850, 13547, 17548],
+                    },
+                    {
+                        name: "种羊",
+                        type: "line",
+                        lineStyle: {
+                            color: "#AE3A4B",
+                            width: 2,
+                        },
+                        areaStyle: {
+                            //区域填充样式
+                            normal: {
+                                //线性渐变
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#AE3A4B", // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "#0d1943", // 100% 处的颜色
+                                        },
+                                    ],
+                                    false
+                                ),
+                            },
+                        },
+                        itemStyle: {
+                            //borderWidth: 3,
+                            //borderColor: 'yellow',
+                            color: "#AE3A4B",
+                        },
+                        smooth:true,
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [8678, 12457, 17542, 13548, 14956, 13578, 14754],
+                    }
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/ERight1.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="container">
+        <div id="ERight1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ERight1",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ERight1"));
+            // 指定图表的配置项和数据
+            let option = {
+                color: ["#147CE3"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "5%",
+                    x2: "8%",
+                    y2: "13%",
+                    containLabel: true,
+                },
+                calculable: true,
+                yAxis: {
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "category",
+                    data: ["运输中", "已收货", "未收货"],
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                },
+
+                xAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "公羊",
+                        type: "bar",
+                        barWidth: "50%",
+                        data: [155, 126, 328]
+                    }
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="home">
 		<router-link to="/yield">养殖</router-link>|
+		<router-link to="/butcher">屠宰</router-link>|
         <router-link to="/lvShanXiang">吕山乡</router-link>
     </div>
 </template>

src/views/LvShanXiang/charts/ERight1.vue

@@ -150,7 +150,7 @@ export default {
                         symbolSize: [57, 6],
                         symbolMargin: 3,
                         z: -10,
-                        data: [...this.data].fill(Math.max(...this.data)),
+                        data: [...this.data].fill(Math.ceil(Math.max(...this.data)/10)*10),
                     },
                 ],
             };