mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-04 12:49:14 +08:00
perf: 优化热力图展示，新增全局映射配置
This commit is contained in:
奔跑的面条
parent
efcb25153e
commit
3fc6012145
@ -1,163 +1,104 @@
|
||||
<template>
|
||||
<collapse-item v-if="title" name="标题">
|
||||
<template #header>
|
||||
<n-switch
|
||||
v-show="inChart"
|
||||
v-model:value="title.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="title.show" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="标题">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="title.textStyle.color"
|
||||
size="small"
|
||||
></n-color-picker>
|
||||
<n-color-picker v-model:value="title.textStyle.color" size="small"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="title.textStyle.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="title.textStyle.fontSize" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="副标题">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="title.subtextStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" v-model:value="title.subtextStyle.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="title.subtextStyle.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="title.subtextStyle.fontSize" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item v-if="xAxis" name="X轴">
|
||||
<template #header>
|
||||
<n-switch
|
||||
v-show="inChart"
|
||||
v-model:value="xAxis.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="xAxis.show" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="单位">
|
||||
<setting-item name="名称">
|
||||
<n-input v-model:value="xAxis.name" size="small"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="xAxis.nameTextStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" v-model:value="xAxis.nameTextStyle.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.nameTextStyle.fontSize"
|
||||
:min="12"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="xAxis.nameTextStyle.fontSize" :min="12" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="偏移量">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.nameGap"
|
||||
:min="5"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="xAxis.nameGap" :min="5" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch
|
||||
v-model:value="xAxis.axisLabel.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="xAxis.axisLabel.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="xAxis.axisLabel.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" v-model:value="xAxis.axisLabel.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.axisLabel.fontSize"
|
||||
:min="8"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="xAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="轴线">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="xAxis.axisLine.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="xAxis.axisLine.lineStyle.color"
|
||||
size="small"
|
||||
></n-color-picker>
|
||||
<n-color-picker v-model:value="xAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.axisLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="xAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="xAxis.position" size="small" :options="axisConfig.xposition"></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="对齐零">
|
||||
<n-space>
|
||||
<n-switch
|
||||
v-model:value="xAxis.axisLine.onZero"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="xAxis.axisLine.onZero" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item v-show="inChart" name="反向">
|
||||
<setting-item name="反向">
|
||||
<n-space>
|
||||
<n-switch v-model:value="xAxis.inverse" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="刻度">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="长度">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.axisTick.length"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="xAxis.axisTick.length" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="分割线">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch
|
||||
v-model:value="xAxis.splitLine.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="xAxis.splitLine.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="xAxis.splitLine.lineStyle.color"
|
||||
size="small"
|
||||
></n-color-picker>
|
||||
<n-color-picker v-model:value="xAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.splitLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="xAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="类型">
|
||||
<n-select
|
||||
@ -166,140 +107,87 @@
|
||||
:options="axisConfig.splitLint.lineStyle.type"
|
||||
></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="xAxis.position"
|
||||
size="small"
|
||||
:options="axisConfig.xposition"
|
||||
></n-select>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item v-if="yAxis" name="Y轴">
|
||||
<template #header>
|
||||
<n-switch
|
||||
v-show="inChart"
|
||||
v-model:value="yAxis.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="yAxis.show" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="单位">
|
||||
<setting-item name="名称">
|
||||
<n-input v-model:value="yAxis.name" size="small"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="yAxis.nameTextStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" v-model:value="yAxis.nameTextStyle.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.nameTextStyle.fontSize"
|
||||
:min="8"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="yAxis.nameTextStyle.fontSize" :min="8" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="偏移量">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.nameGap"
|
||||
:min="5"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="yAxis.nameGap" :min="5" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch
|
||||
v-model:value="yAxis.axisLabel.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="yAxis.axisLabel.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="yAxis.axisLabel.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" v-model:value="yAxis.axisLabel.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.axisLabel.fontSize"
|
||||
:min="8"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="轴线">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="yAxis.axisLine.lineStyle.color"
|
||||
size="small"
|
||||
></n-color-picker>
|
||||
<n-color-picker v-model:value="yAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.axisLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="yAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select v-model:value="yAxis.position" size="small" :options="axisConfig.yposition"></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="对齐零">
|
||||
<n-space>
|
||||
<n-switch
|
||||
v-model:value="yAxis.axisLine.onZero"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="yAxis.axisLine.onZero" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item v-show="inChart" name="反向">
|
||||
<setting-item name="反向">
|
||||
<n-space>
|
||||
<n-switch v-model:value="yAxis.inverse" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="刻度">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="长度">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.axisTick.length"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="yAxis.axisTick.length" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="分割线">
|
||||
<setting-item v-show="inChart" name="展示">
|
||||
<setting-item name="展示">
|
||||
<n-space>
|
||||
<n-switch
|
||||
v-model:value="yAxis.splitLine.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="yAxis.splitLine.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="yAxis.splitLine.lineStyle.color"
|
||||
size="small"
|
||||
></n-color-picker>
|
||||
<n-color-picker v-model:value="yAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.splitLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="yAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="类型">
|
||||
<n-select
|
||||
@ -308,44 +196,72 @@
|
||||
:options="axisConfig.splitLint.lineStyle.type"
|
||||
></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="yAxis.position"
|
||||
size="small"
|
||||
:options="axisConfig.yposition"
|
||||
></n-select>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item v-if="legend" name="图例">
|
||||
<template #header>
|
||||
<n-switch
|
||||
v-show="inChart"
|
||||
v-model:value="legend.show"
|
||||
size="small"
|
||||
></n-switch>
|
||||
<n-switch v-model:value="legend.show" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="图例文字">
|
||||
<setting-item>
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="legend.textStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item v-if="visualMap" name="视觉映射">
|
||||
<template #header>
|
||||
<n-switch v-model:value="visualMap.show" size="small"></n-switch>
|
||||
</template>
|
||||
|
||||
<setting-item-box name="范围">
|
||||
<setting-item name="最小值">
|
||||
<n-input-number v-model:value="visualMap.min" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="最大值">
|
||||
<n-input-number v-model:value="visualMap.max" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="视觉映射">
|
||||
<setting-item name="放置方向">
|
||||
<n-select v-model:value="visualMap.orient" size="small" :options="axisConfig.visualMap.orient"></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="宽度">
|
||||
<n-input-number v-model:value="visualMap.temWidth" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="高度">
|
||||
<n-input-number v-model:value="visualMap.itemHeight" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="反转">
|
||||
<n-space>
|
||||
<n-switch v-model:value="visualMap.inverse" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="拖拽组件实时更新">
|
||||
<n-space>
|
||||
<n-switch v-model:value="visualMap.realtime" size="small"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<global-setting-position :targetData="visualMap"></global-setting-position>
|
||||
<!-- <setting-item-box name="位置">
|
||||
<setting-item name="距离底部">
|
||||
<n-input-number v-model:value="visualMap.bottom" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="距离左侧">
|
||||
<n-input-number v-model:value="visualMap.left" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box> -->
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
@ -374,4 +290,8 @@ const yAxis = computed(() => {
|
||||
const legend = computed(() => {
|
||||
return props.optionData.legend
|
||||
})
|
||||
|
||||
const visualMap = computed(() => {
|
||||
return props.optionData.visualMap
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<setting-item-box name="位置">
|
||||
<setting-item :name="`偏移 X：${targetData.left || 0}px`">
|
||||
<n-input-number v-model:value="targetData.left" size="small" step="10"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item :name="`偏移 Y：${targetData.top || 0}px`">
|
||||
<n-input-number v-model:value="targetData.top" size="small" step="10"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
type positionType = {
|
||||
top?: number | string | null
|
||||
left?: number | string | null
|
||||
right?: number | string | null
|
||||
bottom?: number | string | null
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
targetData: {
|
||||
type: Object as PropType<positionType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -5,6 +5,9 @@ import CollapseItem from './CollapseItem.vue'
|
||||
|
||||
// 全局配置属性
|
||||
import GlobalSetting from './GlobalSetting.vue'
|
||||
// 全局配置属性-位置
|
||||
import GlobalSettingPosition from './GlobalSettingPosition.vue'
|
||||
|
||||
// 名称
|
||||
import NameSetting from './NameSetting.vue'
|
||||
// 方向
|
||||
@ -14,4 +17,4 @@ import SizeSetting from './SizeSetting.vue'
|
||||
// 样式
|
||||
import StylesSetting from './StylesSetting.vue'
|
||||
|
||||
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting }
|
||||
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting }
|
||||
|
||||
@ -1,40 +1,56 @@
|
||||
export const axisConfig = {
|
||||
// X轴位置
|
||||
xposition: [
|
||||
{
|
||||
label: 'top',
|
||||
label: '顶部',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: 'bottom',
|
||||
label: '底部',
|
||||
value: 'bottom'
|
||||
}
|
||||
],
|
||||
// Y轴位置
|
||||
yposition: [
|
||||
{
|
||||
label: 'left',
|
||||
label: '左侧',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: 'right',
|
||||
label: '右侧',
|
||||
value: 'right'
|
||||
}
|
||||
],
|
||||
// 线条
|
||||
splitLint: {
|
||||
lineStyle: {
|
||||
type: [
|
||||
{
|
||||
label: 'solid',
|
||||
label: '实线',
|
||||
value: 'solid'
|
||||
},
|
||||
{
|
||||
label: 'dashed',
|
||||
label: '虚线',
|
||||
value: 'dashed'
|
||||
},
|
||||
{
|
||||
label: 'dotted',
|
||||
label: '点线',
|
||||
value: 'dotted'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 视觉映射
|
||||
visualMap: {
|
||||
orient: [
|
||||
{
|
||||
label: '竖直',
|
||||
value: 'vertical'
|
||||
},
|
||||
{
|
||||
label: '水平',
|
||||
value: 'horizontal'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
@ -36,8 +38,6 @@
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
|
||||
<SettingItemBox name="图形">
|
||||
<SettingItem name="颜色">
|
||||
@ -25,8 +27,6 @@
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
@ -24,8 +26,6 @@
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
@ -24,8 +26,6 @@
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
@ -24,8 +26,6 @@
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
@ -58,8 +60,6 @@
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,65 +1,63 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<div>
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="省份" :alone="true">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦颜色（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦阴影（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标记" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="省份" :alone="true">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦颜色（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦阴影（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标记" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"> </global-setting>
|
||||
<global-setting :optionData="optionData"> </global-setting>
|
||||
<!-- 漏斗图 -->
|
||||
<collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图`" expanded>
|
||||
<setting-item-box name="排序" alone>
|
||||
|
||||
@ -1,55 +1,48 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { HeatmapConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import {cloneDeep} from 'lodash'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend']
|
||||
export const includes = ['xAxis', 'yAxis']
|
||||
|
||||
export const option = {
|
||||
tooltip: {},
|
||||
legend: {},
|
||||
dataset: { ...dataJson },
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
xAxis: {
|
||||
show:false,
|
||||
type: 'category',
|
||||
data: dataJson.xAxis
|
||||
},
|
||||
yAxis: {
|
||||
show:false,
|
||||
type: 'category',
|
||||
data: dataJson.yAxis
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
visualMap: {
|
||||
show: true,
|
||||
min: 0,
|
||||
max: 1,
|
||||
max: 10,
|
||||
itemWidth: 20,
|
||||
itemHeight: 140,
|
||||
calculable: true,
|
||||
realtime: false,
|
||||
orient: 'horizontal',
|
||||
inRange: {
|
||||
color: [
|
||||
'#313695',
|
||||
'#4575b4',
|
||||
'#74add1',
|
||||
'#abd9e9',
|
||||
'#e0f3f8',
|
||||
'#ffffbf',
|
||||
'#fee090',
|
||||
'#fdae61',
|
||||
'#f46d43',
|
||||
'#d73027',
|
||||
'#a50026'
|
||||
]
|
||||
color: ['#4661c2', '#263253']
|
||||
}
|
||||
},
|
||||
series:[
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'heatmap',
|
||||
data: dataJson.seriesData,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: '#333',
|
||||
borderWidth: 1
|
||||
borderWidth: 1,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
progressive: 1000,
|
||||
@ -64,4 +57,4 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
<CollapseItem name="热力图" :expanded="true">
|
||||
<SettingItemBox name="拖拽手柄" :alone="true">
|
||||
<SettingItem name="">
|
||||
<n-switch v-model:value="heatMapConfig.visualMap.calculable" size="small" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实时更新" :alone="true">
|
||||
<n-switch v-model:value="heatMapConfig.visualMap.realtime" size="small" />
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
import image from '@/assets/images/chart/charts/heatmap.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const HeatmapConfig: ConfigType = {
|
||||
@ -10,5 +10,6 @@ export const HeatmapConfig: ConfigType = {
|
||||
category: ChatCategoryEnum.MORE,
|
||||
categoryName: ChatCategoryEnumName.MORE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="雷达" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem>
|
||||
@ -12,10 +11,15 @@
|
||||
<n-checkbox v-model:checked="radarConfig.splitLine.show">分割线</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem name="雷达形状">
|
||||
<n-select v-model:value="radarConfig.shape" size="small" :options="RadarShapeEnumList" placeholder="选择形状" />
|
||||
<n-select
|
||||
v-model:value="radarConfig.shape"
|
||||
size="small"
|
||||
:options="RadarShapeEnumList"
|
||||
placeholder="选择形状"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
|
||||
<SettingItemBox name="坐标轴">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="radarConfig.axisLine.show">轴线</n-checkbox>
|
||||
@ -45,7 +49,7 @@
|
||||
></n-slider>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
|
||||
|
||||
<SettingItemBox name="偏移">
|
||||
<setting-item :name="`X 轴值：${radarProp.center[0]}%`">
|
||||
<n-slider
|
||||
|
||||
@ -10,14 +10,17 @@
|
||||
<!-- Echarts 全局设置 -->
|
||||
<SettingItemBox name="进度条">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.data[0].itemStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.data[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="阴影模糊等级">
|
||||
<n-input-number v-model:value="item.data[0].itemStyle.shadowBlur" :min="0" :max="50" :step="1" size="small" placeholder="阴影模糊等级">
|
||||
<n-input-number
|
||||
v-model:value="item.data[0].itemStyle.shadowBlur"
|
||||
:min="0"
|
||||
:max="50"
|
||||
:step="1"
|
||||
size="small"
|
||||
placeholder="阴影模糊等级"
|
||||
>
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="阴影颜色">
|
||||
@ -31,28 +34,32 @@
|
||||
<!-- 中心标题 -->
|
||||
<SettingItemBox v-if="config.title" name="标题">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="config.title.textStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number v-model:value="config.title.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="字体大小">
|
||||
<n-input-number
|
||||
v-model:value="config.title.textStyle.fontSize"
|
||||
:min="0"
|
||||
:step="1"
|
||||
size="small"
|
||||
placeholder="字体大小"
|
||||
>
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<!-- 其他样式 -->
|
||||
<SettingItemBox name="轨道样式">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.data[1].itemStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="阴影模糊等级">
|
||||
<n-input-number v-model:value="item.data[1].itemStyle.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影模糊等级">
|
||||
<n-input-number
|
||||
v-model:value="item.data[1].itemStyle.shadowBlur"
|
||||
:min="0"
|
||||
:step="1"
|
||||
size="small"
|
||||
placeholder="阴影模糊等级"
|
||||
>
|
||||
</n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="阴影颜色">
|
||||
@ -69,11 +76,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
// 以下是封装的设置模块布局组件，具体效果可在官网查看
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
},
|
||||
"position": "bottom",
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#B9B8CE",
|
||||
"width": 1
|
||||
|
||||
Loading…
Reference in New Issue
Block a user