Skip to content
Permalink
Browse files
feat: colors
  • Loading branch information
Ovilia committed Dec 22, 2021
1 parent 2da5745 commit b24c4e583cddc401a101a43390bbb7726292ff08
Showing 5 changed files with 328 additions and 107 deletions.

Some generated files are not rendered by default. Learn more.

@@ -9,6 +9,7 @@
},
"devDependencies": {
"@babel/polyfill": "^7.12.1",
"@types/color": "^3.0.2",
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.0.11",
"chalk": "^3.0.0",
@@ -23,6 +24,7 @@
"yargs": "^6.6.0"
},
"dependencies": {
"color": "^4.1.0",
"echarts": "^5.2.2",
"echarts-wordcloud": "file:../echarts-wordcloud",
"element-plus": "^1.0.2-beta.44",
@@ -1,26 +1,26 @@
<template>
<el-container>
<el-container>
<el-aside>
<h3>
{{$t('title')}}
</h3>
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="样式" name="config">
<WConfig ref="wconfig" @change="onChange"></WConfig>
</el-tab-pane>
<el-tab-pane label="数据" name="data">
<WData ref="wdata" @change="onChange"></WData>
</el-tab-pane>
<el-tab-pane label="导出" name="export">导出</el-tab-pane>
</el-tabs>
<h3>
{{ $t('title') }}
</h3>
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="样式" name="config">
<WConfig ref="wconfig" @change="onChange"></WConfig>
</el-tab-pane>
<el-tab-pane label="数据" name="data">
<WData ref="wdata" @change="onChange"></WData>
</el-tab-pane>
<el-tab-pane label="导出" name="export">导出</el-tab-pane>
</el-tabs>
</el-aside>
<el-main>
<WChart ref="wchart"></WChart>
<WChart ref="wchart"></WChart>
</el-main>
</el-container>
</el-container>
</template>

<script lang='ts' setup>
<script lang="ts" setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import WChart from './components/WChart.vue';
@@ -32,41 +32,43 @@ const wconfig = ref<any>(null);
const wdata = ref<any>(null);
const wchart = ref<any>(null);
const {t} = useI18n({ useScope: 'global' });
const { t } = useI18n({ useScope: 'global' });
const activeName = 'config';
function onChange() {
wchart.value?.run(wdata.value?.data, wconfig.value?.getConfig());
wchart.value?.run(wdata.value?.data, wconfig.value?.getConfig());
}
setTimeout(() => {
wdata.value?.setData(defaultData);
wdata.value?.setData(defaultData);
});
</script>

<style>
h4 {
margin: 10px 0;
margin: 10px 0;
}
</style>

<style scoped lang="scss">
#echarts-spa-app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.el-aside {
padding: 0 15px;
--el-aside-width: 400px;
padding: 0 15px;
--el-aside-width: 400px;
height: calc(100vh - 50px);
overflow: auto;
}
</style>
@@ -8,6 +8,7 @@
import { onMounted, shallowRef, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import Color from 'color';
// const props = defineProps({
// foo: String
@@ -20,7 +21,8 @@ defineExpose({
});
type Config = {
hue: number[];
bgColor: string;
themeColors: string[];
saturation: number[];
lightness: number[];
alpha: number[];
@@ -33,8 +35,32 @@ type Config = {
};
function run(data?: [], config?: Config) {
config && console.log(config.width, config.height);
const hues = config
? config.themeColors.map(
color =>
Color(color)
.hsl()
.object().h
)
: [];
function getHue() {
const index = Math.floor(Math.random() * hues.length);
return hues[index];
}
function getRandom(minMax: number[] | undefined) {
if (!minMax) {
return 0;
}
const max = minMax[1] == null ? 1 : minMax[1];
const min = minMax[0] == null ? 0 : minMax[0];
const range = max - min || 1;
return Math.random() * range + min;
}
chart.value!.setOption({
backgroundColor: config!.bgColor,
series: [
{
type: 'wordCloud',
@@ -46,7 +72,17 @@ function run(data?: [], config?: Config) {
width: config?.width + '%',
height: config?.height + '%',
layoutAnimation: true,
keepAspect: true
keepAspect: true,
textStyle: {
color: (param: any) => {
const value = param.value;
const h = getHue();
const s = getRandom(config?.saturation);
const l = getRandom(config?.lightness);
const color = Color(`hsl(${h}, ${s}%, ${l}%)`);
return color.toString();
}
}
}
],
textStyle: {

0 comments on commit b24c4e5

Please sign in to comment.