个体追踪的图标组件完成80%

package.json

@@ -10,8 +10,10 @@
   "dependencies": {
     "cnpm": "^6.1.1",
     "core-js": "^3.3.2",
+    "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "vue": "^2.6.10",
+    "vue-echarts": "^5.0.0-beta.0",
     "vue-module-loader": "^1.0.3",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"

src/main.js

@@ -9,6 +9,23 @@ import store from './store'
 import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
 
+// import echarts from "echarts";
+// Vue.prototype.$echarts = echarts;
+
+/* 按需导入 */
+import echarts from 'echarts/lib/echarts'
+ // 引入折线图/柱状图等组件
+import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/toolbox'
+import 'echarts/lib/component/markPoint' // 最值
+import 'echarts/lib/component/markLine' // 平均值
+import 'echarts/lib/component/legendScroll'
+
+Vue.prototype.$echarts = echarts
+
+
 
 Vue.use(vueModuleLoader, { store }).use(ElementUI);
 /* 

src/router/routes.js

@@ -1,9 +1,10 @@
 import Home from '../views/Home/Home.vue'
 /* 个体管理 UnityTrace */
-import UnityTrace from '../views/unityManagement/UnityTrace.vue'
+// import UnityTrace from '../views/unityManagement/UnityTrace.vue'
 
 /* 群体管理 */
 import GroupRecord from '../views/groupManagment/GroupRecord.vue'
+import UnityTrace from '../views/groupManagment/UnityTrace/UnityTrace.vue'
 
 /* 模板 */
 import Aa from '../views/template/Aa.vue'

src/views/groupManagment/GroupRecord.vue

@@ -33,6 +33,7 @@
                     <el-table-column prop="address" label="地址"></el-table-column>
                     <el-table-column label="操作" width="150">
                         <template slot-scope="scope">
+                            <el-button @click="look(scope.row)" type="text" size="small">查看</el-button>
                             <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                             <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                                 <el-button slot="reference" type="text" size="small">删除</el-button>
@@ -86,6 +87,11 @@ export default {
     },
     created() {},
     methods: {
+        look(row) {
+            this.$router.push({
+                path: 'UnityTrace'
+            })
+        },
         edit(row) {},
         del(row) {},
         pageChange(p) {

src/views/groupManagment/UnityTrace/UnityTrace.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="UnityTrace">
+        <h1>个体追踪</h1>
+        <!-- <chart></chart> -->
+        <hr />
+
+        <chart-a></chart-a>
+        <hr />
+        <chart-a></chart-a>
+        <hr />
+        <chart-a></chart-a>
+    </div>
+</template>
+
+<script>
+import chart from "./charts/chart";
+import chart_a from "./charts/chart1";
+
+export default {
+    name: "UnityTrace",
+    components: {
+        // chart,
+        "chart-a": chart_a
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    mounted() {
+        console.log(document.getElementById("chart_1"))
+    }
+    
+};
+</script>

src/views/groupManagment/UnityTrace/charts/chart.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="hello">
+        <chart ref="chart1" :options="orgOptions" :auto-resize="true" class="chart"></chart>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "HelloWorld",
+    data() {
+        return {
+            orgOptions: {}
+        };
+    },
+    mounted() {
+        this.orgOptions = {
+            xAxis: {
+                type: "category",
+                data: ["七分钟前", "六分钟前", "五分钟前", "四分钟前", "三分钟前", "两分钟前", "单前"]
+            },
+            yAxis: {
+                type: "value",
+                axisLabel: {
+                    formatter: "{value} °C"
+                },
+                scale: true
+            },
+            series: [
+                {
+                    data: [32.5,32.6,32.4,32.5,32.4,32.6,32.4],
+                    type: "line"
+                }
+            ]
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.hello{
+    .chart{
+        width: 100%;
+    }
+}
+</style>

src/views/groupManagment/UnityTrace/charts/chart1.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="hello">
+        <div id="chart_1" style="width: 100%;height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "HelloWorld",
+    data() {
+        return {
+            orgOptions: {}
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("chart_1")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "耳根温度  36.4℃",
+                    subtext: "纯属虚构",
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: false },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "red" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "blue" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: [
+                        "七分钟前",
+                        "六分钟前",
+                        "五分钟前",
+                        "四分钟前",
+                        "三分钟前",
+                        "两分钟前",
+                        "当前"
+                    ]
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} °C"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "耳温",
+                        type: "line",
+                        data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.hello {
+    .chart {
+        width: 100%;
+    }
+}
+</style>