引入echarts依赖

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",
+    "echarts": "^5.4.0",
     "js-base64": "^3.7.5",
     "less": "^4.2.0",
     "less-loader": "^7.3.0",

src/assets/styles/vpp.css

@@ -61,4 +61,5 @@
   font-size: 18px;
   font-style: italic;
   font-weight: bold;
+  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
 }

src/components/echart/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    options: {
+      type: Object,
+      default: ()=>({})
+    }
+  },
+  data () {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler (options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.initChart();
+  },
+  beforeDestroy () {
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      // 初始化echart
+      this.chart = echarts.init(this.$el)
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/main.js

@@ -2,10 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import Echart from './components/echart/index.vue'
 
+import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/styles/vpp.css' // public css
 
+// 自定义组件
+Vue.component("Echart", Echart)
+// element组件
 Vue.use(ElementUI)
 Vue.config.productionTip = false
 

src/router/index.js

@@ -8,7 +8,7 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/dailyPlanning',
+    path: '/xndc',
     component: () => import('@/views/xndc/index'),
     hidden: true
   },

src/views/xndc/index.vue

@@ -10,7 +10,7 @@
             信息总览
           </div>
         </div>
-        <div class="barBox">
+        <div class="barBox1">
           <div class="barTitle">
             告警信息
           </div>
@@ -61,9 +61,16 @@
 
 <script>
 export default {
-  name: "dailyPlanning"
 }
 </script>
 
 <style scoped>
+.barBox1 {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: url(../../assets/images/bg/bgBar1.png) -2px -1px no-repeat;
+  margin-right: 1%;
+}
 </style>