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
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"