tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加mixins功能，修改图标引入方式

Browse Source
This commit is contained in:
MTrunning
2020-06-28 18:15:55 +08:00
parent 46eced28ce
commit 89de9fa802
11 changed files with 163 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+26 -32
View File
@@ -5,6 +5,7 @@
- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用**按需引入**。
- 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
- 项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
- 请拉取 master 分支的代码，其余是开发分支。
友情链接：
@@ -14,39 +15,42 @@
4. [项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/big-screen-vue-datav)
项目展示
![项目展示](https://images.gitee.com/uploads/images/2020/0411/221307_0f8af2e7_4964818.gif "20200411_221020.gif")
![项目展示](https://images.gitee.com/uploads/images/2020/0411/221307_0f8af2e7_4964818.gif '20200411_221020.gif')
## 二、主要文件介绍
| 文件 | 作用/功能 |
| ------------------- | --------------------------------------------------- |
| mian.js | 主目录文件，全局引入了引入 vue-awesome |
| utils | 工具函数与 mixins 函数等 |
| views/ index.vue | 项目主结构 |
| views/其余文件 | 界面各个区域组件（按照位置来命名）ajax 接口请求位置 |
| assets | 静态资源目录，放置 logo 与背景图片 |
| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节 |
| assets / index.scss | Index 界面的 CSS 文件 |
| components/echart | 所有 echart 图表（按照位置来命名） |
| common/flexible.js | flexible插件代码（适配屏幕尺寸，定制化修改） |
| common/flexible.js | flexible 插件代码（适配屏幕尺寸，定制化修改） |
## 三、使用介绍
1. **如何启动项目**
需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。
2. **如何请求数据**
现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
- axios 的 main.js 配置参考范例（因人而异）
```js
import axios from "axios";
import axios from 'axios';
//把方法放到vue的原型上，这样就可以全局使用了
Vue.prototype.$http = axios.create({
//设置20秒超时时间
timeout: 20000,
baseURL: "http://172.0.0.1:80080", //这里写后端地址
baseURL: 'http://172.0.0.1:80080', //这里写后端地址
});
```
@@ -72,6 +76,7 @@ export default {
```
3. **如何动态渲染图表**
在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
```js
@@ -93,6 +98,7 @@ methods: {
```
4. **如何复用图表组件**
因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
@@ -128,43 +134,29 @@ data() {
}
```
在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
```js
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
...
colorObj: {
type: Object,
default: function() {
return {
//具体去代码里看
}
};
}
}
},
```
然后在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
5. **如何更换边框**
边框是使用了 DataV 自带的组件，如：
边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
如：
```html
<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>
```
只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
6. **如何更换图表**
直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
7. **Mixins 注入的问题**
使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将`echarts.init()`函数赋值给`this.chart`，然后 mixins 才会自动帮你注入响应式功能。
8. **屏幕适配问题**
7. **屏幕适配问题**
本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
```js
@@ -179,7 +171,7 @@ function refreshRem() {
}
// 原项目是1920px我设置成24等份，这样1rem就是80px
var rem = width / 24;
docEl.style.fontSize = rem + "px";
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
```
@@ -188,7 +180,9 @@ function refreshRem() {
1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
2. 修复了头部右侧的图案条不对称的问题。
3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用rem。
3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
4. 使用 Mixins 注入图表响应式代码。
5. vue-awesome 改成按需引入的方式
## 五、其余
src/components/echart/bottom/bottomLeftChart.vue
+9 -10
View File
@@ -5,20 +5,22 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie() {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("bottomLeftChart")
);
this.chart = echarts.init(document.getElementById("bottomLeftChart"));
// ----------------------------------------------------------------
let category = [
"市区",
@@ -255,10 +257,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/bottom/bottomRightChart.vue
+10 -11
View File
@@ -5,26 +5,28 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mounted() {
this.drawPie();
this.draw();
this.charTimg();
},
mixins: [echartMixins],
methods: {
charTimg() {
setInterval(() => {
this.drawPie();
this.draw();
}, 6000);
},
drawPie() {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("bottomRightChart")
);
this.chart = echarts.init(document.getElementById("bottomRightChart"));
// ----------------------------------------------------------------
// 数据
let dateBase = new Date();
@@ -392,10 +394,7 @@ export default {
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/center/centerChartRate.vue
+9 -8
View File
@@ -5,13 +5,17 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
props: {
id: {
@@ -41,9 +45,9 @@ export default {
}
},
methods: {
drawPie() {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(document.getElementById(this.id));
this.chart = echarts.init(document.getElementById(this.id));
// ----------------------------------------------------------------
let tips = this.tips;
let option = {
@@ -88,10 +92,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/centerLeft2/centreLeft1Chart.vue
+9 -14
View File
@@ -5,23 +5,25 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie(sidebar) {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft1Chart")
);
this.chart = echarts.init(document.getElementById("centreLeft1Chart"));
// ----------------------------------------------------------------
myChartPieLeft.setOption({
this.chart.setOption({
color: [
"#37a2da",
"#32c5e9",
@@ -68,13 +70,6 @@ export default {
}
]
});
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
}
},
destroyed() {
src/components/echart/centerLeft2/centreLeft2Chart.vue
+9 -14
View File
@@ -5,20 +5,22 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie(sidebar) {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft2Chart")
);
this.chart = echarts.init(document.getElementById("centreLeft2Chart"));
// ----------------------------------------------------------------
let option = {
@@ -188,14 +190,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
this.chart.setOption(option);
}
},
destroyed() {
src/components/echart/centreRight2/centreRight2Chart1.vue
+13 -20
View File
@@ -5,24 +5,24 @@
</template>
<script>
import echartMixins from "@/utils/resizeMixins";
const echarts = require("echarts");
export default {
data() {
return {};
return {
chart: null
};
},
mixins: [echartMixins],
mounted() {
this.drawPie();
this.draw();
},
methods: {
drawPie(sidebar) {
draw() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreRight2Chart1")
);
this.chart = echarts.init(document.getElementById("centreRight2Chart1"));
// ----------------------------------------------------------------
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
let dataBJ = [
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
@@ -32,7 +32,7 @@ export default {
[160, 120, 186, 2.77, 91, 50, 28]
];
var dataGZ = [
let dataGZ = [
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
@@ -42,7 +42,7 @@ export default {
[56, 48, 68, 1.336, 37, 9, 28]
];
var dataSH = [
let dataSH = [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
@@ -52,7 +52,7 @@ export default {
[106, 77, 114, 1.07, 55, 51, 7]
];
var lineStyle = {
let lineStyle = {
normal: {
width: 1,
opacity: 0.5
@@ -151,14 +151,7 @@ export default {
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
this.chart.setOption(option);
}
},
destroyed() {
src/main.js
+17 -12
View File
@@ -1,21 +1,26 @@
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import dataV from "@jiaminghi/data-view";
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import dataV from '@jiaminghi/data-view';
Vue.use(dataV);
// 引入vue-awesome
import Icon from "vue-awesome/components/Icon";
import "vue-awesome/icons/index.js";
// 按需引入vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';
// 全局注册图标
Vue.component("icon", Icon);
Vue.component('icon', Icon);
// 适配flex
import "@/common/flexible.js";
import '@/common/flexible.js';
// 引入全局css
import "./assets/scss/style.scss";
import './assets/scss/style.scss';
Vue.config.productionTip = false;
@@ -23,4 +28,4 @@ new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
}).$mount('#app');
src/utils/index.js
+34
View File
@@ -0,0 +1,34 @@
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
src/utils/resizeMixins.js
+26
View File
@@ -0,0 +1,26 @@
// 混入代码 resize-mixins.js
import { debounce } from '@/utils/index';
const resizeChartMethod = '$__resizeChartMethod';
export default {
data() {
// 在组件内部将图表init的引用映射到chart属性上
return {
chart: null,
};
},
created() {
window.addEventListener('resize', this[resizeChartMethod], false);
},
beforeDestroy() {
window.removeEventListener('reisze', this[resizeChartMethod]);
},
methods: {
// 通过lodash的防抖函数来控制resize的频率
[resizeChartMethod]: debounce(function() {
if (this.chart) {
this.chart.resize();
}
}, 100),
},
};
src/views/index.vue
+1 -1
View File
@@ -126,7 +126,7 @@ export default {
cancelLoading() {
setTimeout(() => {
this.loading = false;
}, 2000);
}, 500);
}
}
};