github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化热力图展示，新增全局映射配置

Browse Source
This commit is contained in:
奔跑的面条
2022-09-17 11:18:57 +08:00
parent efcb25153e
commit 3fc6012145
20 changed files with 492 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Charts/Bars/BarCommon/config.vue
+2 -2
View File
@@ -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">
src/packages/components/Charts/Bars/BarCrossrange/config.vue
+2 -2
View File
@@ -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">
src/packages/components/Charts/Lines/LineCommon/config.vue
+2 -2
View File
@@ -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">
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
+2 -2
View File
@@ -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">
src/packages/components/Charts/Lines/LineGradients/config.vue
+2 -2
View File
@@ -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">
src/packages/components/Charts/Lines/LineLinearSingle/config.vue
+2 -2
View File
@@ -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">
src/packages/components/Charts/Maps/MapChina/config.vue
+58 -60
View File
@@ -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">
src/packages/components/Charts/Mores/Funnel/config.vue
+1 -1
View File
@@ -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>
src/packages/components/Charts/Mores/Heatmap/config.ts
+20 -27
View File
@@ -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)
}
}
src/packages/components/Charts/Mores/Heatmap/config.vue
+1 -11
View File
@@ -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>
src/packages/components/Charts/Mores/Heatmap/data.json
+198 -3
View File
File diff suppressed because one or more lines are too long
src/packages/components/Charts/Mores/Heatmap/index.ts
+2 -1
View File
@@ -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
}
src/packages/components/Charts/Mores/Radar/config.vue
+9 -5
View File
@@ -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
src/packages/components/Charts/Pies/PieCircle/config.vue
+26 -23
View File
@@ -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({
src/packages/components/Charts/Pies/PieCommon/config.vue
+1 -1
View File
@@ -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">