feat: style config
diff --git a/package-lock.json b/package-lock.json
index ae80466..49819bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -660,6 +660,11 @@
"integrity": "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=",
"dev": true
},
+ "bignumber.js": {
+ "version": "8.1.1",
+ "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-8.1.1.tgz",
+ "integrity": "sha512-QD46ppGintwPGuL1KqmwhR0O+N2cZUg8JG/VzwI2e28sM9TqHjQB10lI4QAaMHVbLzwVLLAwEglpKPViWX+5NQ=="
+ },
"binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.2.0.tgz?cache=0&sync_timestamp=1610299293319&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-2.2.0.tgz",
@@ -1534,6 +1539,16 @@
"integrity": "sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=",
"dev": true
},
+ "handsontable": {
+ "version": "6.2.2",
+ "resolved": "https://registry.npmjs.org/handsontable/-/handsontable-6.2.2.tgz",
+ "integrity": "sha512-Z/sQa51OMHH4RoeBJeANYJMJYmx5SR+/xP8JCh5mzKJnAMKoQWF1zONPNgNCFZ/LdKFmI0f34XKtU0GHW0MG/Q==",
+ "requires": {
+ "moment": "2.20.1",
+ "numbro": "^2.0.6",
+ "pikaday": "1.5.1"
+ }
+ },
"has": {
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
@@ -2211,6 +2226,11 @@
"resolved": "https://registry.nlark.com/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1624483449786&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz",
"integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA="
},
+ "moment": {
+ "version": "2.20.1",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.1.tgz",
+ "integrity": "sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg=="
+ },
"ms": {
"version": "2.1.3",
"resolved": "https://registry.npmmirror.com/ms/download/ms-2.1.3.tgz",
@@ -2293,6 +2313,14 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
+ "numbro": {
+ "version": "2.3.5",
+ "resolved": "https://registry.npmjs.org/numbro/-/numbro-2.3.5.tgz",
+ "integrity": "sha512-xlKC0GIZn0iaF7LHE60/DmGfQadDNfnskXdGDGWJfaZfP4pbhc0x+nR8yIIpQkF9n7gJWS6fgBR3Pkvp/W6sDg==",
+ "requires": {
+ "bignumber.js": "^8.1.1"
+ }
+ },
"object-assign": {
"version": "4.1.1",
"resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@@ -2457,6 +2485,14 @@
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"dev": true
},
+ "pikaday": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/pikaday/-/pikaday-1.5.1.tgz",
+ "integrity": "sha1-CkhUm8GhTqHQjEQHTXYbwvK/z9M=",
+ "requires": {
+ "moment": "2.x"
+ }
+ },
"pinkie": {
"version": "2.0.4",
"resolved": "http://registry.npm.taobao.org/pinkie/download/pinkie-2.0.4.tgz",
diff --git a/package.json b/package.json
index 1a384f9..bd41d98 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
},
"dependencies": {
"element-plus": "^1.0.2-beta.44",
+ "handsontable": "^6.2.2",
"lodash": "^4.17.19",
"vue": "^3.0.11",
"vue-i18n": "^9.1.6"
diff --git a/src/App.vue b/src/App.vue
index 842c806..84ad82b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,17 +4,33 @@
<h3>
{{$t('title')}}
</h3>
+ <el-tabs type="card" v-model="activeName">
+ <el-tab-pane label="样式" name="config">
+ <WConfig></WConfig>
+ </el-tab-pane>
+ <el-tab-pane label="数据" name="data">数据</el-tab-pane>
+ <el-tab-pane label="导出" name="export">导出</el-tab-pane>
+ </el-tabs>
</el-aside>
<el-main>
- <div id="chart"></div>
+ <WChart></WChart>
</el-main>
</el-container>
</template>
<script lang='ts' setup>
+import WChart from './components/WChart.vue';
+import WConfig from './components/WConfig.vue';
+const activeName = 'config';
</script>
+<style>
+h4 {
+ margin: 10px 0;
+}
+</style>
+
<style scoped lang="scss">
#echarts-spa-app {
font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -33,10 +49,4 @@
.el-aside {
padding: 0 15px;
}
-
-#chart {
- border: 1px solid #f2eef2;
- width: 800px;
- height: 600px;
-}
</style>
diff --git a/src/components/WChart.vue b/src/components/WChart.vue
new file mode 100644
index 0000000..37890b0
--- /dev/null
+++ b/src/components/WChart.vue
@@ -0,0 +1,22 @@
+<template>
+ <div class="chart" ref="chartRef"></div>
+</template>
+
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+// const { proxy } = getCurrentInstance();
+onMounted(() => {
+ const chartRef = ref(null);
+ console.log('mounted', chartRef);
+});
+</script>
+
+
+<style scoped lang="scss">
+.chart {
+ border: 1px solid #f2eef2;
+ width: 800px;
+ height: 600px;
+}
+</style>
diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue
new file mode 100644
index 0000000..87e7293
--- /dev/null
+++ b/src/components/WConfig.vue
@@ -0,0 +1,101 @@
+<template>
+ <h4>基础色</h4>
+ <div>
+ <el-color-picker
+ v-for="(color, index) in themeColors"
+ v-bind:key="index"
+ v-model="themeColors[index]"
+ size="small"
+ >
+ </el-color-picker>
+ <div class="color-picker-btn">
+ <i class="el-icon-minus"></i>
+ </div>
+ <div class="color-picker-btn">
+ <i class="el-icon-plus"></i>
+ </div>
+ </div>
+ <h4>亮度范围</h4>
+ <el-row>
+ <el-col :span="22" :offset="1">
+ <el-slider
+ v-model="value"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+
+ <h4>饱和度范围</h4>
+ <el-row>
+ <el-col :span="22" :offset="1">
+ <el-slider
+ v-model="value"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+
+ <h4>透明度范围</h4>
+ <el-row>
+ <el-col :span="22" :offset="1">
+ <el-slider
+ v-model="value"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const themeColors = ref(['#720FEB', '#EB1AA9', '#B6DA02']);
+</script>
+
+<style lang="scss">
+.title-right {
+ position: absolute;
+ top: 10px;
+ right: 0;
+
+ a {
+ display: inline-block;
+ }
+}
+
+.el-color-picker {
+ margin-right: 5px;
+}
+
+.color-picker-btn {
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ margin-right: 5px;
+ padding: 3px 6px;
+ box-sizing: border-box;
+ vertical-align: top;
+ border: 1px solid #e6e6e6;
+ border-radius: 4px;
+ color: #409EFF;
+}
+
+.text-pad {
+ padding: 8px 0;
+}
+</style>
diff --git a/src/components/WData.vue b/src/components/WData.vue
new file mode 100644
index 0000000..e7e667c
--- /dev/null
+++ b/src/components/WData.vue
@@ -0,0 +1,104 @@
+<template>
+ <h4>主题色</h4>
+ <div>
+ <el-color-picker
+ v-for="(color, index) in themeColors"
+ v-bind:key="index"
+ v-model="themeColors[index]"
+ size="small"
+ >
+ </el-color-picker>
+ <div class="color-picker-btn">
+ <i class="el-icon-minus"></i>
+ </div>
+ <div class="color-picker-btn">
+ <i class="el-icon-plus"></i>
+ </div>
+ </div>
+ <h4>亮度范围</h4>
+ <el-row>
+ <el-col :span="22" :offset="1">
+ <el-slider
+ v-model="value"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+
+ <h4>饱和度范围</h4>
+ <el-row>
+ <el-col :span="22" :offset="1">
+ <el-slider
+ v-model="value"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+
+ <h4>透明度范围</h4>
+ <el-row>
+ <el-col :span="22" :offset="1">
+ <el-slider
+ v-model="value"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+ <!-- <el-collapse>
+ <el-collapse-item title="一致性 Consistency" name="1">
+ </el-collapse-item>
+ </el-collapse> -->
+</template>
+
+
+<script setup lang="ts">
+const themeColors = ['#720FEB', '#EB1AA9', '#EB1AA2'];
+</script>
+
+<style lang="scss">
+.title-right {
+ position: absolute;
+ top: 10px;
+ right: 0;
+
+ a {
+ display: inline-block;
+ }
+}
+
+.el-color-picker {
+ margin-right: 5px;
+}
+
+.color-picker-btn {
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ margin-right: 5px;
+ padding: 3px 6px;
+ box-sizing: border-box;
+ vertical-align: top;
+ border: 1px solid #e6e6e6;
+ border-radius: 4px;
+ color: #409EFF;
+}
+
+.text-pad {
+ padding: 8px 0;
+}
+</style>
