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

实现组件复用功能，更新说明文档，修改界面的部分细节

Browse Source
This commit is contained in:
MTrunning
2020-05-05 23:34:19 +08:00
parent c838f9abc2
commit f2b118ed0b
6 changed files with 157 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+77 -8
View File
@@ -1,7 +1,7 @@
## 一、项目描述
- 一个基于 vue、datav、Echart 框架的 " **数据大屏项目** "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
- 项目需要全屏展示（按F11）。
- 项目需要全屏展示（按 F11）。
- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用**按需引入**。
- 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
- 项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
@@ -30,7 +30,10 @@
## 三、使用介绍
1. **如何请求数据**
1. **如何启动项目**
需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。
2. **如何请求数据**
现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
- axios 的 main.js 配置参考范例（因人而异）
@@ -42,7 +45,7 @@ import axios from "axios";
Vue.prototype.$http = axios.create({
//设置20秒超时时间
timeout: 20000,
baseURL: "http://172.0.0.1:80080" //这里写后端地址
baseURL: "http://172.0.0.1:80080", //这里写后端地址
});
```
@@ -67,7 +70,7 @@ export default {
}
```
2. **如何动态渲染图表**
3. **如何动态渲染图表**
在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
```js
@@ -88,7 +91,65 @@ methods: {
}
```
3. **如何更换边框**
4. **如何复用图表组件**
因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
```js
//组件调用
<span>今日任务通过率</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
<span>今日任务达标率</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
...
import centerChart from "@/components/echart/center/centerChartRate";
data() {
return {
rate: [
{
id: "centerRate1",
tips: 60,
...
},
{
id: "centerRate2",
tips: 40,
colorData: {
...
}
}
]
}
}
```
在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
```js
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
...
colorObj: {
type: Object,
default: function() {
return {
//具体去代码里看
}
};
}
}
},
```
5. **如何更换边框**
边框是使用了 DataV 自带的组件，如：
```html
@@ -97,9 +158,17 @@ methods: {
只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
4. **如何更换图表**
直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
6. **如何更换图表**
直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
7. **屏幕比例不对怎么办**
其实 dataV 插件已经对屏幕的比例做了一定程度的适配，但肯定有比例不合适的屏幕，所以可能需要自己去写 js 代码，让项目按照比例缩放，这也是通用的适配方法。
## 四、更新情况
如果大家有意见请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
2. 修复了头部右侧的图案条不对称的问题
## 五、其余
这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
src/components/echart/center/centerChart2.vue
-79
View File
@@ -1,79 +0,0 @@
<template>
<div>
<div id="centerChart2" style="width:120px;height:100px;"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centerChart2")
);
// ----------------------------------------------------------------
let tips = 40;
let option = {
title: [
{
text: tips * 1 + "%",
x: "center",
y: "center",
textStyle: {
color: "#67e0e3",
fontSize: 16
}
}
],
series: [
{
type: "pie",
radius: ["75%", "80%"],
center: ["50%", "50%"],
hoverAnimation: false,
color: ["#f3ffb070", "transparent"],
label: {
normal: {
show: false
}
},
data: [
{
value: tips,
itemStyle: {
normal: {
color: "#ff9800",
shadowBlur: 10,
shadowColor: "#97e2f5"
}
}
},
{
value: 100 - tips
}
]
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
}
},
destroyed() {
window.onresize = null;
}
};
</script>
<style lang="scss" scoped>
</style>
src/components/echart/center/centerChart1.vue → src/components/echart/center/centerChartRate.vue
+34 -9
View File
@@ -1,6 +1,6 @@
<template>
<div>
<div id="centerChart1" style="width:120px;height:100px;"></div>
<div :id="id" style="width:120px;height:100px;"></div>
</div>
</template>
@@ -13,14 +13,39 @@ export default {
mounted() {
this.drawPie();
},
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
tips: {
type: Number,
required: true,
default: 50
},
colorObj: {
type: Object,
default: function() {
return {
textStyle: "#3fc0fb",
series: {
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: "#03a9f4",
shadowColor: "#97e2f5"
}
}
};
}
}
},
methods: {
drawPie() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centerChart1")
);
let myChartPieLeft = echarts.init(document.getElementById(this.id));
// ----------------------------------------------------------------
let tips = 60;
let tips = this.tips;
let option = {
title: [
{
@@ -28,7 +53,7 @@ export default {
x: "center",
y: "center",
textStyle: {
color: "#3fc0fb",
color: this.colorObj.textStyle,
fontSize: 16
}
}
@@ -39,7 +64,7 @@ export default {
radius: ["75%", "80%"],
center: ["50%", "50%"],
hoverAnimation: false,
color: ["#00bcd44a", "transparent"],
color: this.colorObj.series.color,
label: {
normal: {
show: false
@@ -50,9 +75,9 @@ export default {
value: tips,
itemStyle: {
normal: {
color: "#03a9f4",
color: this.colorObj.series.dataColor.normal,
shadowBlur: 10,
shadowColor: "#97e2f5"
shadowColor: this.colorObj.series.dataColor.shadowColor
}
}
},
src/views/center.vue
+43 -12
View File
@@ -17,13 +17,13 @@
<dv-scroll-ranking-board :config="ranking" style="height:220px" />
</div>
<div class="percent">
<div class="item bg-color-black">
<div class="item bg-color-black">
<span>今日任务通过率</span>
<centerChart1 />
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
</div>
<div class="item bg-color-black">
<div class="item bg-color-black">
<span>今日任务达标率</span>
<centerChart2 />
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
</div>
<div class="water">
<dv-water-level-pond :config="water" style="height: 120px" />
@@ -34,8 +34,7 @@
</template>
<script>
import centerChart1 from "@/components/echart/center/centerChart1";
import centerChart2 from "@/components/echart/center/centerChart2";
import centerChart from "@/components/echart/center/centerChartRate";
export default {
data() {
@@ -131,15 +130,47 @@ export default {
},
water: {
data: [24, 45],
shape: 'roundRect',
formatter:'{value}%',
waveNum:3
}
shape: "roundRect",
formatter: "{value}%",
waveNum: 3
},
// 通过率和达标率的组件复用数据
rate: [
{
id: "centerRate1",
tips: 60,
colorData: {
textStyle: "#3fc0fb",
series: {
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: "#03a9f4",
shadowColor: "#97e2f5"
}
}
}
},
{
id: "centerRate2",
tips: 40,
colorData: {
textStyle: "#67e0e3",
series: {
color: ["#faf3a378", "transparent"],
dataColor: {
normal: "#ff9800",
shadowColor: "#fcebad"
}
}
}
}
]
};
},
components: {
centerChart1,
centerChart2
centerChart
// centerChart1,
// centerChart2
}
};
</script>
src/views/centreLeft2.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<icon name="chart-pie"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">全国数据流通情况</span>
<span class="fs-xl text mx-2">数据情况雷达图</span>
<dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
</div>
</div>
src/views/index.vue
+2 -2
View File
@@ -22,7 +22,7 @@
style="width:200px;height:50px;"
/>
</div>
<dv-decoration-10 style="width:33.3%;height:5px;" />
<dv-decoration-10 style="width:33.3%;height:5px; transform: rotateY(180deg);" />
</div>
<!-- 第二行 -->
@@ -41,7 +41,7 @@
</div>
<div style="width: 40%" class="d-flex">
<div class="react-left bg-color-blue mr-3">
<span class="text fw-b">数据分析3</span>
<span class="text fw-b">vue-big-screen</span>
</div>
<div
class="react-left mr-4"