初步完成吕山，养殖完成部分

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
+    "echarts-gl": "^1.1.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/main.js

@@ -3,7 +3,13 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './assets/css/reset.scss'
-import echarts from "echarts";
+import echarts from "echarts"
+import 'echarts/map/js/china'
+import 'echarts/map/js/province/zhejiang'
+import 'echarts/map/js/province/shandong'
+import './assets/js/huzhou'
+// import './assets/js/changxing'
+import 'echarts-gl'
 
 Vue.prototype.$echarts = echarts
 

src/views/LvShanXiang/LvShanXiang.vue

@@ -1,22 +1,86 @@
 <template>
     <div class="LvShanXiang">
         <div class="left1">
-            <E-Left1 style="height: 100%"></E-Left1>
+            <E-Left1 style="height: 100%;"></E-Left1>
+        </div>
+        <div class="middle">
+            <header class="header">湖羊全产业链数字化管理系统</header>
+            <section class="section">
+                <div class="warp">
+                    <div class="item">
+                        <div>
+                            <span class="title">当月存栏量：</span>
+                            <span class="num">10534</span>
+                            <span class="unit">只</span>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">当月出栏量：</span>
+                            <span class="num">1534</span>
+                            <span class="unit">只</span>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">月种羊出栏：</span>
+                            <span class="num">2380</span>
+                            <span class="unit">只</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="warp">
+                    <div class="item">
+                        <div>
+                            <span class="title">当前肉羊价：</span>
+                            <span class="num">58.5</span>
+                            <span class="unit">元/kg</span>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">当前种羊价：</span>
+                            <span class="num">68.5</span>
+                            <span class="unit">元/kg</span>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div>
+                            <span class="title">当前羊粪价：</span>
+                            <span class="num">0.8</span>
+                            <span class="unit">元/kg</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <footer class="footer"></footer>
+        </div>
+        <div class="right1">
+            <E-Right1 style="height: 100%"></E-Right1>
         </div>
-        <div class="middle">2</div>
-        <div class="right1">3</div>
         <div class="left2">
             <E-Left2 style="height: 100%"></E-Left2>
         </div>
-        <div class="right2">5</div>
-        <div class="left3">6</div>
-        <div class="left3">7</div>
+        <div class="right2">
+            <E-Right2 style="height: 100%"></E-Right2>
+        </div>
+        <div class="left3">
+            <E-Left3 style="height: 100%"></E-Left3>
+        </div>
+        <div class="right3">
+            <E-Right3 style="height: 100%"></E-Right3>
+        </div>
     </div>
 </template>
 
 <script>
