添加Echarts

@@ -38,6 +38,7 @@
   "dependencies": {
     "axios": "0.21.1",
     "core-js": "3.8.3",
+    "echarts": "^5.4.3",
     "element-ui": "2.15.3",
     "sortablejs": "^1.15.0",
     "vue": "2.6.14",

+// echarts按需引入
+// 引入 echarts API
+import * as echarts from "echarts/core";
+// 引入echarts图表类型
+import { BarChart } from "echarts/charts";
+// 引入echarts图表配置项
+import {
+  GridComponent,
+  PolarComponent,
+  GeoComponent,
+  SingleAxisComponent,
+  ParallelComponent,
+  CalendarComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  AxisPointerComponent,
+  BrushComponent,
+  TitleComponent,
+  TimelineComponent,
+  MarkPointComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  LegendComponent,
+  DataZoomComponent,
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
+  VisualMapComponent,
+  VisualMapContinuousComponent,
+  VisualMapPiecewiseComponent,
+  AriaComponent,
+  DatasetComponent,
+  TransformComponent,
+} from "echarts/components";
+// 引入 Canvas 渲染器渲染
+import { CanvasRenderer } from "echarts/renderers";
+// 将以上引入的组件使用use()方法注册
+echarts.use([
+  BarChart,
+  GridComponent,
+  PolarComponent,
+  GeoComponent,
+  SingleAxisComponent,
+  ParallelComponent,
+  CalendarComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  AxisPointerComponent,
+  BrushComponent,
+  TitleComponent,
+  TimelineComponent,
+  MarkPointComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  LegendComponent,
+  DataZoomComponent,
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
+  VisualMapComponent,
+  VisualMapContinuousComponent,
+  VisualMapPiecewiseComponent,
+  AriaComponent,
+  DatasetComponent,
+  TransformComponent,
+  CanvasRenderer,
+]);
+export default echarts;

+<template>
+  <div ref="barEcharts" class="yl-echarts-container bar-echarts"></div>
+</template>
+<script>
+import { optionBar } from "./optionConfig"
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    // 初始化echarts实例
+    const myChart = this.$echarts.init(this.$refs.barEcharts);
+    console.log(myChart);
+    // 绘制图表
+    myChart.setOption(optionBar);
+  },
+  methods: {},
+};
+</script>
+<style lang='scss'>
+.yl-echarts-container{
+  // height: 200px;
+}
+</style>

