Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
1591f834 1 parent d75a54fd

添加Echarts

Inline Side-by-side
Showing 8 changed files with 179 additions and 67 deletions
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
38 "dependencies": { 38 "dependencies": {
39 "axios": "0.21.1", 39 "axios": "0.21.1",
40 "core-js": "3.8.3", 40 "core-js": "3.8.3",
41 + "echarts": "^5.4.3",
41 "element-ui": "2.15.3", 42 "element-ui": "2.15.3",
42 "sortablejs": "^1.15.0", 43 "sortablejs": "^1.15.0",
43 "vue": "2.6.14", 44 "vue": "2.6.14",
......
1 +// echarts按需引入
2 +// 引入 echarts API
3 +import * as echarts from "echarts/core";
4 +// 引入echarts图表类型
5 +import { BarChart } from "echarts/charts";
6 +// 引入echarts图表配置项
7 +import {
8 + GridComponent,
9 + PolarComponent,
10 + GeoComponent,
11 + SingleAxisComponent,
12 + ParallelComponent,
13 + CalendarComponent,
14 + GraphicComponent,
15 + ToolboxComponent,
16 + TooltipComponent,
17 + AxisPointerComponent,
18 + BrushComponent,
19 + TitleComponent,
20 + TimelineComponent,
21 + MarkPointComponent,
22 + MarkLineComponent,
23 + MarkAreaComponent,
24 + LegendComponent,
25 + DataZoomComponent,
26 + DataZoomInsideComponent,
27 + DataZoomSliderComponent,
28 + VisualMapComponent,
29 + VisualMapContinuousComponent,
30 + VisualMapPiecewiseComponent,
31 + AriaComponent,
32 + DatasetComponent,
33 + TransformComponent,
34 +} from "echarts/components";
35 +// 引入 Canvas 渲染器渲染
36 +import { CanvasRenderer } from "echarts/renderers";
37 +// 将以上引入的组件使用use()方法注册
38 +echarts.use([
39 + BarChart,
40 + GridComponent,
41 + PolarComponent,
42 + GeoComponent,
43 + SingleAxisComponent,
44 + ParallelComponent,
45 + CalendarComponent,
46 + GraphicComponent,
47 + ToolboxComponent,
48 + TooltipComponent,
49 + AxisPointerComponent,
50 + BrushComponent,
51 + TitleComponent,
52 + TimelineComponent,
53 + MarkPointComponent,
54 + MarkLineComponent,
55 + MarkAreaComponent,
56 + LegendComponent,
57 + DataZoomComponent,
58 + DataZoomInsideComponent,
59 + DataZoomSliderComponent,
60 + VisualMapComponent,
61 + VisualMapContinuousComponent,
62 + VisualMapPiecewiseComponent,
63 + AriaComponent,
64 + DatasetComponent,
65 + TransformComponent,
66 + CanvasRenderer,
67 +]);
68 +export default echarts;
......
1 +<template>
2 + <div ref="barEcharts" class="yl-echarts-container bar-echarts"></div>
3 +</template>
4 +<script>
5 +import { optionBar } from "./optionConfig"
6 +export default {
7 + data() {
8 + return {};
9 + },
10 + computed: {},
11 + watch: {},
12 + created() {},
13 + mounted() {
14 + // 初始化echarts实例
15 + const myChart = this.$echarts.init(this.$refs.barEcharts);
16 + console.log(myChart);
17 + // 绘制图表
18 + myChart.setOption(optionBar);
19 + },
20 + methods: {},
21 +};
22 +</script>
23 +<style lang='scss'>
24 +.yl-echarts-container{
25 + // height: 200px;
26 +}
27 +</style>
1 +export const optionBar = {
2 + xAxis: {
3 + type: "category",
4 + data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
5 + },
6 + yAxis: {
7 + type: "value",
8 + },
9 + series: [
10 + {
11 + data: [120, 200, 150, 80, 70, 110, 130],
12 + type: "bar",
13 + showBackground: true,
14 + backgroundStyle: {
15 + color: "rgba(180, 180, 180, 0.2)",
16 + },
17 + },
18 + ],
19 +};
...@@ -27,6 +27,8 @@ import tableHeaders from '@/assets/languages/tableHeaders' ...@@ -27,6 +27,8 @@ import tableHeaders from '@/assets/languages/tableHeaders'
27 import dictLabels from "@/assets/languages/dictLabels.js" 27 import dictLabels from "@/assets/languages/dictLabels.js"
28 import settings from './settings.js' 28 import settings from './settings.js'
29 import * as filters from "./utils/filters.js"; 29 import * as filters from "./utils/filters.js";
30 +import echarts from "@/assets/languages/echarts";
31 +
30 // 全局方法挂载 32 // 全局方法挂载
31 Vue.prototype.parseTime = parseTime 33 Vue.prototype.parseTime = parseTime
32 Vue.prototype.resetForm = resetForm 34 Vue.prototype.resetForm = resetForm
...@@ -42,7 +44,7 @@ Vue.prototype.isArray = isArray ...@@ -42,7 +44,7 @@ Vue.prototype.isArray = isArray
42 Vue.prototype.tableHeaders = tableHeaders 44 Vue.prototype.tableHeaders = tableHeaders
43 Vue.prototype.dictLabels = dictLabels 45 Vue.prototype.dictLabels = dictLabels
44 Vue.prototype.settings = settings 46 Vue.prototype.settings = settings
45 - 47 +Vue.prototype.$echarts = echarts;
46 Vue.prototype.msgSuccess = function (msg) { 48 Vue.prototype.msgSuccess = function (msg) {
47 this.$message({ showClose: true, message: msg, type: "success" }); 49 this.$message({ showClose: true, message: msg, type: "success" });
48 } 50 }
......
...@@ -457,6 +457,7 @@ export function restTableHeight($refs) { ...@@ -457,6 +457,7 @@ export function restTableHeight($refs) {
457 457
458 /** 458 /**
459 * Array Json去重 & 排序 459 * Array Json去重 & 排序
460 + * @author SunYu
460 * @param {Array} arr 461 * @param {Array} arr
461 * @param {string || Object} keys 462 * @param {string || Object} keys
462 * @description 对数组中指定的JSON字段去重和指定的字段进行排序 463 * @description 对数组中指定的JSON字段去重和指定的字段进行排序
...@@ -517,6 +518,7 @@ export function removeDuplicates(arr, keys) { ...@@ -517,6 +518,7 @@ export function removeDuplicates(arr, keys) {
517 } 518 }
518 /** 519 /**
519 * Array Json 520 * Array Json
521 + * @author SunYu
520 * @param {Array} arr 522 * @param {Array} arr
521 * @param {string} key 523 * @param {string} key
522 * @description 把所有重复的过滤出来 524 * @description 把所有重复的过滤出来
......
1 -import axios from 'axios' 1 +import axios from "axios";
2 -import { Message, MessageBox } from 'element-ui' 2 +import { Message, MessageBox } from "element-ui";
3 -import store from '@/store' 3 +import store from "@/store";
4 -import { getToken, setToken } from '@/utils/auth' 4 +import { getToken, setToken } from "@/utils/auth";
5 -import errorCode from '@/utils/errorCode' 5 +import errorCode from "@/utils/errorCode";
6 -import settings from "@/settings" 6 +import settings from "@/settings";
7 7
8 -axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' 8 +axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
9 // 创建axios实例 9 // 创建axios实例
10 const service = axios.create({ 10 const service = axios.create({
11 // axios中请求配置有baseURL选项，表示请求URL公共部分 11 // axios中请求配置有baseURL选项，表示请求URL公共部分
12 baseURL: settings.baseURL, //接口地址 12 baseURL: settings.baseURL, //接口地址
13 // 超时 13 // 超时
14 - timeout: 30000 14 + timeout: 30000,
15 -}) 15 +});
16 // request拦截器 16 // request拦截器
17 -service.interceptors.request.use(config => { 17 +service.interceptors.request.use(
18 + (config) => {
18 // 是否需要设置 token 19 // 是否需要设置 token
19 - const isToken = (config.headers || {}).isToken === false 20 + const isToken = (config.headers || {}).isToken === false;
20 if (getToken() && !isToken) { 21 if (getToken() && !isToken) {
21 - config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 22 + config.headers["Authorization"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
22 } 23 }
23 // get请求映射params参数 24 // get请求映射params参数
24 - if (config.method === 'get' && config.params) { 25 + if (config.method === "get" && config.params) {
25 - let url = config.url + '?'; 26 + let url = config.url + "?";
26 for (const propName of Object.keys(config.params)) { 27 for (const propName of Object.keys(config.params)) {
27 const value = config.params[propName]; 28 const value = config.params[propName];
28 var part = encodeURIComponent(propName) + "="; 29 var part = encodeURIComponent(propName) + "=";
29 - if (value !== null && typeof (value) !== "undefined") { 30 + if (value !== null && typeof value !== "undefined") {
30 - if (typeof value === 'object') { 31 + if (typeof value === "object") {
31 for (const key of Object.keys(value)) { 32 for (const key of Object.keys(value)) {
32 - let params = propName + '[' + key + ']'; 33 + let params = propName + "[" + key + "]";
33 var subPart = encodeURIComponent(params) + "="; 34 var subPart = encodeURIComponent(params) + "=";
34 url += subPart + encodeURIComponent(value[key]) + "&"; 35 url += subPart + encodeURIComponent(value[key]) + "&";
35 } 36 }
...@@ -42,52 +43,45 @@ service.interceptors.request.use(config => { ...@@ -42,52 +43,45 @@ service.interceptors.request.use(config => {
42 config.params = {}; 43 config.params = {};
43 config.url = url; 44 config.url = url;
44 } 45 }
45 - return config 46 + return config;
46 -}, error => { 47 + },
47 - console.log(error) 48 + (error) => {
48 - Promise.reject(error) 49 + console.log(error);
49 -}) 50 + Promise.reject(error);
51 + }
52 +);
50 53
51 // 响应拦截器 54 // 响应拦截器
52 -service.interceptors.response.use(res => { 55 +service.interceptors.response.use(
53 - if (res.headers['token']) { 56 + (res) => {
54 - setToken(decodeURI(res.headers['token'])) 57 + if (res.headers["token"]) {
58 + setToken(decodeURI(res.headers["token"]));
55 } 59 }
56 // 未设置状态码则默认成功状态 60 // 未设置状态码则默认成功状态
57 const code = res.data.code || 200; 61 const code = res.data.code || 200;
58 // 获取错误信息 62 // 获取错误信息
59 - const msg = errorCode[code] || res.data.msg || errorCode['default'] 63 + const msg = errorCode[code] || res.data.msg || errorCode["default"];
60 if (code === 301) { 64 if (code === 301) {
61 - MessageBox.confirm('登录状态已过期，需重新登录', '系统提示', { 65 + MessageBox.confirm("登录状态已过期，需重新登录", "系统提示", {
62 closeOnClickModal: false, 66 closeOnClickModal: false,
63 showCancelButton: false, 67 showCancelButton: false,
64 - confirmButtonText: '重新登录', 68 + confirmButtonText: "重新登录",
65 - type: 'warning' 69 + type: "warning",
66 - } 70 + }).then(() => {
67 - ).then(() => { 71 + store.dispatch("LogOut").then(() => {
68 - store.dispatch('LogOut').then(() => { 72 + location.href = settings.routerBase + "/index";
69 - location.href = settings.routerBase + '/index'; 73 + });
70 - }) 74 + });
71 - })
72 } else if (code === 403) { 75 } else if (code === 403) {
73 //无权限页面 76 //无权限页面
74 - location.href = '/401'; 77 + location.href = "/401";
75 - } 78 + } else if (code === 500) {
76 - else if (code === 500) {
77 Message({ 79 Message({
78 message: msg, 80 message: msg,
79 - type: 'error' 81 + type: "error",
80 - }) 82 + });
81 - return Promise.reject(new Error(msg)) 83 + return Promise.reject(new Error(msg));
82 - } else if ( 84 + } else if (![200, 201, 202, 203, 300, 402, 603].includes(code)) {
83 - code !== 200 &&
84 - code !== 201 &&
85 - code !== 202 &&
86 - code != 203 &&
87 - code != 300 &&
88 - code != 402 &&
89 - code != 603
90 - ) {
91 Message({ 85 Message({
92 message: msg, 86 message: msg,
93 type: "error", 87 type: "error",
...@@ -96,26 +90,24 @@ service.interceptors.response.use(res => { ...@@ -96,26 +90,24 @@ service.interceptors.response.use(res => {
96 } else { 90 } else {
97 return res.data; 91 return res.data;
98 } 92 }
99 -}, 93 + },
100 - error => { 94 + (error) => {
101 - console.log('err' + error) 95 + console.log("err" + error);
102 let { message } = error; 96 let { message } = error;
103 if (message == "Network Error") { 97 if (message == "Network Error") {
104 message = "网络连接异常"; 98 message = "网络连接异常";
105 - } 99 + } else if (message.includes("timeout")) {
106 - else if (message.includes("timeout")) {
107 message = "系统接口请求超时"; 100 message = "系统接口请求超时";
108 - } 101 + } else if (message.includes("Request failed with status code")) {
109 - else if (message.includes("Request failed with status code")) {
110 message = "系统接口" + message.substr(message.length - 3) + "异常"; 102 message = "系统接口" + message.substr(message.length - 3) + "异常";
111 } 103 }
112 Message({ 104 Message({
113 message: message, 105 message: message,
114 - type: 'error', 106 + type: "error",
115 - duration: 5 * 1000 107 + duration: 5 * 1000,
116 - }) 108 + });
117 - return Promise.reject(error) 109 + return Promise.reject(error);
118 } 110 }
119 -) 111 +);
120 112
121 -export default service 113 +export default service;
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
67 <Chart :className="'chart' + index.toString()" :chartData="item" height="350px" style="margin-bottom:10px" 67 <Chart :className="'chart' + index.toString()" :chartData="item" height="350px" style="margin-bottom:10px"
68 :loading="loading" /> 68 :loading="loading" />
69 </div> 69 </div>
70 - 70 + <!-- <yl-echarts-bar></yl-echarts-bar> -->
71 </div> 71 </div>
72 </div> 72 </div>
73 </template> 73 </template>
...@@ -75,10 +75,11 @@ ...@@ -75,10 +75,11 @@
75 <script> 75 <script>
76 import Chart from '@/components/echarts/echarts-series.vue' 76 import Chart from '@/components/echarts/echarts-series.vue'
77 import { findDmPreMdeCondition, findPreMdeReport } from "@/api/preMdeConfig"; 77 import { findDmPreMdeCondition, findPreMdeReport } from "@/api/preMdeConfig";
78 - 78 +// import YlEchartsBar from "@/components/YlEcharts/YlEchartsBar"
79 export default { 79 export default {
80 components: { 80 components: {
81 - Chart 81 + Chart,
82 + // YlEchartsBar
82 }, 83 },
83 data() { 84 data() {
84 return { 85 return {
......