-import ELeft1 from './charts/ELeft1'
-import ELeft2 from './charts/ELeft2'
+import ELeft1 from "./charts/ELeft1";
+import ELeft2 from "./charts/ELeft2";
+import ELeft3 from "./charts/ELeft3";
+import ERight1 from "./charts/ERight1";
+import ERight2 from "./charts/ERight2";
+import ERight3 from "./charts/ERight3";
+
 export default {
     name: "LvShanXiang",
     data() {
@@ -24,7 +88,11 @@ export default {
     },
     components: {
         ELeft1,
-        ELeft2
+        ELeft2,
+        ELeft3,
+        ERight1,
+        ERight2,
+        ERight3,
     },
     created() {},
     methods: {},
@@ -33,13 +101,66 @@ export default {
 
 <style lang="scss" scope>
 .LvShanXiang {
-    // background-color: #0bb;
+    background-color: #162661;
     border: 1px solid #73717e;
     box-sizing: border-box;
     height: 100%;
     display: grid;
     grid-template-columns: 4fr 7fr 4fr;
     grid-template-rows: 1.2fr repeat(2, 1fr);
+    .middle {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        > .header {
+            border: 1px solid #8877dd;
+            width: 80%;
+            height: 150px;
+            line-height: 80px;
+            font-size: 60px;
+            font-weight: 600;
+            color: #69f8fe;
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        > .section {
+            width: 92%;
+            .warp {
+                display: flex;
+                .item {
+                    border-radius: 20px;
+                    height: 90px;
+                    border: 4px solid #53bafd;
+                    box-sizing: border-box;
+                    flex: 1 0 20%;
+                    margin: 20px 60px;
+                    padding: 10px 10px 10px 40px;
+                    font-size: 35px;
+                    font-weight: 600;
+                    display: flex;
+                    align-items: center;
+                    .title {
+                        color: #fff;
+                    }
+                    .num {
+                        color: #53bafd;
+                        font-size: 1.2em;
+                    }
+                    .unit {
+                        color: #53bafd;
+                        font-size: 20px;
+                        margin-left: 15px;
+                    }
+                }
+            }
+        }
+        > .footer {
+            border: 1px solid #8877dd;
+            width: 92%;
+            flex-grow: 1;
+            margin: 80px 0;
+        }
+    }
 }
 .left1 {
     border: 1px solid #8877dd;
@@ -67,7 +188,8 @@ export default {
     border: 1px solid #7da359;
 }
 
-.left1,.right1{
+.left1,
+.right1 {
     margin-top: 8%;
 }
 </style>

src/views/LvShanXiang/charts/ELeft1.vue

@@ -24,23 +24,26 @@ export default {
                     left: "20%",
                     top: "5%",
                     textStyle: {
-                        fontSize: 30
-                    }
+                        fontSize: 30,
+                        color: "#fff",
+                    },
                 },
                 tooltip: {
                     trigger: "item",
                     formatter: "{b}: {c} ({d}%)",
                     textStyle: {
-                        fontSize: 20
-                    }
+                        fontSize: 25,
+                        color: "#fff",
+                    },
                 },
                 legend: {
                     orient: "horizontal",
                     bottom: 10,
                     data: ["种母羊", "种公羊", "商品羊", "羔羊"],
                     textStyle: {
-                        fontSize: 20
-                    }
+                        fontSize: 20,
+                        color: "#fff",
+                    },
                 },
                 series: [
                     {
@@ -48,20 +51,20 @@ export default {
                         // 内外圈厚度
                         radius: ["20%", "60%"],
                         label: {
-                            formatter: "{d}%"
+                            formatter: "{d}%",
                         },
                         data: [
                             { value: 300, name: "种母羊" },
                             { value: 300, name: "种公羊" },
                             { value: 200, name: "商品羊" },
-                            { value: 200, name: "羔羊" }
+                            { value: 200, name: "羔羊" },
                         ],
                         color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
                         label: {
-                            fontSize: 20
-                        }
-                    }
-                ]
+                            fontSize: 20,
+                        },
+                    },
+                ],
             };
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);

src/views/LvShanXiang/charts/ELeft2.vue

@@ -20,27 +20,30 @@ export default {
             // 指定图表的配置项和数据
             let option = {
                 title: {
-                    text: "羊存栏种类",
+                    text: "存栏羊等级",
                     left: "20%",
                     top: "5%",
                     textStyle: {
-                        fontSize: 30
-                    }
+                        fontSize: 30,
+                        color: "#fff",
+                    },
                 },
                 tooltip: {
                     trigger: "item",
                     formatter: "{b}: {c} ({d}%)",
                     textStyle: {
-                        fontSize: 20
-                    }
+                        fontSize: 20,
+                        color: "#fff",
+                    },
                 },
                 legend: {
                     orient: "horizontal",
                     bottom: 10,
-                    data: ["种母羊", "种公羊", "商品羊", "羔羊"],
+                    data: ["特级", "一级", "二级", "三级"],
                     textStyle: {
-                        fontSize: 20
-                    }
+                        fontSize: 20,
+                        color: "#fff",
+                    },
                 },
                 series: [
                     {
@@ -48,20 +51,20 @@ export default {
                         // 内外圈厚度
                         radius: ["20%", "60%"],
                         label: {
-                            formatter: "{d}%"
+                            formatter: "{d}%",
                         },
                         data: [
-                            { value: 300, name: "种母羊" },
-                            { value: 300, name: "种公羊" },
-                            { value: 200, name: "商品羊" },
-                            { value: 200, name: "羔羊" }
+                            { value: 168, name: "特级" },
+                            { value: 476, name: "一级" },
+                            { value: 688, name: "二级" },
+                            { value: 232, name: "三级" },
                         ],
-                        color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
+                        color: ["#BA43F5", "#FF3C43", "#F5944C", "#8CE8FA"],
                         label: {
-                            fontSize: 20
-                        }
-                    }
-                ]
+                            fontSize: 20,
+                        },
+                    },
+                ],
             };
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);