+export const optionBar = {
+  xAxis: {
+    type: "category",
+    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  },
+  yAxis: {
+    type: "value",
+  },
+  series: [
+    {
+      data: [120, 200, 150, 80, 70, 110, 130],
+      type: "bar",
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};

@@ -27,6 +27,8 @@ import tableHeaders from '@/assets/languages/tableHeaders'
 import dictLabels from "@/assets/languages/dictLabels.js"
 import settings from './settings.js'
 import * as filters from "./utils/filters.js";
+import echarts from "@/assets/languages/echarts";
+
 // 全局方法挂载
 Vue.prototype.parseTime = parseTime
 Vue.prototype.resetForm = resetForm
@@ -42,7 +44,7 @@ Vue.prototype.isArray = isArray
 Vue.prototype.tableHeaders = tableHeaders
 Vue.prototype.dictLabels = dictLabels
 Vue.prototype.settings = settings
-
+Vue.prototype.$echarts = echarts;
 Vue.prototype.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success" });
 }

@@ -457,6 +457,7 @@ export function restTableHeight($refs) {
 
 /**
  * Array Json去重 & 排序
+ * @author SunYu
  * @param {Array} arr
  * @param {string || Object} keys
  * @description 对数组中指定的JSON字段去重和指定的字段进行排序
@@ -517,6 +518,7 @@ export function removeDuplicates(arr, keys) {
 }
 /**
  * Array Json
+ * @author SunYu
  * @param {Array} arr
  * @param {string} key
  * @description 把所有重复的过滤出来

-import axios from 'axios'
-import { Message, MessageBox } from 'element-ui'
-import store from '@/store'
-import { getToken, setToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
-import settings from "@/settings"
+import axios from "axios";
+import { Message, MessageBox } from "element-ui";
+import store from "@/store";
+import { getToken, setToken } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
+import settings from "@/settings";
 
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: settings.baseURL, //接口地址
   // 超时
-  timeout: 30000
-})
+  timeout: 30000,
+});
 // request拦截器
-service.interceptors.request.use(config => {
-  // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
-  if (getToken() && !isToken) {
-    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?';
-    for (const propName of Object.keys(config.params)) {
-      const value = config.params[propName];
-      var part = encodeURIComponent(propName) + "=";
-      if (value !== null && typeof (value) !== "undefined") {
-        if (typeof value === 'object') {
-          for (const key of Object.keys(value)) {
-            let params = propName + '[' + key + ']';
-            var subPart = encodeURIComponent(params) + "=";
-            url += subPart + encodeURIComponent(value[key]) + "&";
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false;
+    if (getToken() && !isToken) {
+      config.headers["Authorization"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    // get请求映射params参数
+    if (config.method === "get" && config.params) {
+      let url = config.url + "?";
+      for (const propName of Object.keys(config.params)) {
+        const value = config.params[propName];
+        var part = encodeURIComponent(propName) + "=";
+        if (value !== null && typeof value !== "undefined") {
+          if (typeof value === "object") {
+            for (const key of Object.keys(value)) {
+              let params = propName + "[" + key + "]";
+              var subPart = encodeURIComponent(params) + "=";
+              url += subPart + encodeURIComponent(value[key]) + "&";
+            }
+          } else {
+            url += part + encodeURIComponent(value) + "&";
           }
-        } else {
-          url += part + encodeURIComponent(value) + "&";
         }
       }
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
     }
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
   }
-  return config
-}, error => {
-  console.log(error)
-  Promise.reject(error)
-})
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
-  if (res.headers['token']) {
-    setToken(decodeURI(res.headers['token']))
-  }
-  // 未设置状态码则默认成功状态
-  const code = res.data.code || 200;
-  // 获取错误信息
-  const msg = errorCode[code] || res.data.msg || errorCode['default']
-  if (code === 301) {
-    MessageBox.confirm('登录状态已过期，需重新登录', '系统提示', {
-      closeOnClickModal: false,
-      showCancelButton: false,
-      confirmButtonText: '重新登录',
-      type: 'warning'
+service.interceptors.response.use(
+  (res) => {
+    if (res.headers["token"]) {
+      setToken(decodeURI(res.headers["token"]));
     }
-    ).then(() => {
-      store.dispatch('LogOut').then(() => {
-        location.href = settings.routerBase + '/index';
-      })
-    })
-  } else if (code === 403) {
-    //无权限页面
-    location.href = '/401';
-  }
-  else if (code === 500) {
-    Message({
-      message: msg,
-      type: 'error'
-    })
-    return Promise.reject(new Error(msg))
-  } else if (
-    code !== 200 &&
-    code !== 201 &&
-    code !== 202 &&
-    code != 203 &&
-    code != 300 &&
-    code != 402 &&
-    code != 603
-  ) {
-    Message({
-      message: msg,
-      type: "error",
-    });
-    return Promise.reject("error");
-  } else {
-    return res.data;
-  }
-},
-  error => {
-    console.log('err' + error)
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode["default"];
+    if (code === 301) {
+      MessageBox.confirm("登录状态已过期，需重新登录", "系统提示", {
+        closeOnClickModal: false,
+        showCancelButton: false,
+        confirmButtonText: "重新登录",
+        type: "warning",
+      }).then(() => {
+        store.dispatch("LogOut").then(() => {
+          location.href = settings.routerBase + "/index";
+        });
+      });
+    } else if (code === 403) {
+      //无权限页面
+      location.href = "/401";
+    } else if (code === 500) {
+      Message({
+        message: msg,
+        type: "error",
+      });
+      return Promise.reject(new Error(msg));
+    } else if (![200, 201, 202, 203, 300, 402, 603].includes(code)) {
+      Message({
+        message: msg,
+        type: "error",
+      });
+      return Promise.reject("error");
+    } else {
+      return res.data;
+    }
+  },
+  (error) => {
+    console.log("err" + error);
     let { message } = error;
     if (message == "Network Error") {
       message = "网络连接异常";
-    }
-    else if (message.includes("timeout")) {
+    } else if (message.includes("timeout")) {
       message = "系统接口请求超时";
-    }
-    else if (message.includes("Request failed with status code")) {
+    } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
     Message({
       message: message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
+      type: "error",
+      duration: 5 * 1000,
+    });
+    return Promise.reject(error);
   }
-)
+);
 
-export default service
+export default service;

@@ -67,7 +67,7 @@
                 <Chart :className="'chart' + index.toString()" :chartData="item" height="350px" style="margin-bottom:10px"
                     :loading="loading" />
             </div>
-
+            <!-- <yl-echarts-bar></yl-echarts-bar> -->
         </div>
     </div>
 </template>
@@ -75,10 +75,11 @@
 <script>
 import Chart from '@/components/echarts/echarts-series.vue'
 import { findDmPreMdeCondition, findPreMdeReport } from "@/api/preMdeConfig";
-
+// import YlEchartsBar from "@/components/YlEcharts/YlEchartsBar"
 export default {
     components: {
-        Chart
+        Chart,
+        // YlEchartsBar
     },
     data() {
         return {