mirror of
https://gitee.com/dromara/go-view.git
synced 2026-05-12 00:00:01 +08:00
perf: 优化热力图展示,新增全局映射配置
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user