src/views/LvShanXiang/charts/ELeft3.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="container">
+        <div id="ELeft3" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft3",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ELeft3"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "种羊年龄分布",
+                    left: "20%",
+                    top: "5%",
+                    textStyle: {
+                        fontSize: 30,
+                        color: "#fff",
+                    },
+                },
+                color: ["#71D8F5", "#FAA4F6"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                legend: {
+                    data: ["公羊", "母羊"],
+                    top: "4%",
+                    right: 10,
+                    width: 40,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                    },
+                },
+                calculable: true,
+                xAxis: {
+                    name: "(年龄)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "category",
+                    data: ["一年", "两年", "三年", "四年", "五年"],
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                },
+
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "公羊",
+                        type: "bar",
+                        barWidth: "30%",
+                        data: [187, 186, 179, 142, 126],
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }],
+                        },
+                    },
+                    {
+                        name: "母羊",
+                        type: "bar",
+                        barWidth: "30%",
+                        data: [756, 869, 699, 759, 786],
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }],
+                        },
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/LvShanXiang/charts/ERight1.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="container">
+        <div id="ERight1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ERight1",
+    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("ERight1")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    text: "牧场销售情况",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 24,
+                        color: "#fff"
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    }
+                },
+                xAxis: {
+                    data: [
+                        "周一",
+                        "周二",
+                        "周三",
+                        "周四",
+                        "周五",
+                        "周六",
+                        "周日",
+                    ],
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#38375d",
+                            width: 2,
+                        },
+                    },
+                },
+                yAxis: {
+                    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: "pictorialBar",
+                        symbol: "rect",
+                        itemStyle: {
+                            color: "#0369df",
+                            barBorderRadius: 3,
+                        },
+                        label: {
+                            show: true, //开启显示
+                            position: "top", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                color: "#fff",
+                                fontSize: 20,
+                            },
+                            formatter: "{c}",
+                        },
+                        symbolRepeat: true,
+                        symbolSize: [57, 6],
+                        symbolMargin: 3,
+                        data: this.data,
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }],
+                        },
+                    },
+                    {
+                        type: "pictorialBar",
+                        symbol: "rect",
+                        itemStyle: {
+                            color: "#022a62",
+                            barBorderRadius: 3,
+                        },
+                        symbolRepeat: true,
+                        symbolSize: [57, 6],
+                        symbolMargin: 3,
+                        z: -10,
+                        data: [...this.data].fill(Math.max(...this.data)),
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/LvShanXiang/charts/ERight2.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="container">
+        <div id="ERight2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ERight2",
+    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("ERight2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "羊粪销售额",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 24,
+                    },
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 18,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+
+                            fontSize: 18,
+                        },
+                    },
+                    data: [
+                        "08-01",
+                        "08-02",
+                        "08-03",
+                        "08-04",
+                        "08-05",
+                        "08-06",
+                        "08-07",
+                    ],
+                },
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "(万元)",
+                        nameTextStyle: {
+                            fontSize: 18,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "solid",
+                                color: "#fff", //左边线的颜色
+                                width: "2", //坐标线的宽度
+                            },
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: "#fff",
+
+                                fontSize: 18,
+                            },
+                        },
+                    },
+                ],
+                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",
+                        },
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [33, 43.4, 46, 41, 42, 38, 46],
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/LvShanXiang/charts/ERight3.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="container">
+        <div id="ERight3" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ERight3",
+    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("ERight3")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "种羊销售数量",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 24,
+                    },
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                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: {
+                            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",
+                        },
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [2889, 2825, 3944, 3566, 2904, 3358, 3189],
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/Yield.vue

@@ -4,13 +4,83 @@
             <h1 class="title">湖羊全产业链数字化管理系统</h1>
         </header>
         <section>
-            <div class="left"></div>
-            <div class="center"></div>
-            <div class="right"></div>
+            <div class="left">
+                <div class="top">
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">存栏量：</span>
+                                <span class="num">10534</span>
+                                <span class="unit">只</span>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div>
+                                <span class="title">出栏量：</span>
+                                <span class="num">1534</span>
+                                <span class="unit">只</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">种羊价：</span>
+                                <span class="num">69.5</span>
+                                <span class="unit">元/kg</span>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div>
+                                <span class="title">当月出栏量：</span>
+                                <span class="num">56.5</span>
+                                <span class="unit">元/kg</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="warp">
+                        <div class="item">
+                            <div>
+                                <span class="title">产肉量：</span>
+                                <span class="num">7584</span>
+                                <span class="unit">kg</span>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div>
+                                <span class="title">当月出栏量：</span>
+                                <span class="num">8534</span>
+                                <span class="unit">万元</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom">
+                    <E-Left1 style="height: 100%; width: 50%"></E-Left1>
+                    <E-Left2 style="height: 100%; width: 50%"></E-Left2>
+                </div>
+            </div>
+            <div class="center">
+                <E-MiddleMap style="height: 100%;"></E-MiddleMap>
+            </div>
+            <div class="right">
+                <div class="warp">
+                    <div class="cell"></div>
+                    <div class="cell"></div>
+                </div>
+                <div class="warp">
+                    <div class="cell"></div>
+                    <div class="cell"></div>
+                </div>
+            </div>
         </section>
         <footer>
