feat: define components
diff --git a/package-lock.json b/package-lock.json
index 49819bb..5c1f012 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,16 @@
"resolved": "https://registry.npmmirror.com/@babel/parser/download/@babel/parser-7.15.7.tgz?cache=0&sync_timestamp=1632808879837&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.15.7.tgz",
"integrity": "sha1-DD7UousHsWXfqFs8xFxyczTE7a4="
},
+ "@babel/polyfill": {
+ "version": "7.12.1",
+ "resolved": "https://registry.npmmirror.com/@babel/polyfill/download/@babel/polyfill-7.12.1.tgz",
+ "integrity": "sha1-Hy1jcdEmG72WHzxdWQkVDhLQvZY=",
+ "dev": true,
+ "requires": {
+ "core-js": "^2.6.5",
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
"@babel/types": {
"version": "7.15.6",
"resolved": "https://registry.nlark.com/@babel/types/download/@babel/types-7.15.6.tgz?cache=0&sync_timestamp=1631216248664&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.15.6.tgz",
@@ -660,11 +670,6 @@
"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",
@@ -1064,6 +1069,12 @@
"@babel/types": "^7.6.1"
}
},
+ "core-js": {
+ "version": "2.6.12",
+ "resolved": "https://registry.npmmirror.com/core-js/download/core-js-2.6.12.tgz",
+ "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=",
+ "dev": true
+ },
"core-util-is": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/core-util-is/download/core-util-is-1.0.3.tgz",
@@ -1227,6 +1238,20 @@
"integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
"dev": true
},
+ "echarts": {
+ "version": "5.2.2",
+ "resolved": "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz",
+ "integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=",
+ "requires": {
+ "tslib": "2.3.0",
+ "zrender": "5.2.1"
+ }
+ },
+ "echarts-wordcloud": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
+ "integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g=="
+ },
"element-plus": {
"version": "1.0.2-beta.71",
"resolved": "https://registry.npmmirror.com/element-plus/download/element-plus-1.0.2-beta.71.tgz",
@@ -1539,16 +1564,6 @@
"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",
@@ -2226,11 +2241,6 @@
"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",
@@ -2313,14 +2323,6 @@
"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",
@@ -2485,14 +2487,6 @@
"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",
@@ -2798,6 +2792,12 @@
"strip-indent": "^2.0.0"
}
},
+ "regenerator-runtime": {
+ "version": "0.13.9",
+ "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz",
+ "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
+ "dev": true
+ },
"registry-auth-token": {
"version": "4.2.1",
"resolved": "https://registry.npm.taobao.org/registry-auth-token/download/registry-auth-token-4.2.1.tgz",
@@ -3176,6 +3176,11 @@
"integrity": "sha1-uLY5zvrX0LsqvTfUM/+Ck++l9AY=",
"dev": true
},
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz",
+ "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+ },
"type-fest": {
"version": "0.3.1",
"resolved": "https://registry.npmmirror.com/type-fest/download/type-fest-0.3.1.tgz",
@@ -4239,6 +4244,14 @@
"requires": {
"camelcase": "^4.1.0"
}
+ },
+ "zrender": {
+ "version": "5.2.1",
+ "resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz",
+ "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
+ "requires": {
+ "tslib": "2.3.0"
+ }
}
}
}
diff --git a/package.json b/package.json
index bd41d98..172408f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"serve": "vite preview"
},
"devDependencies": {
+ "@babel/polyfill": "^7.12.1",
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.0.11",
"chalk": "^3.0.0",
@@ -22,8 +23,9 @@
"yargs": "^6.6.0"
},
"dependencies": {
+ "echarts": "^5.2.2",
+ "echarts-wordcloud": "^2.0.0",
"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 84ad82b..f134f7f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,9 @@
<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="data">
+ <WData :data="config.data"></WData>
+ </el-tab-pane>
<el-tab-pane label="导出" name="export">导出</el-tab-pane>
</el-tabs>
</el-aside>
@@ -19,10 +21,19 @@
</template>
<script lang='ts' setup>
+import { Ref, ref } from 'vue';
import WChart from './components/WChart.vue';
import WConfig from './components/WConfig.vue';
+import WData from './components/WData.vue';
+
+type Config = {
+ data: {name: string, value: number}[]
+};
const activeName = 'config';
+const config: Config = {
+ data: [] as {name: string, value: number}[]
+};
</script>
<style>
diff --git a/src/components/WChart.vue b/src/components/WChart.vue
index 37890b0..2825a92 100644
--- a/src/components/WChart.vue
+++ b/src/components/WChart.vue
@@ -1,14 +1,48 @@
<template>
- <div class="chart" ref="chartRef"></div>
+ <div>
+ <div class="chart" ref="chartRef">aaa</div>
+ </div>
</template>
<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-// const { proxy } = getCurrentInstance();
+import { onMounted, shallowRef, ref } from 'vue';
+import * as echarts from 'echarts';
+import type { ECharts } from 'echarts';
+import 'echarts-wordcloud';
+
+// const props = defineProps({
+// foo: String
+// });
+const chart = shallowRef<ECharts | null>(null);
+const chartRef = ref<HTMLElement | null>(null);
+
+const run = () => {
+ console.log('run', chart.value);
+ chart.value!.setOption({
+ series: [{
+ type: 'wordCloud',
+ data: [{
+ name: 'series',
+ value: 100
+ }, {
+ name: 'data',
+ value: 30
+ }, {
+ name: 'itemStyle',
+ value: 20
+ }, {
+ name: 'lineStyle',
+ value: 5
+ }]
+ }]
+ });
+};
+
onMounted(() => {
- const chartRef = ref(null);
- console.log('mounted', chartRef);
+ console.log('mounted', chartRef.value);
+ chart.value = echarts.init(chartRef.value!);
+ run();
});
</script>
diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue
index 87e7293..17c2439 100644
--- a/src/components/WConfig.vue
+++ b/src/components/WConfig.vue
@@ -1,70 +1,94 @@
<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>
+ <el-collapse>
+ <el-collapse-item title="颜色" name="1">
+ <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="hue"
+ 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="saturation"
+ 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="lightness"
+ 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="alpha"
+ range
+ show-tooltip
+ :max="1"
+ :step="0.05"
+ input-size="medium"
+ >
+ </el-slider>
+ </el-col>
+ </el-row>
+ </el-collapse-item>
+ </el-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const themeColors = ref(['#720FEB', '#EB1AA9', '#B6DA02']);
+const hue = ref([0, 255]);
+const saturation = ref([0.5, 0.8]);
+const lightness = ref([0.5, 0.8]);
+const alpha = ref([0.5, 0.8]);
</script>
<style lang="scss">
diff --git a/src/components/WData.vue b/src/components/WData.vue
index e7e667c..fe12679 100644
--- a/src/components/WData.vue
+++ b/src/components/WData.vue
@@ -1,73 +1,18 @@
<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 class="table" ref="tableRef">
</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'];
+import { toRefs, PropType } from 'vue';
+
+const props = defineProps({
+ data: Array as PropType<{ value: number, name: string }[]>
+});
+const { data } = toRefs(props);
</script>
<style lang="scss">
diff --git a/tsconfig.json b/tsconfig.json
index 6d32e91..582c895 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
"moduleResolution": "node",
"target": "es6",
"allowJs": true,
+ "allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"],
