两个大屏初步完成

src/assets/css/reset.scss

@@ -4,8 +4,8 @@ a{text-decoration: none;}
 li{list-style:none;} 
 /*css初始化完成*/
 html,body,#app{
-    // width: 100%;
-    // height: 100%;
+    width: 100%;
+    height: 100%;
     width: 4670px;
     height: 1751px;
 }

src/main.js

@@ -6,9 +6,8 @@ import './assets/css/reset.scss'
 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 './assets/js/changxing'
 import 'echarts-gl'
 
 Vue.prototype.$echarts = echarts

src/views/LvShanXiang/LvShanXiang.vue

@@ -101,7 +101,9 @@ export default {
 
 <style lang="scss" scope>
 .LvShanXiang {
-    background-color: #162661;
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     border: 1px solid #73717e;
     box-sizing: border-box;
     height: 100%;

src/views/Yield/Yield.vue

@@ -32,7 +32,7 @@
                         </div>
                         <div class="item">
                             <div>
-                                <span class="title">当月出栏量：</span>
+                                <span class="title">肉羊价：</span>
                                 <span class="num">56.5</span>
                                 <span class="unit">元/kg</span>
                             </div>
@@ -48,7 +48,7 @@
                         </div>
                         <div class="item">
                             <div>
-                                <span class="title">当月出栏量：</span>
+                                <span class="title">产值：</span>
                                 <span class="num">8534</span>
                                 <span class="unit">万元</span>
                             </div>
@@ -65,12 +65,20 @@
             </div>
             <div class="right">
                 <div class="warp">
-                    <div class="cell"></div>
-                    <div class="cell"></div>
+                    <div class="cell cell1">
+                        <img src="../../assets/u871.jpg" width="80%" height="80%" />
+                    </div>
+                    <div class="cell cell2">
+                        <img src="../../assets/u871.jpg" width="80%" height="80%" />
+                    </div>
                 </div>
                 <div class="warp">
-                    <div class="cell"></div>
-                    <div class="cell"></div>
+                    <div class="cell">
+                        <E-Right1 style="height: 100%"></E-Right1>
+                    </div>
+                    <div class="cell">
+                        <E-Right2 style="height: 100%"></E-Right2>
+                    </div>
                 </div>
             </div>
         </section>
@@ -81,21 +89,39 @@
             <div class="cell_two">
                 <E-Bottom2 style="height: 100%"></E-Bottom2>
             </div>
-            <div class="cell_three"></div>
-            <div class="cell_four"></div>
+            <div class="cell_three">
+                <E-Bottom3 style="height: 100%"></E-Bottom3>
+            </div>
+            <div class="cell_four">
+                <E-Bottom4 style="height: 100%"></E-Bottom4>
+            </div>
         </footer>
     </div>
 </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'
+import ELeft1 from "./charts/ELeft1";
+import ELeft2 from "./charts/ELeft2";
+import ERight1 from "./charts/ERight1";
+import ERight2 from "./charts/ERight2";
+import EBottom1 from "./charts/EBottom1";
+import EBottom2 from "./charts/EBottom2";
+import EBottom3 from "./charts/EBottom3";
+import EBottom4 from "./charts/EBottom4";
+import EMiddleMap from "./charts/EMiddleMap";
 export default {
     name: "Yield",
-    components: {ELeft1, ELeft2, EBottom1, EBottom2, EMiddleMap},
+    components: {
+        ELeft1,
+        ELeft2,
+        ERight1,
+        ERight2,
+        EBottom1,
+        EBottom2,
+        EMiddleMap,
+        EBottom3,
+        EBottom4
+    },
     data() {
         return {};
     },
@@ -106,7 +132,9 @@ export default {
 
 <style lang="scss" scope>
 .Yield {
-    background-color: #162661;
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -129,7 +157,7 @@ export default {
         border: 1px solid rgb(62, 58, 128);
         height: 61%;
         display: flex;
-        >.left {
+        > .left {
             width: 32%;
             border: 1px solid rgb(218, 99, 99);
             display: flex;
@@ -165,28 +193,36 @@ export default {
                     }
                 }
             }
-            .bottom{
+            .bottom {
                 flex-grow: 1;
                 display: flex;
             }
         }
-        >.center {
+        > .center {
             width: 36%;
             border: 1px solid rgb(163, 147, 58);
         }
-        >.right {
+        > .right {
             width: 32%;
             border: 1px solid rgb(23, 131, 116);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            >.warp{
+            > .warp {
                 height: 48%;
                 display: flex;
                 justify-content: space-between;
-                >.cell{
-                    border: 1px solid rgb(163, 58, 58);
+                > .cell {
                     width: 48.5%;
+                    background-image: url(../../assets/download.png);
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                }
+                > .cell1,
+                .cell2 {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                 }
             }
         }

src/views/Yield/charts/EBottom1.vue

@@ -30,7 +30,7 @@ export default {
                     text: "产羔率",
                     textStyle: {
                         color: "#fff",
-                        fontSize: 24,
+                        fontSize: 30,
                     },
                 },
                 tooltip: {
@@ -57,7 +57,7 @@ export default {
                     boundaryGap: false,
                     name: "(时间)",
                     nameTextStyle: {
-                        fontSize: 18,
+                        fontSize: 20,
                     },
                     axisLine: {
                         show: true,
@@ -70,8 +70,7 @@ export default {
                     axisLabel: {
                         textStyle: {
                             color: "#fff",
-
-                            fontSize: 18,
+                            fontSize: 20,
                         },
                     },
                     data: [
@@ -88,7 +87,7 @@ export default {
                     {
                         type: "value",
                         nameTextStyle: {
-                            fontSize: 18,
+                            fontSize: 20,
                         },
                         axisLine: {
                             show: true,
@@ -102,7 +101,7 @@ export default {
                             formatter: "{value} %",
                             textStyle: {
                                 color: "#fff",
-                                fontSize: 18,
+                                fontSize: 20,
                             },
                         },
                     },

src/views/Yield/charts/EBottom2.vue

@@ -30,7 +30,7 @@ export default {
                     text: "屠宰率",
                     textStyle: {
                         color: "#fff",
-                        fontSize: 24,
+                        fontSize: 30,
                     },
                 },
                 tooltip: {
@@ -57,7 +57,7 @@ export default {
                     boundaryGap: false,
                     name: "(时间)",
                     nameTextStyle: {
-                        fontSize: 18,
+                        fontSize: 20,
                     },
                     axisLine: {
                         show: true,
@@ -70,7 +70,7 @@ export default {
                     axisLabel: {
                         textStyle: {
                             color: "#fff",
-                            fontSize: 18,
+                            fontSize: 20,
                         },
                     },
                     data: [
@@ -87,7 +87,7 @@ export default {
                     {
                         type: "value",
                         nameTextStyle: {
-                            fontSize: 18,
+                            fontSize: 20,
                         },
                         axisLine: {
                             show: true,
@@ -101,8 +101,7 @@ export default {
                             formatter: "{value} %",
                             textStyle: {
                                 color: "#fff",
-
-                                fontSize: 18,
+                                fontSize: 20,
                             },
                         },
                     },

src/views/Yield/charts/EBottom3.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="container">
+        <div id="EBottom3" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom3",
+    data() {
+        return {
+            data: [220, 182, 191, 234, 290],
+            time: ["四月", "五月", "六月", "七月", "九月"]
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom3")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "种母羊数",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 30,
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "22%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    data: this.time,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        type: "bar",
+                        barWidth: 37,
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 1,
+                                borderColor: "#18CEE2",
+                                barBorderRadius: 28,
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    1,
+                                    0,
+                                    [
+                                        { offset: 0, color: "#2dc3db" },
+                                        { offset: 1, color: "#0f88c0" },
+                                    ]
+                                ),
+                            },
+                            emphasis: {
+                                barBorderRadius: 13,
+                                shadowBlur: 18,
+                                shadowColor: "rgba(218,170, 58, 0.7)",
+                            },
+                        },
+                        data: this.data,
+                    },
+                    {
+                        name: "a",
+                        tooltip: {
+                            show: false,
+                        },
+                        type: "pictorialBar",
+                        itemStyle: {
+                            normal: {
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    1,
+                                    0,
+                                    [
+                                        { offset: 0, color: "#2bc6dd" },
+                                        { offset: 1, color: "#18cde1" },
+                                    ]
+                                ),
+                                borderWidth: 1,
+                                borderColor: "#18CEE2",
+                            },
+                        },
+                        symbol: "circle",
+                        symbolSize: ["38", "22"],
+                        symbolPosition: "end",
+                        data: this.data,
+                        z: 3,
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/EBottom4.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="container">
+        <div id="EBottom4" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom4",
+    data() {
+        return {
+            data: [220, 182, 191, 234, 290],
+            time: ["四月", "五月", "六月", "七月", "九月"]
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom4")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "种羊销售数",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 30,
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "22%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    data: this.time,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        type: "bar",
+                        barWidth: 37,
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 1,
+                                borderColor: "#18CEE2",
+                                barBorderRadius: 28,
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    1,
+                                    0,
+                                    [
+                                        { offset: 0, color: "#2dc3db" },
+                                        { offset: 1, color: "#0f88c0" },
+                                    ]
+                                ),
+                            },
+                            emphasis: {
+                                barBorderRadius: 13,
+                                shadowBlur: 18,
+                                shadowColor: "rgba(218,170, 58, 0.7)",
+                            },
+                        },
+                        data: this.data,
+                    },
+                    {
+                        name: "a",
+                        tooltip: {
+                            show: false,
+                        },
+                        type: "pictorialBar",
+                        itemStyle: {
+                            normal: {
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    1,
+                                    0,
+                                    [
+                                        { offset: 0, color: "#2bc6dd" },
+                                        { offset: 1, color: "#18cde1" },
+                                    ]
+                                ),
+                                borderWidth: 1,
+                                borderColor: "#18CEE2",
+                            },
+                        },
+                        symbol: "circle",
+                        symbolSize: ["38", "22"],
+                        symbolPosition: "end",
+                        data: this.data,
+                        z: 3,
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/EMiddleMap.vue

@@ -22,7 +22,7 @@ export default {
                 document.getElementById("EMiddleMap")
             );
             // 指定图表的配置项和数据
-            // let option = 
+            // let option =
             // {
             //     tooltip: {},
             //     visualMap: {
@@ -94,7 +94,7 @@ export default {
             //             },
             //         },
             //         {
-            //             name: "categoryA",
+            //             name: "categoryA",·
             //             type: "map",
             //             geoIndex: 0,
             //             // tooltip: {show: false},
@@ -108,21 +108,22 @@ export default {
             // };
             let option = {
                 tooltip: {
-                    // formatter: function (params) {
-                    //     var content = "",
-                    //         content =
-                    //             params.name +
-                    //             "<br>" +
-                    //             params.value[0] +
-                    //             params.value[1];
-                    //     return content;
-                    // },
+                    formatter: function (params) {
+                        if (params.value) {
+                            return (
+                                params.name +
+                                "<br>" +
+                                params.value[0] +
+                                params.value[1]
+                            );
+                        }
+                    },
+
                     textStyle: {
                         fontSize: 25,
                         color: "#fff",
                     },
                 },
-                backgroundColor: "#040f3c",
                 visualMap: {
                     show: false,
                     min: 0,
@@ -132,14 +133,49 @@ export default {
                     },
                     calculable: true,
                 },
+                // geo3D: {
+                //     itemStyle: {
+                //         borderColor: "#333",
+                //         borderWidth:2
+                //     }
+                // },
                 series: [
                     {
-                        name: "浙江",
+                        name: "湖州市",
                         type: "map3D",
-                        map: "浙江",
-                        data: [{ name: "杭州市", value: [222, "GDP"] }],
-                        regionHeight: 2,
-                        top: "10%",
+                        map: "湖州市",
+                        data: [{ name: "长兴县", value: ["数量：", 422290] }],
+                        regionHeight: 4,
+                        boxWidth: 120,
+                        // top: "10%",
+                        // bottom: "10%",
+                        boxDepth: 100,
+                        regionHeight: 5,
+                        // environment: new this.$echarts.graphic.LinearGradient(
+                        //     0,
+                        //     0,
+                        //     0,
+                        //     1,
+                        //     [
+                        //         {
+                        //             offset: 0,
+                        //             color: "#547EE0",
+                        //         },
+                        //         {
+                        //             offset: 0.5,
+                        //             color: "#57AEE0",
+                        //         },
+                        //         {
+                        //             offset: 0.7,
+                        //             color: "#162661",
+                        //         },
+                        //         {
+                        //             offset: 1,
+                        //             color: "#162661",
+                        //         },
+                        //     ],
+                        //     false
+                        // ),
                         label: {
                             show: true,
                             formatter: function (params) {
@@ -148,7 +184,7 @@ export default {
                                 return content;
                             },
                             textStyle: {
-                                color: "#FF5A74",
+                                color: "#FFFFFF",
                                 fontWeight: "normal",
                                 fontSize: 25,
                                 backgroundColor: "rgba(0, 0, 0, 0)",
@@ -160,12 +196,28 @@ export default {
                             },
                         },
                         itemStyle: {
-                            normal: { borWidth: 0.4 },
-                            emphasis: { color: "rgb(0,255,255)" }, //地图板块颜色
+                            // normal: { borWidth: 15 },
+                            emphasis: {
+                                color: "#F5D747",
+                                color: "#54FAF0",
+                                // borderType: "solid",
+                                // borderColor: "#f00",
+                                // borderWidth: 10,
+                                areaColor: '#f00',
+                            shadowOffsetX: 50,
+                            shadowOffsetY: 0,
+            //                 shadowBlur: 20,
+            //                 borderWidth: 0,
+            //                 shadowColor: "rgba(0, 0, 0, 0.5)",
+                            }, //地图板块鼠标悬浮颜色
+                            color: "#04438C",
+                            opacity: 1,
+                            borderWidth: 5,
+                            borderColor: "#0393C0",
                         },
                         viewControl: {
                             autoRotate: false, // 自动旋转
-                            distance: 130,
+                            distance: 115,
                         },
                     },
                 ],

src/views/Yield/charts/ERight1.vue

@@ -0,0 +1,115 @@
+<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 = {
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "种羊等级分布",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 30,
+                    },
+                },
+                color: ["#EFBB1A", "#D77169", "#C14F60", "#953F61"],
+                tooltip: {
+                    trigger: "item",
+                    // formatter: "{b} : {c}",
+                    formatter(val) {
+                        return `${val.data.name}：${val.data.val}`
+                    },
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "22%",
+                    x2: "10%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                legend: {
+                    data: ["甲", "乙", "丙", "丁"],
+                    bottom: 10,
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+
+                series: [
+                    {
+                        // name: "漏斗图",
+                        type: "funnel",
+                        left: "10%",
+                        top: 90,
+                        //x2: 80,
+                        bottom: 60,
+                        width: "80%",
+                        // height: {totalHeight} - y - y2,
+                        min: 0,
+                        max: 100,
+                        minSize: "0%",
+                        maxSize: "100%",
+                        sort: "descending",
+                        gap: 2,
+                        label: {
+                            show: true,
+                            position: "inside",
+                            fontSize: 20,
+                        },
+                        labelLine: {
+                            length: 10,
+                            lineStyle: {
+                                width: 1,
+                                type: "solid",
+                            },
+                        },
+                        itemStyle: {
+                            borderColor: "#fff",
+                            borderWidth: 1,
+                        },
+                        emphasis: {
+                            label: {
+                                fontSize: 25,
+                            },
+                        },
+                        data: [
+                            { value: 20, name: "甲", val: 365 },
+                            { value: 40, name: "乙", val: 789 },
+                            { value: 60, name: "丙", val: 1024 },
+                            { value: 80, name: "丁", val: 1458 },
+                        ],
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/charts/ERight2.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="container">
+        <div id="ERight2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ERight2",
+    data() {
+        return {
+            data: [220, 182, 191, 234, 290],
+            time: ["四月", "五月", "六月", "七月", "九月"]
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("ERight2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    left: "4%",
+                    top: "4%",
+                    text: "无害化处理数",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 30,
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "22%",
+                    x2: "10%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    data: this.time,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        type: "bar",
+                        barWidth: 37,
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 1,
+                                borderColor: "#18CEE2",
+                                barBorderRadius: 28,
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    1,
+                                    0,
+                                    [
+                                        { offset: 0, color: "#2dc3db" },
+                                        { offset: 1, color: "#0f88c0" },
+                                    ]
+                                ),
+                            },
+                            emphasis: {
+                                barBorderRadius: 13,
+                                shadowBlur: 18,
+                                shadowColor: "rgba(218,170, 58, 0.7)",
+                            },
+                        },
+                        data: this.data,
+                    },
+                    {
+                        name: "a",
+                        tooltip: {
+                            show: false,
+                        },
+                        type: "pictorialBar",
+                        itemStyle: {
+                            normal: {
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    1,
+                                    0,
+                                    [
+                                        { offset: 0, color: "#2bc6dd" },
+                                        { offset: 1, color: "#18cde1" },
+                                    ]
+                                ),
+                                borderWidth: 1,
+                                borderColor: "#18CEE2",
+                            },
+                        },
+                        symbol: "circle",
+                        symbolSize: ["38", "22"],
+                        symbolPosition: "end",
+                        data: this.data,
+                        z: 3,
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>