feat: 完善环状热图

src/components/CircularHeatmap/components/config.vue

+<template>
+    <div class="form-container">
+        <h3 class="type content">画布</h3>
+        <div class="form-item">
+            <span>宽：</span>
+            <input type="text" v-model="dynamic_parameter.chart_width" />
+        </div>
+        <div class="form-item">
+            <span>高：</span>
+            <input type="text" v-model="dynamic_parameter.chart_height" />
+        </div>
+        <h3 class="type content">文本</h3>
+        <div class="form-item">
+            <span>标题：</span>
+            <input type="text" v-model="dynamic_parameter.title" />
+        </div>
+        <div class="form-item">
+            <span>字体：</span>
+            <input type="text" v-model="dynamic_parameter.title_font_family" />
+        </div>
+        <div class="form-item">
+            <span>字号：</span>
+            <input type="text" v-model="dynamic_parameter.title_font_size" />
+        </div>
+        <div class="form-item">
+            <span>字体颜色：</span>
+            <input type="text" v-model="dynamic_parameter.title_font_color" />
+        </div>
+        <div class="form-item">
+            <span>字体加粗：</span>
+            <input type="checkbox" v-model="dynamic_parameter.title_font_weight" />
+        </div>
+        <div class="form-item">
+            <span>斜体：</span>
+            <input type="checkbox" v-model="dynamic_parameter.title_font_style" />
+        </div>
+
+        <h3 class="type content">图例</h3>
+        <div class="form-item">
+            <span>显示图例：</span>
+            <input type="checkbox" v-model="dynamic_parameter.show_legend" />
+        </div>
+        <div class="btn">
+            <button @click="submit">提交</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue';
+import PubSub from 'pubsub-js';
+
+//动态图参数,固定参数
+const dynamic_parameter = reactive({
+    //长宽间距
+    chart_width: 500,
+    chart_height: 500,
+    margin_top: 60,
+    margin_right: 60,
+    margin_bottom: 60,
+    margin_left: 60,
+    //标题配置
+    title: '环状热图',
+    title_font_family: 'Arial',
+    title_font_weight: true,
+    title_font_size: 20,
+    title_font_color: '#333333',
+    title_font_style: false,
+    //横轴标题
+    xtitle_font_family: 'Arial',
+    xtitle_font_weight: false,
+    xtitle_font_style: false,
+    xtitle_font_size: 16,
+    xtitle_font_color: '#333333',
+    //纵轴标题
+    ytitle_font_family: 'Arial',
+    ytitle_font_weight: false,
+    ytitle_font_style: false,
+    ytitle_font_size: 16,
+    ytitle_font_color: '#333333',
+
+    //颜色设置
+    data_color_list: [],
+
+    //图例
+    show_legend: true,
+    legend_position: '0,0',
+    //坐标轴
+    show_x_axis: true,
+    show_x_line: true,
+    show_x_tickMarks: true,
+    show_x_gridLine: false,
+    show_x_title: true,
+    x_title: '',
+    x_tickMarks_color: '#333333',
+    x_tickMarks_length: '5',
+
+    show_y_axis: true,
+    show_y_line: true,
+    show_y_tickMarks: true,
+    show_y_gridLine: false,
+    show_y_title: true,
+    y_title: '',
+    y_tickMarks_color: '#333333',
+    y_tickMarks_length: '5',
+
+    //节点相关的参数,可能还会有更多
+    node_id: null, //节点id
+    node_color: null, //节点颜色
+    is_delect_node: false, //是否删除节点
+    node_search_name: null, //节点名称搜索
+    node_search_color: '#FF0404', //节点搜索后的颜色
+    node_edit_name: null, //修改节点名称
+    node_height: 100, //节点大小
+    path_id: null
+});
+
+const submit = () => {
+    PubSub.publish('options', dynamic_parameter);
+};
+
+onMounted(() => {
+    submit();
+});
+</script>
+
+<style scoped>
+.form-item span {
+    display: inline-block;
+    width: 100px;
+    text-align: left;
+}
+.btn {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

src/components/CircularHeatmap/index.vue

+<template>
+    <div class="chart-container">
+        <Chart />
+        <Config />
+    </div>
+</template>
+
+<script setup>
+import Chart from './components/chart.vue';
+import Config from './components/config.vue';
+</script>
+
+<style scoped>
+.chart-container {
+    display: flex;
+}
+</style>

src/components/Test/index.vue

@@ -303,7 +303,7 @@ const generateTree = (svg) => {
 };
 
 onMounted(() => {
-    generateChart();
+    // generateChart();
 });
 </script>
 

src/views/home/index.vue

@@ -10,15 +10,16 @@
 </template>
 <script setup>
 import { ref, shallowRef } from 'vue';
-import Test from '../../components/Test/index.vue';
 import LinearFitting from '../../components/LinearFitting/index.vue';
 import PcaAnalysis from '../../components/PcaAnalysis/index.vue';
 import MsDimplot from '../../components/MsDimplot/index.vue';
 import BeeColonyDiagram from '../../components/BeeColonyDiagram/index.vue';
 import CorrelationAnalysis from '../../components/CorrelationAnalysis/index.vue';
 import ClusterHeatmap from '../../components/ClusterHeatmap/index.vue';
+import CircularHeatmap from '../../components/CircularHeatmap/index.vue';
+import Test from '../../components/Test/index.vue';
 
-const chartCurrent = ref(0);
+const chartCurrent = ref(7);
 
 const chartList = shallowRef([
     { title: '线性拟合图', value: 1, comName: LinearFitting },
@@ -27,7 +28,8 @@ const chartList = shallowRef([
     { title: '蜂群图', value: 4, comName: BeeColonyDiagram },
     { title: '相关性分析', value: 5, comName: CorrelationAnalysis },
     { title: '聚类热图', value: 6, comName: ClusterHeatmap },
-    { title: 'test', value: 0, comName: Test },
+    { title: '环状热图', value: 7, comName: CircularHeatmap },
+    { title: 'test', value: 0, comName: Test }
 ]);
 
 const getDefaultShowChart = () => {