.

src/views/Butcher/Butcher.vue

@@ -74,7 +74,7 @@
                             </div>
                         </div>
                     </article>
-                    <article class="lower" v-if="true">
+                    <article class="lower" v-if="false">
                         <main class="inputWrap">
                             <input
                                 type="text"
@@ -88,43 +88,12 @@
                                 <h3>{{ item.title }}</h3>
                                 <div class="row" v-for="(item1, index1) in item.list" :key="index1">{{ item1 }}</div>
                             </div>
-                            <!-- <div class="item_1">
-                                <h3>入库</h3>
-                                <div class="row">入库时间：10:15:11</div>
-                            </div>
-                            <div class="item_2">
-                                <h3>运输</h3>
-                                <div class="row">运输单号：586874578</div>
-                                <div class="row">目的地：浙江金华超市</div>
-                            </div>
-                            <div class="item_3">
-                                <h3>收购</h3>
-                                <div class="row">来源：吕山牧场</div>
-                                <div class="row">收购重量：浙江金华超市</div>
-                                <div class="row">收购时间：8月28日</div>
-                            </div>
-                            <div class="item_4">
-                                <h3>屠宰</h3>
-                                <div class="row">屠宰时间：9月2日</div>
-                            </div>
-                            <div class="item_5">
-                                <h3>分割</h3>
-                                <div class="row">分割批次：12451</div>
-                            </div>
-                            <div class="item_6">
-                                <h3>检疫</h3>
-                                <div class="row">检疫结果：合格</div>
-                                <div class="row">检疫时间：8月30日</div>
-                            </div> -->
                             <span v-for="(item, index) in retrospectInfo" :key="item.title" :class="'time_'+(index+1)">{{ item.time }}</span>
-                            <!-- <span class="time_1">9月3日</span>
-                            <span class="time_2">9月3日</span>
-                            <span class="time_3">8月30日</span>
-                            <span class="time_4">9月3日</span>
-                            <span class="time_5">9月4日</span>
-                            <span class="time_6">8月28日</span> -->
                         </div>
                     </article>
+                    <article class="mapContainer" v-if="true">
+                        <E-Map style="height: 100%"></E-Map>
+                    </article>
                 </div>
                 <div class="bottom">
                     <article>
@@ -183,6 +152,7 @@ import ERight1 from "./charts/ERight1";
 import EBottom1 from "./charts/EBottom1";
 import EBottom2 from "./charts/EBottom2";
 import EBottom3 from "./charts/EBottom3";
+import EMap from "./charts/EMap";
 
 export default {
     name: "Butcher",
@@ -194,6 +164,7 @@ export default {
         EBottom1,
         EBottom2,
         EBottom3,
+        EMap
     },
     data() {
         return {
@@ -612,6 +583,9 @@ export default {
                         }
                     }
                 }
+                .mapContainer {
+                    flex-grow: 1;
+                }
             }
             > .bottom {
                 height: 28%;

src/views/Butcher/charts/EMap.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="container">
+        <div id="EMap" style="height: 100%"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EMap",
+    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("EMap"));
+
+            var color = ["#46bee9"];
+            var series = [];
+            var res = [];
+            var lineData = [
+                {
+                    val: 32,
+                    blat: 31.027129,
+                    blon: 119.751063,
+                    elat: 30.165696,
+                    elon: 103.871896,
+                    bcitysim: "湖州市",
+                    ecitysim: "成都市",
+                },
+                {
+                    val: 32,
+                    blat: 31.027129,
+                    blon: 119.751063,
+                    elat: 23.384484,
+                    elon: 113.088942,
+                    bcitysim: "湖州市",
+                    ecitysim: "广州市",
+                },
+                {
+                    val: 32,
+                    blat: 31.027129,
+                    blon: 119.751063,
+                    elat: 40.030195,
+                    elon: 116.529236,
+                    bcitysim: "湖州市",
+                    ecitysim: "北京市",
+                },
+                {
+                    val: 32,
+                    blat: 31.027129,
+                    blon: 119.751063,
+                    elat: 31.027129,
+                    elon: 119.751063,
+                    bcitysim: "湖州市",
+                    ecitysim: "长沙市",
+                },
+                {
+                    val: 32,
+                    blat: 31.027129,
+                    blon: 119.751063,
+                    elat: 34.292662,
+                    elon: 109.243907,
+                    bcitysim: "湖州市",
+                    ecitysim: "东莞市",
+                },
+            ];
+            for (var i = 0; i < lineData.length; i++) {
+                res.push({
+                    fromName: lineData[i].bcitysim,
+                    toName: lineData[i].ecitysim,
+                    coords: [
+                        [lineData[i].blon, lineData[i].blat],
+                        [lineData[i].elon, lineData[i].elat],
+                    ],
+                    count: lineData[i].val,
+                });
+            }
+            var planePath =
+                "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
+            series.push(
+                {
+                    name: "",
+                    type: "lines",
+                    zlevel: 1,
+                    effect: {
+                        show: true,
+                        constantSpeed: 20,
+                        symbol: planePath,
+                        symbolSize: 40,
+                        trailLength: 0,
+                    },
+                    tooltip: {
+                        formatter: function (param) {
+                            return (
+                                param.data.fromName +
+                                ">" +
+                                param.data.toName +
+                                "<br>趟次：" +
+                                param.data.count
+                            );
+                        },
+                    },
+                    lineStyle: {
+                        normal: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                0,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: "#58B3CC",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#F58158",
+                                    },
+                                ],
+                                false
+                            ),
+                            width: 2,
+                            opacity: 0.5,
+                            curveness: 0.1,
+                        },
+                    },
+                    data: res,
+                },
+                {
+                    type: "map",
+                    mapType: "china",
+                    top: "0%",
+                    zoom: 1.5,
+                    tooltip: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        areaColor: "#00196d",
+                        borderColor: "#0a53e9",
+                    },
+                    emphasis: {
+                        label: {
+                            show: false,
+                        },
+                        itemStyle: {
+                            areaColor: "#00196d",
+                            borderColor: "#0a53e9",
+                        },
+                    },
+                }
+            );
+            let option = {
+                // backgroundColor: "#010347",
+                // grid: {
+                //     x: "-23%",
+                //     y: "-25%",
+                //     x2: "-25%",
+                //     y2: "-5%",
+                //     containLabel: true,
+                // },
+                legend: {
+                    show: true,
+                    selected: {},
+                    x: "left",
+                    orient: "vertical",
+                    textStyle: {
+                        color: "white",
+                    },
+                    data: [],
+                },
+                tooltip: {
+                    trigger: "item",
+                    show: true,
+                },
+                geo: {
+                    map: "china",
+                    label: {
+                        show: false,
+                    },
+                    top: "0%",
+                    zoom: 1.5,
+                    roam: false,
+                    itemStyle: {
+                        areaColor: "#00196d",
+                        borderColor: "#1773c3",
+                        shadowColor: "#1773c3",
+                        shadowBlur: 20,
+                    },
+                },
+                series: series,
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>