初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<script setup lang="ts">
import { computed } from 'vue';
 
const props = defineProps(['chart', 'dataSetList']);
 
const barStyleList = [
  { fullName: '基础', id: 1 },
  { fullName: '堆叠', id: 2 },
  { fullName: '背景', id: 4 },
  { fullName: '对比', id: 5 },
  { fullName: '正负条', id: 6 },
  { fullName: '折柱图', id: 7 },
];
const lineStyleList = [
  { fullName: '基础', id: 1 },
  { fullName: '平滑', id: 2 },
  { fullName: '阶梯', id: 3 },
  { fullName: '堆叠', id: 4 },
];
const pieStyleList = [
  { fullName: '饼图', id: 1 },
  { fullName: '环形', id: 2 },
];
const radarStyleList = [
  { fullName: '基础', id: 1 },
  { fullName: '圆形', id: 2 },
];
 
const getStyleTypeOptions = computed(() => {
  const chartType = props.chart.chartType;
  if (chartType == 'bar') return barStyleList.filter((o) => o.id != 7);
  if (chartType == 'line') return lineStyleList;
  if (chartType == 'pie') return pieStyleList;
  if (chartType == 'radar') return radarStyleList;
  return [];
});
 
function getTitle() {
  const chartType = props.chart.chartType;
  if (chartType == 'bar') return '柱状图设置';
  if (chartType == 'line') return '折线图设置';
  if (chartType == 'pie') return '饼图设置';
  if (chartType == 'radar') return '雷达图设置';
}
 
function getBarTypeList() {
  const list: any = [];
  if (props.chart.styleType == 7 && !props.chart.bar.barTypeList.length && props.dataSetList.length) {
    for (let index = 0; index < props.dataSetList.length; index++) {
      const element = props.dataSetList[index];
      for (let index = 0; index < element.children.length; index++) {
        const ele = element.children[index];
        list.push({ id: ele.jnpfId, title: ele.fullName, type: 'bar' });
      }
    }
    props.chart.bar.barTypeList = list;
  }
}
</script>
<template>
  <a-collapse-panel>
    <template #header>{{ getTitle() }}</template>
    <a-form-item label="风格类型">
      <jnpf-select v-model:value="chart.styleType" :options="getStyleTypeOptions" placeholder="请选择" show-search @change="getBarTypeList" />
    </a-form-item>
    <template v-if="chart.chartType == 'line'">
      <a-form-item label="面积堆积">
        <a-switch v-model:checked="chart.areaStyle" />
      </a-form-item>
      <a-form-item label="线条宽度">
        <a-slider v-model:value="chart.line.width" :min="1" :max="20" />
      </a-form-item>
      <a-form-item label="点的大小">
        <a-slider v-model:value="chart.line.symbolSize" :max="20" />
      </a-form-item>
    </template>
    <template v-if="chart.chartType == 'pie'">
      <a-form-item label="南丁格尔图">
        <a-switch v-model:checked="chart.pie.roseType" />
      </a-form-item>
      <a-form-item label="自动排序">
        <a-switch v-model:checked="chart.pie.sortable" />
      </a-form-item>
      <a-form-item label="不展示零">
        <a-switch v-model:checked="chart.pie.showZero" />
      </a-form-item>
    </template>
    <template v-if="chart.chartType == 'radar'">
      <a-form-item label="指示器大小">
        <a-input-number v-model:value="chart.radar.axisName.fontSize" :min="12" :max="25" />
      </a-form-item>
      <a-form-item label="指示器加粗">
        <a-switch v-model:checked="chart.radar.axisName.fontWeight" />
      </a-form-item>
      <a-form-item label="指示器颜色">
        <jnpf-color-picker v-model:value="chart.radar.axisName.color" size="small" />
      </a-form-item>
      <a-form-item label="区域透明度">
        <a-slider v-model:value="chart.seriesAreaStyleOpacity" :max="1" :step="0.1" />
      </a-form-item>
    </template>
  </a-collapse-panel>
</template>