Skip to content
Permalink
Browse files
feat: basic workflow
  • Loading branch information
Ovilia committed Dec 20, 2021
1 parent 1828acd commit 2da57450f98588a16b6e26b78117ca5ae017aa76
Showing 11 changed files with 1,776 additions and 319 deletions.
@@ -0,0 +1 @@
node_modules
@@ -0,0 +1,7 @@
{
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 80
}

Large diffs are not rendered by default.

@@ -24,7 +24,7 @@
},
"dependencies": {
"echarts": "^5.2.2",
"echarts-wordcloud": "^2.0.0",
"echarts-wordcloud": "file:../echarts-wordcloud",
"element-plus": "^1.0.2-beta.44",
"lodash": "^4.17.19",
"vue": "^3.0.11",
@@ -6,7 +6,7 @@
</h3>
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="样式" name="config">
<WConfig ref="wconfig"></WConfig>
<WConfig ref="wconfig" @change="onChange"></WConfig>
</el-tab-pane>
<el-tab-pane label="数据" name="data">
<WData ref="wdata" @change="onChange"></WData>
@@ -36,7 +36,7 @@ const {t} = useI18n({ useScope: 'global' });
const activeName = 'config';
function onChange() {
wchart.value?.run(wdata.value?.data);
wchart.value?.run(wdata.value?.data, wconfig.value?.getConfig());
}
setTimeout(() => {
@@ -1,10 +1,9 @@
<template>
<div>
<div class="chart" ref="chartRef">aaa</div>
</div>
<div>
<div class="chart" ref="chartRef">aaa</div>
</div>
</template>


<script setup lang="ts">
import { onMounted, shallowRef, ref } from 'vue';
import * as echarts from 'echarts';
@@ -17,28 +16,54 @@ const chart = shallowRef<echarts.ECharts | null>(null);
const chartRef = ref<HTMLElement | null>(null);
defineExpose({
run
run
});
function run(data?: []) {
chart.value!.setOption({
series: [{
type: 'wordCloud',
data: data || []
}]
});
type Config = {
hue: number[];
saturation: number[];
lightness: number[];
alpha: number[];
fontFamily: string;
fontSize: number[];
rotate: number[];
width: number;
height: number;
shape: string;
};
function run(data?: [], config?: Config) {
config && console.log(config.width, config.height);
chart.value!.setOption({
series: [
{
type: 'wordCloud',
data: data || [],
// gridSize: 0,
sizeRange: config?.fontSize,
rotationRange: config?.rotate,
shape: config?.shape,
width: config?.width + '%',
height: config?.height + '%',
layoutAnimation: true,
keepAspect: true
}
],
textStyle: {
fontFamily: config?.fontFamily
}
});
}
onMounted(() => {
chart.value = echarts.init(chartRef.value!);
chart.value = echarts.init(chartRef.value!);
});
</script>


<style scoped lang="scss">
.chart {
border: 1px solid #f2eef2;
width: 800px;
height: 600px;
border: 1px solid #f2eef2;
width: 800px;
height: 600px;
}
</style>

0 comments on commit 2da5745

Please sign in to comment.