-            <div class="cell_one"></div>
-            <div class="cell_two"></div>
+            <div class="cell_one">
+                <E-Bottom1 style="height: 100%"></E-Bottom1>
+            </div>
+            <div class="cell_two">
+                <E-Bottom2 style="height: 100%"></E-Bottom2>
+            </div>
             <div class="cell_three"></div>
             <div class="cell_four"></div>
         </footer>
@@ -18,8 +88,14 @@
 </template>
 
 <script>
+import ELeft1 from './charts/ELeft1'
+import ELeft2 from './charts/ELeft2'
+import EBottom1 from './charts/EBottom1'
+import EBottom2 from './charts/EBottom2'
+import EMiddleMap from './charts/EMiddleMap'
 export default {
     name: "Yield",
+    components: {ELeft1, ELeft2, EBottom1, EBottom2, EMiddleMap},
     data() {
         return {};
     },
@@ -30,6 +106,7 @@ export default {
 
 <style lang="scss" scope>
 .Yield {
+    background-color: #162661;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -38,12 +115,12 @@ export default {
         height: 12.2%;
         display: flex;
         justify-content: center;
-        .title{
-            background-color: #0D1943;
+        .title {
+            border: 1px solid rgb(218, 99, 99);
             width: 46%;
             height: 100%;
             font-size: 50px;
-            color: #FFF;
+            color: #fff;
             display: flex;
             justify-content: center;
         }
@@ -52,38 +129,87 @@ export default {
         border: 1px solid rgb(62, 58, 128);
         height: 61%;
         display: flex;
-        .left{
-            flex-grow: 1;
+        >.left {
+            width: 32%;
             border: 1px solid rgb(218, 99, 99);
+            display: flex;
+            flex-direction: column;
+            .top {
+                margin: 40px 0 60px 0;
+                .warp {
+                    display: flex;
+                    .item {
+                        border-radius: 20px;
+                        height: 90px;
+                        border: 4px solid #53bafd;
+                        box-sizing: border-box;
+                        flex: 1 0 20%;
+                        margin: 20px 60px;
+                        padding: 10px 10px 10px 80px;
+                        font-size: 35px;
+                        font-weight: 600;
+                        display: flex;
+                        align-items: center;
+                        .title {
+                            color: #fff;
+                        }
+                        .num {
+                            color: #53bafd;
+                            font-size: 1.2em;
+                        }
+                        .unit {
+                            color: #53bafd;
+                            font-size: 20px;
+                            margin-left: 15px;
+                        }
+                    }
+                }
+            }
+            .bottom{
+                flex-grow: 1;
+                display: flex;
+            }
         }
-        .center{
-            flex-grow: 1;
+        >.center {
+            width: 36%;
             border: 1px solid rgb(163, 147, 58);
         }
-        .right{
-            flex-grow: 1;
+        >.right {
+            width: 32%;
             border: 1px solid rgb(23, 131, 116);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            >.warp{
+                height: 48%;
+                display: flex;
+                justify-content: space-between;
+                >.cell{
+                    border: 1px solid rgb(163, 58, 58);
+                    width: 48.5%;
+                }
+            }
         }
     }
     > footer {
         border: 1px solid rgb(32, 60, 138);
         flex-grow: 1;
         display: flex;
-        .cell_one{
+        .cell_one {
             border: 1px solid rgb(126, 95, 38);
-            flex-grow: 1;
+            width: 25%;
         }
-        .cell_two{
+        .cell_two {
             border: 1px solid rgb(61, 90, 38);
-            flex-grow: 1;
+            width: 25%;
         }
-        .cell_three{
+        .cell_three {
             border: 1px solid rgb(176, 86, 204);
-            flex-grow: 1;
+            width: 25%;
         }
-        .cell_four{
+        .cell_four {
             border: 1px solid rgb(218, 99, 99);
-            flex-grow: 1;
+            width: 25%;
         }
     }
 }

src/views/Yield/charts/E-GiveBirth.vue

@@ -1,88 +0,0 @@
-<template>
-    <div class="container">
-        <!-- EGiveBirth 出栏预测-->
-        <div id="EGiveBirth" style="height:400px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "EGiveBirth",
-    data() {
-        return {};
-    },
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("EGiveBirth")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "分娩产仔分布",
-                    left: "center",
-                    bottom: 0
-                },
-                color: ["#5bf0b2", "#FFB2FF", "#3ABAFF", "#FF6A01", "#ff8295"],
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        // 坐标轴指示器，坐标轴触发有效
-                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-                    }
-                },
-                grid: {
-                    left: "8%",
-                    right: "4%",
-                    bottom: "10%",
-                    containLabel: true
-                },
-                xAxis: [
-                    {
-                        type: "category",
-                        data: ["弱仔", "木乃伊", "死胎"],
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: "value"
-                    }
-                ],
-                series: [
-                    {
-                        name: "数量",
-                        type: "bar",
-                        barWidth: "30%",
-                        data: [100, 36, 33],
-                        itemStyle: {
-                            normal: {
-                                color: function(params) {
-                                    var colorList = [
-                                        "#5d8299",
-                                        "#575c18",
-                                        "#bbb"
-                                    ];
-                                    return colorList[params.dataIndex];
-                                }
-                            }
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/Yield/charts/EBottom1.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="container">
+        <div id="EBottom1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom1",
+    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("EBottom1")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "产羔率",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 24,
+                    },
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 18,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+
+                            fontSize: 18,
+                        },
+                    },
+                    data: [
+                        "08-01",
+                        "08-02",
+                        "08-03",
+                        "08-04",
+                        "08-05",
+                        "08-06",
+                        "08-07",
+                    ],
+                },
+                yAxis: [
+                    {
+                        type: "value",
+                        nameTextStyle: {
+                            fontSize: 18,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "solid",
+                                color: "#fff", //左边线的颜色
+                                width: "2", //坐标线的宽度
+                            },
+                        },
+                        axisLabel: {
+                            formatter: "{value} %",
+                            textStyle: {
+                                color: "#fff",
+                                fontSize: 18,
+                            },
+                        },
+                    },
+                ],
+                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",
+                        },
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [33, 43.4, 46, 41, 42, 38, 46],
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/EBottom2.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="container">
+        <div id="EBottom2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom2",
+    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("EBottom2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "屠宰率",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 24,
+                    },
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 18,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 18,
+                        },
+                    },
+                    data: [
+                        "08-01",
+                        "08-02",
+                        "08-03",
+                        "08-04",
+                        "08-05",
+                        "08-06",
+                        "08-07",
+                    ],
+                },
+                yAxis: [
+                    {
+                        type: "value",
+                        nameTextStyle: {
+                            fontSize: 18,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "solid",
+                                color: "#fff", //左边线的颜色
+                                width: "2", //坐标线的宽度
+                            },
+                        },
+                        axisLabel: {
+                            formatter: "{value} %",
+                            textStyle: {
+                                color: "#fff",
+
+                                fontSize: 18,
+                            },
+                        },
+                    },
+                ],
+                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",
+                        },
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [33, 43.4, 46, 41, 42, 38, 46],
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/ELeft1.vue

