From 5b2a25025b4426b969f01883201138a51f8b5837 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 十二月 2023 11:38:35 +0800
Subject: [PATCH] 公共图表头部组件开发+安装echarts 全局引入
---
src/components/cockpitPage/BackgroundBoardLayout.vue | 1
src/main.js | 4
yarn.lock | 18 +++---
src/components/cockpitPage/ChartTitle.vue | 53 +++++++++++++++++
package.json | 2
src/components/cockpitPage/BarChart.vue | 44 ++++++++++++++
src/views/cockpitPage/index.vue | 8 ++
public/cockpitPage/title-left.png | 0
8 files changed, 116 insertions(+), 14 deletions(-)
diff --git a/package.json b/package.json
index 80ab07b..727312f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
"cropperjs": "^1.5.13",
"d3-force": "^3.0.0",
"dayjs": "^1.11.7",
- "echarts": "^5.4.1",
+ "echarts": "^5.4.3",
"element-ui": "^2.15.12",
"faker": "^4.1.0",
"file-saver": "^2.0.5",
diff --git a/public/cockpitPage/title-left.png b/public/cockpitPage/title-left.png
new file mode 100644
index 0000000..a97a688
--- /dev/null
+++ b/public/cockpitPage/title-left.png
Binary files differ
diff --git a/src/components/cockpitPage/BackgroundBoardLayout.vue b/src/components/cockpitPage/BackgroundBoardLayout.vue
index 2078447..9345c5a 100644
--- a/src/components/cockpitPage/BackgroundBoardLayout.vue
+++ b/src/components/cockpitPage/BackgroundBoardLayout.vue
@@ -166,6 +166,5 @@
}
.right-bottom-block {
height: 35%;
- background: #dd355f;
}
</style>
diff --git a/src/components/cockpitPage/BarChart.vue b/src/components/cockpitPage/BarChart.vue
new file mode 100644
index 0000000..eb1c945
--- /dev/null
+++ b/src/components/cockpitPage/BarChart.vue
@@ -0,0 +1,44 @@
+<template>
+ <div class="bar-chart">
+ <ChartTitle name="杞﹂棿姝ｅ搧鐜�"></ChartTitle>
+ <div class="bar-contents">
+
+ </div>
+ </div>
+</template>
+
+<script>
+import ChartTitle from "@/components/cockpitPage/ChartTitle.vue";
+export default {
+ components: {
+ ChartTitle,
+ },
+ props: {},
+ data() {
+ return {
+
+ };
+ },
+ mounted() {
+
+ },
+ watch: {},
+ methods: {
+
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart{
+ width:100%;
+ height:calc(100% - 10px);
+ padding:10px 0 0;
+ .bar-contents{
+ width:100%;
+ height:calc(100% - 60px);
+ border:1px solid #00FFFF;
+ box-sizing: border-box;
+ }
+}
+</style>
diff --git a/src/components/cockpitPage/ChartTitle.vue b/src/components/cockpitPage/ChartTitle.vue
new file mode 100644
index 0000000..02aed46
--- /dev/null
+++ b/src/components/cockpitPage/ChartTitle.vue
@@ -0,0 +1,53 @@
+<template>
+ <div class="chart-title">
+ <div class="title-left-tip">
+ <img src="/cockpitPage/title-left.png" alt="">
+ </div>
+ <div class="title-bg">{{ name }}</div>
+ </div>
+</template>
+
+<script>
+
+export default {
+ props: {
+ name:{
+ type: [String],
+ default: () => {
+ return '';
+ },
+ },
+ },
+ data() {
+ return {};
+ },
+ mounted() {},
+ watch: {},
+ methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-title{
+ width:100%;
+ height:40px;
+ margin-bottom:20px;
+ font-size:18px;
+ color:#00FFFF;
+ position:relative;
+ .title-left-tip{
+ position:absolute;
+ left:0;
+ top:0;
+ }
+ .title-bg{
+ width:100%;
+ height:30px;
+ padding-left:20px;
+ display:inline-block;
+ line-height:30px;
+ margin-top:5px;
+ background:linear-gradient(to right,#081630,#076C80);
+ }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index ec9e245..e300e3a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@
import store from "./store"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
-
+import * as echarts from 'echarts'
Vue.config.productionTip = false
// import Element from "element-ui"
@@ -14,7 +14,7 @@
import { preventReClick } from "@/api/global-directives";
Vue.use(preventReClick);
Vue.use(ElementUI)
-
+Vue.use(echarts)
new Vue({
router,
store,
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index ffaeb1d..b9dc0ea 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -1,12 +1,18 @@
<template>
- <BackgroundBoardLayout></BackgroundBoardLayout>
+ <BackgroundBoardLayout>
+ <template #rightBlock3>
+ <BarChart @should-reload="reloadAllData"></BarChart>
+ </template>
+ </BackgroundBoardLayout>
</template>
<script>
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
+import BarChart from "@/components/cockpitPage/BarChart.vue";
export default {
components: {
BackgroundBoardLayout,
+ BarChart,
},
props: {},
data() {
diff --git a/yarn.lock b/yarn.lock
index 6ec34d1..59dbf27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5445,13 +5445,13 @@
jsbn "~0.1.0"
safer-buffer "^2.1.0"
-echarts@^5.4.1:
- version "5.4.1"
- resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz"
- integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==
+echarts@^5.4.3:
+ version "5.4.3"
+ resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz"
+ integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
dependencies:
tslib "2.3.0"
- zrender "5.4.1"
+ zrender "5.4.4"
editorconfig@^0.15.3:
version "0.15.3"
@@ -14224,9 +14224,9 @@
normalize-path "^1.0.0"
strip-indent "^2.0.0"
-zrender@5.4.1:
- version "5.4.1"
- resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz"
- integrity sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==
+zrender@5.4.4:
+ version "5.4.4"
+ resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz"
+ integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
dependencies:
tslib "2.3.0"
--
Gitblit v1.8.0