@@ -0,0 +1,107 @@
+<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 = {
+                title: {
+                    text: "价格走势",
+                    left: "20%",
+                    top: "5%",
+                    textStyle: {
+                        fontSize: 30,
+                        color: "#fff",
+                    },
+                },
+                color: ["#FF5A74"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "10%",
+                    y2: "5%",
+                    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",
+                        },
+                    },
+                },
+
+                yAxis: {
+                    name: "(元/kg)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff",
+                        },
+                    },
+                    scale: true,
+                    min(val) {
+                        return Number((val.min * 0.7).toFixed(0));
+                    },
+                },
+                series: [
+                    {
+                        name: "公羊",
+                        type: "line",
+                        barWidth: "30%",
+                        data: [72, 73, 72, 76, 74],
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }],
+                        },
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/ELeft2.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="container">
+        <div id="ELeft2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft2",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ELeft2"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "存栏走势",
+                    left: "20%",
+                    top: "5%",
+                    textStyle: {
+                        fontSize: 30,
+                        color: "#fff",
+                    },
+                },
+                color: ["#8CAEFA"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "10%",
+                    y2: "5%",
+                    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"
+                        },
+                    },
+                },
+
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                    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: "平均值" }],
+                        },
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/EMiddleMap.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="container">
+        <div id="EMiddleMap" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EMiddleMap",
+    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("EMiddleMap")
+            );
+            // 指定图表的配置项和数据
+            // let option = 
+            // {
+            //     tooltip: {},
+            //     visualMap: {
+            //         min: 200,
+            //         max: 1500,
+            //         left: "left",
+            //         top: "bottom",
+            //         text: ["High", "Low"],
+            //         seriesIndex: [1],
+            //         inRange: {
+            //             color: [
+            //                 "#45DE92",
+            //                 "#E0C740",
+            //                 "#46DF3C",
+            //                 "#4038E0",
+            //                 "#4038E0",
+            //             ],
+            //         },
+            //         calculable: true,
+            //     },
+            //     geo: {
+            //         map: "湖州市",
+            //         type: "map3D",
+            //         roam: true,
+            //         label: {
+            //             normal: {
+            //                 show: true,
+            //                 textStyle: {
+            //                     color: "#FF5A74",
+            //                     fontSize: 25,
+            //                 },
+            //             },
+            //         },
+            //         itemStyle: {
+            //             normal: {
+            //                 borderColor: "rgba(0, 0, 0, 0.2)",
+            //             },
+            //             emphasis: {
+            //                 areaColor: null,
+            //                 shadowOffsetX: 0,
+            //                 shadowOffsetY: 0,
+            //                 shadowBlur: 20,
+            //                 borderWidth: 0,
+            //                 shadowColor: "rgba(0, 0, 0, 0.5)",
+            //             },
+            //         },
+            //     },
+            //     series: [
+            //         {
+            //             type: "scatter",
+            //             coordinateSystem: "geo",
+            //             symbolSize: 20,
+            //             symbol: "none",
+            //             symbolRotate: 35,
+            //             label: {
+            //                 normal: {
+            //                     formatter: "{b}",
+            //                     position: "right",
+            //                     show: false,
+            //                 },
+            //                 emphasis: {
+            //                     show: true,
+            //                 },
+            //             },
+            //             itemStyle: {
+            //                 normal: {
+            //                     color: "#F06C00",
+            //                 },
+            //             },
+            //         },
+            //         {
+            //             name: "categoryA",
+            //             type: "map",
+            //             geoIndex: 0,
+            //             // tooltip: {show: false},
+            //             data: [
+            //                 // { name: "长兴县", value: "0" },
+            //                 // { name: "安吉县", value: "111" },
+            //                 // { name: "上海", value: "222" },
+            //             ],
+            //         },
+            //     ],
+            // };
+            let option = {
+                tooltip: {
+                    // formatter: function (params) {
+                    //     var content = "",
+                    //         content =
+                    //             params.name +
+                    //             "<br>" +
+                    //             params.value[0] +
+                    //             params.value[1];
+                    //     return content;
+                    // },
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                backgroundColor: "#040f3c",
+                visualMap: {
+                    show: false,
+                    min: 0,
+                    max: 600,
+                    inRange: {
+                        color: ["#e0ffff", "#006edd"],
+                    },
+                    calculable: true,
+                },
+                series: [
+                    {
+                        name: "浙江",
+                        type: "map3D",
+                        map: "浙江",
+                        data: [{ name: "杭州市", value: [222, "GDP"] }],
+                        regionHeight: 2,
+                        top: "10%",
+                        label: {
+                            show: true,
+                            formatter: function (params) {
+                                var content = "",
+                                    content = params.name;
+                                return content;
+                            },
+                            textStyle: {
+                                color: "#FF5A74",
+                                fontWeight: "normal",
+                                fontSize: 25,
+                                backgroundColor: "rgba(0, 0, 0, 0)",
+                            },
+                            emphasis: {
+                                //鼠标悬浮效果
+                                show: true,
+                                textStyle: { color: "#f00" },
+                            },
+                        },
+                        itemStyle: {
+                            normal: { borWidth: 0.4 },
+                            emphasis: { color: "rgb(0,255,255)" }, //地图板块颜色
+                        },
+                        viewControl: {
+                            autoRotate: false, // 自动旋转
+                            distance: 130,
+                        },
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>