feat: 大屏
This commit is contained in:
ygx
56
src/packages/chartConfiguration/echarts/axis.ts
Normal file
56
src/packages/chartConfiguration/echarts/axis.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
export const axisConfig = {
|
||||
// X轴位置
|
||||
xposition: [
|
||||
{
|
||||
label: '顶部',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: '底部',
|
||||
value: 'bottom'
|
||||
}
|
||||
],
|
||||
// Y轴位置
|
||||
yposition: [
|
||||
{
|
||||
label: '左侧',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '右侧',
|
||||
value: 'right'
|
||||
}
|
||||
],
|
||||
// 线条
|
||||
splitLint: {
|
||||
lineStyle: {
|
||||
type: [
|
||||
{
|
||||
label: '实线',
|
||||
value: 'solid'
|
||||
},
|
||||
{
|
||||
label: '虚线',
|
||||
value: 'dashed'
|
||||
},
|
||||
{
|
||||
label: '点线',
|
||||
value: 'dotted'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 视觉映射
|
||||
visualMap: {
|
||||
orient: [
|
||||
{
|
||||
label: '竖直',
|
||||
value: 'vertical'
|
||||
},
|
||||
{
|
||||
label: '水平',
|
||||
value: 'horizontal'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
4
src/packages/chartConfiguration/echarts/index.ts
Normal file
4
src/packages/chartConfiguration/echarts/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export * from './axis'
|
||||
export * from './line'
|
||||
export * from './label'
|
||||
export * from './legend'
|
||||
13
src/packages/chartConfiguration/echarts/label.ts
Normal file
13
src/packages/chartConfiguration/echarts/label.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export const labelConfig = {
|
||||
position: [
|
||||
{ label: '外侧', value: 'outside' },
|
||||
{ label: '内部', value: 'inside' },
|
||||
{ label: '中心', value: 'center' }
|
||||
],
|
||||
fontWeight: [
|
||||
{ label: '正常', value: 'normal' },
|
||||
{ label: '普通加粗', value: 'bold' },
|
||||
{ label: '加粗', value: 'bolder' },
|
||||
{ label: '细体', value: 'lighter' }
|
||||
]
|
||||
}
|
||||
70
src/packages/chartConfiguration/echarts/legend.ts
Normal file
70
src/packages/chartConfiguration/echarts/legend.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
export const legendConfig = {
|
||||
// X轴位置
|
||||
lengendX: [
|
||||
{
|
||||
label: '靠左',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '居中',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '靠右',
|
||||
value: 'right'
|
||||
}
|
||||
],
|
||||
// y轴位置
|
||||
lengendY: [
|
||||
{
|
||||
label: '靠上',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: '居中',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: '靠下',
|
||||
value: 'bottom'
|
||||
}
|
||||
],
|
||||
// 排列方向
|
||||
orient: [
|
||||
{
|
||||
label: '水平',
|
||||
value: 'horizontal'
|
||||
},
|
||||
{
|
||||
label: '垂直',
|
||||
value: 'vertical'
|
||||
}
|
||||
],
|
||||
// 形状
|
||||
shape: [
|
||||
{
|
||||
label: '圆形',
|
||||
value: 'circle'
|
||||
},
|
||||
{
|
||||
label: '方形',
|
||||
value: 'rect'
|
||||
},
|
||||
{
|
||||
label: '圆角方形',
|
||||
value: 'roundRect'
|
||||
},
|
||||
{
|
||||
label: '三角形',
|
||||
value: 'triangle'
|
||||
},
|
||||
{
|
||||
label: '钢笔形',
|
||||
value: 'pin'
|
||||
},
|
||||
{
|
||||
label: '箭头形',
|
||||
value: 'arrow'
|
||||
}
|
||||
]
|
||||
}
|
||||
18
src/packages/chartConfiguration/echarts/line.ts
Normal file
18
src/packages/chartConfiguration/echarts/line.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export const lineConf = {
|
||||
lineStyle: {
|
||||
type: [
|
||||
{
|
||||
label: 'solid',
|
||||
value: 'solid'
|
||||
},
|
||||
{
|
||||
label: 'dashed',
|
||||
value: 'dashed'
|
||||
},
|
||||
{
|
||||
label: 'dotted',
|
||||
value: 'dotted'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
3
src/packages/chartConfiguration/vcharts/index.ts
Normal file
3
src/packages/chartConfiguration/vcharts/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './legends'
|
||||
export * from './label'
|
||||
export * from './style'
|
||||
120
src/packages/chartConfiguration/vcharts/label.ts
Normal file
120
src/packages/chartConfiguration/vcharts/label.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
export const labelConfig = {
|
||||
position: [
|
||||
{
|
||||
label: '外部',
|
||||
value: 'outside'
|
||||
},
|
||||
{
|
||||
label: '内部',
|
||||
value: 'inside'
|
||||
},
|
||||
{
|
||||
label: '内部-外',
|
||||
value: 'inside-outer'
|
||||
},
|
||||
{
|
||||
label: '内部-里',
|
||||
value: 'inside-inner'
|
||||
},
|
||||
{
|
||||
label: '内部-居中',
|
||||
value: 'inside-center'
|
||||
}
|
||||
],
|
||||
barPosition: [
|
||||
{
|
||||
label: '外部',
|
||||
value: 'outside'
|
||||
},
|
||||
{
|
||||
label: '内部',
|
||||
value: 'inside'
|
||||
},
|
||||
{
|
||||
label: '顶部',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: '底部',
|
||||
value: 'bottom'
|
||||
},
|
||||
{
|
||||
label: '左侧',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '右侧',
|
||||
value: 'right'
|
||||
},
|
||||
{
|
||||
label: '内部-顶',
|
||||
value: 'inside-top'
|
||||
},
|
||||
{
|
||||
label: '内部-底',
|
||||
value: 'inside-bottom'
|
||||
},
|
||||
{
|
||||
label: '内部-右',
|
||||
value: 'inside-right'
|
||||
},
|
||||
{
|
||||
label: '内部-左',
|
||||
value: 'inside-left'
|
||||
},
|
||||
{
|
||||
label: '顶部-右',
|
||||
value: 'top-right'
|
||||
},
|
||||
{
|
||||
label: '顶部-左',
|
||||
value: 'top-left'
|
||||
},
|
||||
{
|
||||
label: '底部-右',
|
||||
value: 'bottom-right'
|
||||
},
|
||||
{
|
||||
label: '底部-左',
|
||||
value: 'bottom-left'
|
||||
}
|
||||
],
|
||||
linePosition: [
|
||||
{
|
||||
label: '顶部',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: '底部',
|
||||
value: 'bottom'
|
||||
},
|
||||
{
|
||||
label: '左侧',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '右侧',
|
||||
value: 'right'
|
||||
},
|
||||
{
|
||||
label: '顶部-右',
|
||||
value: 'top-right'
|
||||
},
|
||||
{
|
||||
label: '顶部-左',
|
||||
value: 'top-left'
|
||||
},
|
||||
{
|
||||
label: '底部-右',
|
||||
value: 'bottom-right'
|
||||
},
|
||||
{
|
||||
label: '底部-左',
|
||||
value: 'bottom-left'
|
||||
},
|
||||
{
|
||||
label: '居中',
|
||||
value: 'center'
|
||||
}
|
||||
]
|
||||
}
|
||||
99
src/packages/chartConfiguration/vcharts/legends.ts
Normal file
99
src/packages/chartConfiguration/vcharts/legends.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
export const legendsConfig = {
|
||||
// 位置
|
||||
orient: [
|
||||
{
|
||||
label: '顶部',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: '底部',
|
||||
value: 'bottom'
|
||||
},
|
||||
{
|
||||
label: '左侧',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '右侧',
|
||||
value: 'right'
|
||||
}
|
||||
],
|
||||
// 对齐方式
|
||||
position: [
|
||||
{
|
||||
label: '起始',
|
||||
value: 'start'
|
||||
},
|
||||
{
|
||||
label: '居中',
|
||||
value: 'middle'
|
||||
},
|
||||
{
|
||||
label: '末尾',
|
||||
value: 'end'
|
||||
}
|
||||
],
|
||||
// 每一项的图例位置
|
||||
align: [
|
||||
{
|
||||
label: '居左',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: '居右',
|
||||
value: 'right'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const fontStyleConfig = {
|
||||
// 字重
|
||||
fontWeight: [
|
||||
{
|
||||
label: '100',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
label: '200',
|
||||
value: 200
|
||||
},
|
||||
{
|
||||
label: '300',
|
||||
value: 300
|
||||
},
|
||||
{
|
||||
label: '400',
|
||||
value: 400
|
||||
},
|
||||
{
|
||||
label: '500',
|
||||
value: 500
|
||||
},
|
||||
{
|
||||
label: '600',
|
||||
value: 600
|
||||
},
|
||||
{
|
||||
label: '正常',
|
||||
value: "normal"
|
||||
},
|
||||
{
|
||||
label: '加粗',
|
||||
value: "bold"
|
||||
}
|
||||
],
|
||||
fontFamily: [
|
||||
{
|
||||
label: '宋体',
|
||||
value: 'SimSun'
|
||||
},
|
||||
{
|
||||
label: '黑体',
|
||||
value: 'SimHei'
|
||||
},
|
||||
{
|
||||
label: '楷体',
|
||||
value: '楷体'
|
||||
}
|
||||
]
|
||||
}
|
||||
150
src/packages/chartConfiguration/vcharts/style.ts
Normal file
150
src/packages/chartConfiguration/vcharts/style.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
export const styleConfig = {
|
||||
texture: [
|
||||
{
|
||||
label: '无纹理',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '圆形',
|
||||
value: 'circle'
|
||||
},
|
||||
{
|
||||
label: '钻石',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
label: '矩形',
|
||||
value: 'rect'
|
||||
},
|
||||
{
|
||||
label: '竖线',
|
||||
value: 'horizontal-line'
|
||||
},
|
||||
{
|
||||
label: '横线',
|
||||
value: 'vertical-line'
|
||||
},
|
||||
{
|
||||
label: '右向左斜线',
|
||||
value: 'bias-rl'
|
||||
},
|
||||
{
|
||||
label: '左向右斜线',
|
||||
value: 'bias-lr'
|
||||
},
|
||||
{
|
||||
label: '格子',
|
||||
value: 'grid'
|
||||
}
|
||||
],
|
||||
curveType: [
|
||||
{
|
||||
label: '线性',
|
||||
value: 'linear'
|
||||
},
|
||||
{
|
||||
label: '平滑',
|
||||
value: 'monotone'
|
||||
},
|
||||
{
|
||||
label: '平滑趋近X',
|
||||
value: 'monotoneX'
|
||||
},
|
||||
{
|
||||
label: '台阶',
|
||||
value: 'step'
|
||||
},
|
||||
{
|
||||
label: '连线闭合',
|
||||
value: 'catmullRom'
|
||||
},
|
||||
{
|
||||
label: '顺滑闭合',
|
||||
value: 'catmullRomClosed'
|
||||
}
|
||||
],
|
||||
lineCap: [
|
||||
{
|
||||
label: '默认',
|
||||
value: 'butt'
|
||||
},
|
||||
{
|
||||
label: '圆形',
|
||||
value: 'round'
|
||||
},
|
||||
{
|
||||
label: '方形',
|
||||
value: 'square'
|
||||
}
|
||||
],
|
||||
symbolType: [
|
||||
{
|
||||
label: '圆形',
|
||||
value: 'circle'
|
||||
},
|
||||
{
|
||||
label: '方形',
|
||||
value: 'rect'
|
||||
},
|
||||
{
|
||||
label: '菱形',
|
||||
value: 'diamond'
|
||||
},
|
||||
{
|
||||
label: '三角形',
|
||||
value: 'square'
|
||||
},
|
||||
{
|
||||
label: '指向向上',
|
||||
value: 'arrow'
|
||||
},
|
||||
{
|
||||
label: '指向向左',
|
||||
value: 'arrow2Left'
|
||||
},
|
||||
{
|
||||
label: '箭头向右',
|
||||
value: 'arrow2Right'
|
||||
},
|
||||
{
|
||||
label: '瘦箭头向上',
|
||||
value: 'wedge'
|
||||
},
|
||||
{
|
||||
label: '箭头向上',
|
||||
value: 'triangle'
|
||||
},
|
||||
{
|
||||
label: '箭头向下',
|
||||
value: 'triangleDown'
|
||||
},
|
||||
{
|
||||
label: '箭头向右',
|
||||
value: 'triangleRight'
|
||||
},
|
||||
{
|
||||
label: '箭头向左',
|
||||
value: 'triangleLeft'
|
||||
},
|
||||
{
|
||||
label: '星星',
|
||||
value: 'star'
|
||||
},
|
||||
{
|
||||
label: 'y字形物',
|
||||
value: 'wye'
|
||||
},
|
||||
{
|
||||
label: '矩形',
|
||||
value: 'rect'
|
||||
},
|
||||
{
|
||||
label: '圆角矩形',
|
||||
value: 'rectRound'
|
||||
},
|
||||
{
|
||||
label: '扁平矩形',
|
||||
value: 'roundLine'
|
||||
}
|
||||
]
|
||||
}
|
||||
48
src/packages/components/Charts/Bars/BarCommon/config.ts
Normal file
48
src/packages/components/Charts/Bars/BarCommon/config.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { BarCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 2
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = BarCommonConfig.key
|
||||
public chartConfig = cloneDeep(BarCommonConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
62
src/packages/components/Charts/Bars/BarCommon/config.vue
Normal file
62
src/packages/components/Charts/Bars/BarCommon/config.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<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="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
40
src/packages/components/Charts/Bars/BarCommon/data.json
Normal file
40
src/packages/components/Charts/Bars/BarCommon/data.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Bars/BarCommon/index.ts
Normal file
14
src/packages/components/Charts/Bars/BarCommon/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const BarCommonConfig: ConfigType = {
|
||||
key: 'BarCommon',
|
||||
chartKey: 'VBarCommon',
|
||||
conKey: 'VCBarCommon',
|
||||
title: '柱状图',
|
||||
category: ChatCategoryEnum.BAR,
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'bar_x.png'
|
||||
}
|
||||
97
src/packages/components/Charts/Bars/BarCommon/index.vue
Normal file
97
src/packages/components/Charts/Bars/BarCommon/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import config, { includes, seriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
try {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
// 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
|
||||
// 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
|
||||
const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1;
|
||||
const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
|
||||
const dimensionsGap = newDimensions - oldDimensions;
|
||||
if (dimensionsGap < 0) {
|
||||
props.chartConfig.option.series.splice(newDimensions - 1)
|
||||
} else if (dimensionsGap > 0) {
|
||||
if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
|
||||
props.chartConfig.option.series=[]
|
||||
}
|
||||
for (let i = 0; i < dimensionsGap; i++) {
|
||||
seriesArr.push(cloneDeep(seriesItem))
|
||||
}
|
||||
props.chartConfig.option.series.push(...seriesArr)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
48
src/packages/components/Charts/Bars/BarCrossrange/config.ts
Normal file
48
src/packages/components/Charts/Bars/BarCrossrange/config.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { BarCrossrangeConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: null,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = BarCrossrangeConfig.key
|
||||
public chartConfig = cloneDeep(BarCrossrangeConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
75
src/packages/components/Charts/Bars/BarCrossrange/config.vue
Normal file
75
src/packages/components/Charts/Bars/BarCrossrange/config.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<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="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number
|
||||
v-model:value="item.itemStyle.borderRadius"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
40
src/packages/components/Charts/Bars/BarCrossrange/data.json
Normal file
40
src/packages/components/Charts/Bars/BarCrossrange/data.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Bars/BarCrossrange/index.ts
Normal file
14
src/packages/components/Charts/Bars/BarCrossrange/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const BarCrossrangeConfig: ConfigType = {
|
||||
key: 'BarCrossrange',
|
||||
chartKey: 'VBarCrossrange',
|
||||
conKey: 'VCBarCrossrange',
|
||||
title: '横向柱状图',
|
||||
category: ChatCategoryEnum.BAR,
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'bar_y.png'
|
||||
}
|
||||
83
src/packages/components/Charts/Bars/BarCrossrange/index.vue
Normal file
83
src/packages/components/Charts/Bars/BarCrossrange/index.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, computed, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes, seriesItem } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
try {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(cloneDeep(seriesItem))
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
74
src/packages/components/Charts/Bars/BarLine/config.ts
Normal file
74
src/packages/components/Charts/Bars/BarLine/config.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { BarLineConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
// 柱状折线组合图 分别定义series
|
||||
// 写死name可以定义legend显示的名称
|
||||
export const barSeriesItem = {
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 2
|
||||
}
|
||||
}
|
||||
|
||||
export const lineSeriesItem = {
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
itemStyle: {
|
||||
borderWidth: 1
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
color: null
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: null
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [barSeriesItem, lineSeriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = BarLineConfig.key
|
||||
public chartConfig = cloneDeep(BarLineConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
138
src/packages/components/Charts/Bars/BarLine/config.vue
Normal file
138
src/packages/components/Charts/Bars/BarLine/config.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
:name="`系列${index + 1}`"
|
||||
:expanded="true"
|
||||
>
|
||||
<template #header>
|
||||
<n-text class="go-fs-13" depth="3">
|
||||
{{ item.type == 'bar' ? '「柱状图」' : '「折线图」' }}
|
||||
</n-text>
|
||||
</template>
|
||||
<SettingItemBox name="类型">
|
||||
<SettingItem name="宽度">
|
||||
<n-select
|
||||
:value="item.type"
|
||||
size="small"
|
||||
:options="[
|
||||
{ label: '柱状图', value: 'bar' },
|
||||
{ label: '折线图', value: 'line' }
|
||||
]"
|
||||
@update:value="(value: any) => {
|
||||
updateHandle(item, value)
|
||||
}"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="图形" v-if="item.type == 'bar'">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.barWidth"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="线条" v-if="item.type == 'line'">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.smooth" size="small" />
|
||||
<n-text>曲线</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="tip颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: '顶部', value: 'top' },
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
{ label: '底部', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, toRaw } from 'vue'
|
||||
import { merge, cloneDeep } from 'lodash';
|
||||
|
||||
import GlobalSetting from '@/components/Pages/ChartItemSetting/GlobalSetting.vue'
|
||||
import CollapseItem from '@/components/Pages/ChartItemSetting/CollapseItem.vue'
|
||||
import SettingItemBox from '@/components/Pages/ChartItemSetting/SettingItemBox.vue'
|
||||
import SettingItem from '@/components/Pages/ChartItemSetting/SettingItem.vue'
|
||||
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||
import { barSeriesItem, lineSeriesItem } from './config'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const updateHandle = (item:any, value:string) => {
|
||||
const _label = cloneDeep(toRaw(item.label))
|
||||
lineSeriesItem.label = _label
|
||||
if (value === 'line') {
|
||||
merge(item, lineSeriesItem)
|
||||
} else {
|
||||
merge(item, barSeriesItem)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
src/packages/components/Charts/Bars/BarLine/data.json
Normal file
40
src/packages/components/Charts/Bars/BarLine/data.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "1月",
|
||||
"data1": 104,
|
||||
"data2": 30
|
||||
},
|
||||
{
|
||||
"product": "2月",
|
||||
"data1": 56,
|
||||
"data2": 56
|
||||
},
|
||||
{
|
||||
"product": "3月",
|
||||
"data1": 136,
|
||||
"data2": 36
|
||||
},
|
||||
{
|
||||
"product": "4月",
|
||||
"data1": 86,
|
||||
"data2": 6
|
||||
},
|
||||
{
|
||||
"product": "5月",
|
||||
"data1": 98,
|
||||
"data2": 10
|
||||
},
|
||||
{
|
||||
"product": "6月",
|
||||
"data1": 86,
|
||||
"data2": 70
|
||||
},
|
||||
{
|
||||
"product": "7月",
|
||||
"data1": 77,
|
||||
"data2": 57
|
||||
}
|
||||
]
|
||||
}
|
||||
16
src/packages/components/Charts/Bars/BarLine/index.ts
Normal file
16
src/packages/components/Charts/Bars/BarLine/index.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// 公共类型声明
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
// 当前[信息模块]分类声明
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const BarLineConfig: ConfigType = {
|
||||
key: 'BarLine',
|
||||
chartKey: 'VBarLine',
|
||||
conKey: 'VCBarLine',
|
||||
title: '柱状图 & 折线图',
|
||||
category: ChatCategoryEnum.BAR,
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'bar_line.png'
|
||||
}
|
||||
96
src/packages/components/Charts/Bars/BarLine/index.vue
Normal file
96
src/packages/components/Charts/Bars/BarLine/index.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { isObject, cloneDeep } from 'lodash'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
//引入柱状图 折线图
|
||||
import { BarChart, LineChart } from 'echarts/charts'
|
||||
import config, { includes, barSeriesItem, lineSeriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any, oldData) => {
|
||||
try {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (Array.isArray((newData as any)?.dimensions)) {
|
||||
const seriesArr: typeof barSeriesItem[] = []
|
||||
// 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
|
||||
// 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
|
||||
const oldDimensions =
|
||||
Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
|
||||
const newDimensions = (newData as any).dimensions.length >= 1 ? (newData as any).dimensions.length : 1
|
||||
const dimensionsGap = newDimensions - oldDimensions
|
||||
if (dimensionsGap < 0) {
|
||||
props.chartConfig.option.series.splice(newDimensions - 1)
|
||||
} else if (dimensionsGap > 0) {
|
||||
if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
|
||||
props.chartConfig.option.series = []
|
||||
}
|
||||
for (let i = 0; i < dimensionsGap; i++) {
|
||||
seriesArr.push(cloneDeep(barSeriesItem))
|
||||
}
|
||||
props.chartConfig.option.series.push(...seriesArr)
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
25
src/packages/components/Charts/Bars/CapsuleChart/config.ts
Normal file
25
src/packages/components/Charts/Bars/CapsuleChart/config.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CapsuleChartConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
colors: ['#c4ebad', '#6be6c1', '#a0a7e6', '#96dee8', '#3fb1e3' ],
|
||||
unit: '',
|
||||
itemHeight: 10,
|
||||
valueFontSize: 16,
|
||||
paddingRight: 50,
|
||||
paddingLeft: 50,
|
||||
showValue: true
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = CapsuleChartConfig.key
|
||||
public attr = { ...chartInitConfig, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(CapsuleChartConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
53
src/packages/components/Charts/Bars/CapsuleChart/config.vue
Normal file
53
src/packages/components/Charts/Bars/CapsuleChart/config.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"> </global-setting>
|
||||
<!-- 胶囊柱图 -->
|
||||
<collapse-item name="胶囊柱图" expanded>
|
||||
<SettingItemBox name="布局">
|
||||
<setting-item name="左侧边距">
|
||||
<n-input-number v-model:value="optionData.paddingLeft" :min="10" :step="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="右侧边距">
|
||||
<n-input-number v-model:value="optionData.paddingRight" :min="10" :step="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="每块高度(px)">
|
||||
<n-input-number v-model:value="optionData.itemHeight" :min="0" :step="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="文本">
|
||||
<setting-item name="所有文字大小">
|
||||
<n-input-number v-model:value="optionData.valueFontSize" :min="0" :step="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="单位">
|
||||
<n-input v-model:value="optionData.unit" size="small"></n-input>
|
||||
</setting-item>
|
||||
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showValue" size="small"></n-switch>
|
||||
<n-text>显示数值</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="颜色">
|
||||
<setting-item v-for="(item, index) in optionData.colors" :key="index" :name="`颜色${index}`">
|
||||
<n-color-picker v-model:value="optionData.colors[index]" size="small" :modes="['hex']"></n-color-picker>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option & GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
10
src/packages/components/Charts/Bars/CapsuleChart/data.json
Normal file
10
src/packages/components/Charts/Bars/CapsuleChart/data.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"dimensions": ["name", "value"],
|
||||
"source": [
|
||||
{ "name": "厦门", "value": 20 },
|
||||
{ "name": "南阳", "value": 40 },
|
||||
{ "name": "北京", "value": 60 },
|
||||
{ "name": "上海", "value": 80 },
|
||||
{ "name": "新疆", "value": 100 }
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Bars/CapsuleChart/index.ts
Normal file
14
src/packages/components/Charts/Bars/CapsuleChart/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const CapsuleChartConfig: ConfigType = {
|
||||
key: 'CapsuleChart',
|
||||
chartKey: 'VCapsuleChart',
|
||||
conKey: 'VCCapsuleChart',
|
||||
title: '胶囊柱图',
|
||||
category: ChatCategoryEnum.BAR,
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'capsule.png'
|
||||
}
|
||||
237
src/packages/components/Charts/Bars/CapsuleChart/index.vue
Normal file
237
src/packages/components/Charts/Bars/CapsuleChart/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="state.mergedConfig"
|
||||
class="go-dv-capsule-chart"
|
||||
:style="{
|
||||
fontSize: numberSizeHandle(state.mergedConfig.valueFontSize),
|
||||
paddingLeft: numberSizeHandle(state.mergedConfig.paddingLeft),
|
||||
paddingRight: numberSizeHandle(state.mergedConfig.paddingRight)
|
||||
}"
|
||||
>
|
||||
<div class="label-column">
|
||||
<div
|
||||
v-for="item in state.mergedConfig.dataset.source"
|
||||
:key="item[state.mergedConfig.dataset.dimensions[0]]"
|
||||
:style="{ height: state.capsuleItemHeight, lineHeight: state.capsuleItemHeight }"
|
||||
>
|
||||
{{ item[state.mergedConfig.dataset.dimensions[0]] }}
|
||||
</div>
|
||||
<div class="laset"> </div>
|
||||
</div>
|
||||
|
||||
<div class="capsule-container">
|
||||
<div
|
||||
v-for="(capsule, index) in state.capsuleLength"
|
||||
:key="index"
|
||||
class="capsule-item"
|
||||
:style="{ height: state.capsuleItemHeight }"
|
||||
>
|
||||
<div
|
||||
class="capsule-item-column"
|
||||
:style="`width: ${capsule * 100}%; background-color: ${
|
||||
state.mergedConfig.colors[index % state.mergedConfig.colors.length]
|
||||
};height:calc(100% - ${2}px);`"
|
||||
>
|
||||
<div v-if="state.mergedConfig.showValue" class="capsule-item-value">
|
||||
{{ state.capsuleValue[index] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unit-label">
|
||||
<div v-for="(label, index) in state.labelData" :key="label + index">
|
||||
{{ label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="state.mergedConfig.unit" class="unit-text">
|
||||
{{ state.mergedConfig.unit }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch, reactive, PropType } from 'vue'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import config, { option } from './config'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
type DataProps = {
|
||||
name: string | number
|
||||
value: string | number
|
||||
[key: string]: string | number
|
||||
}
|
||||
|
||||
interface StateProps {
|
||||
defaultConfig: {
|
||||
dataset: {
|
||||
dimensions: Array<string>
|
||||
source: Array<DataProps>
|
||||
}
|
||||
colors: Array<string>
|
||||
unit: string
|
||||
showValue: boolean
|
||||
itemHeight: number
|
||||
valueFontSize: number
|
||||
paddingLeft: number
|
||||
paddingRight: number
|
||||
}
|
||||
mergedConfig: any
|
||||
capsuleLength: Array<number>
|
||||
capsuleValue: Array<string | Object>
|
||||
labelData: Array<number>
|
||||
capsuleItemHeight: string
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const state = reactive<StateProps>({
|
||||
defaultConfig: option,
|
||||
mergedConfig: null,
|
||||
capsuleLength: [],
|
||||
capsuleValue: [],
|
||||
labelData: [],
|
||||
capsuleItemHeight: ''
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option,
|
||||
newVal => {
|
||||
calcData(newVal)
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const calcData = (data: any, type?: string) => {
|
||||
let cloneConfig = cloneDeep(props.chartConfig.option || {})
|
||||
state.mergedConfig = cloneConfig
|
||||
if (type == 'preview') {
|
||||
cloneConfig.dataset = data
|
||||
}
|
||||
calcCapsuleLengthAndLabelData(state.mergedConfig.dataset)
|
||||
}
|
||||
|
||||
// 数据解析
|
||||
const calcCapsuleLengthAndLabelData = (dataset: any) => {
|
||||
try {
|
||||
const { source } = dataset
|
||||
if (!source) return
|
||||
|
||||
if (source.length === 0) {
|
||||
// 清空数据
|
||||
state.capsuleLength = []
|
||||
state.labelData = []
|
||||
return
|
||||
}
|
||||
|
||||
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
|
||||
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
|
||||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
state.capsuleValue = capsuleValue
|
||||
|
||||
state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
|
||||
state.labelData = labelData
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
}
|
||||
}
|
||||
|
||||
const numberSizeHandle = (val: string | number) => {
|
||||
return val + 'px'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
calcData(props.chartConfig.option)
|
||||
})
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
calcData(newData, 'preview')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('dv-capsule-chart') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
padding-right: 50px;
|
||||
color: #b9b8cc;
|
||||
|
||||
.label-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
> div:not(:last-child) {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.capsule-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.capsule-item {
|
||||
box-shadow: 0 0 3px #999;
|
||||
height: 10px;
|
||||
margin: 5px 0px;
|
||||
border-radius: 5px;
|
||||
|
||||
.capsule-item-column {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
margin-top: 1px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.capsule-item-value {
|
||||
padding-left: 10px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit-label {
|
||||
height: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
line-height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
src/packages/components/Charts/Bars/index.ts
Normal file
6
src/packages/components/Charts/Bars/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { BarCommonConfig } from './BarCommon/index'
|
||||
import { BarCrossrangeConfig } from './BarCrossrange/index'
|
||||
import { CapsuleChartConfig } from './CapsuleChart/index'
|
||||
import { BarLineConfig } from './BarLine/index'
|
||||
|
||||
export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig, CapsuleChartConfig]
|
||||
53
src/packages/components/Charts/Lines/LineCommon/config.ts
Normal file
53
src/packages/components/Charts/Lines/LineCommon/config.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
export const seriesItem = {
|
||||
type: 'line',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
itemStyle: {
|
||||
color: null,
|
||||
borderRadius: 0
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
color: null
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineCommonConfig.key
|
||||
public chartConfig = cloneDeep(LineCommonConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
74
src/packages/components/Charts/Lines/LineCommon/config.vue
Normal file
74
src/packages/components/Charts/Lines/LineCommon/config.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<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="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
40
src/packages/components/Charts/Lines/LineCommon/data.json
Normal file
40
src/packages/components/Charts/Lines/LineCommon/data.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Lines/LineCommon/index.ts
Normal file
14
src/packages/components/Charts/Lines/LineCommon/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LineCommonConfig: ConfigType = {
|
||||
key: 'LineCommon',
|
||||
chartKey: 'VLineCommon',
|
||||
conKey: 'VCLineCommon',
|
||||
title: '折线图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'line.png'
|
||||
}
|
||||
84
src/packages/components/Charts/Lines/LineCommon/index.vue
Normal file
84
src/packages/components/Charts/Lines/LineCommon/index.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, watch, ref, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes, seriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const replaceMergeArr = ref<string[]>()
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
try {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(cloneDeep(seriesItem))
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
nextTick(() => {
|
||||
replaceMergeArr.value = []
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGradientSingleConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGradientSingleConfig.key
|
||||
public chartConfig = cloneDeep(LineGradientSingleConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(options, includes)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"dimensions": ["product", "data1"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LineGradientSingleConfig: ConfigType = {
|
||||
key: 'LineGradientSingle',
|
||||
chartKey: 'VLineGradientSingle',
|
||||
conKey: 'VCLineGradientSingle',
|
||||
title: '单折线渐变面积图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'line_gradient_single.png'
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
// 渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
92
src/packages/components/Charts/Lines/LineGradients/config.ts
Normal file
92
src/packages/components/Charts/Lines/LineGradients/config.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGradientsConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][4]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGradientsConfig.key
|
||||
public chartConfig = cloneDeep(LineGradientsConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
name="单折线面积图"
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
},
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
40
src/packages/components/Charts/Lines/LineGradients/data.json
Normal file
40
src/packages/components/Charts/Lines/LineGradients/data.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"dimensions": ["product", "data1", "data2"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200,
|
||||
"data2": 130
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150,
|
||||
"data2": 312
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80,
|
||||
"data2": 268
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70,
|
||||
"data2": 155
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110,
|
||||
"data2": 117
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130,
|
||||
"data2": 160
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Lines/LineGradients/index.ts
Normal file
14
src/packages/components/Charts/Lines/LineGradients/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LineGradientsConfig: ConfigType = {
|
||||
key: 'LineGradients',
|
||||
chartKey: 'VLineGradients',
|
||||
conKey: 'VCLineGradients',
|
||||
title: '双折线渐变面积图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'line_gradient.png'
|
||||
}
|
||||
86
src/packages/components/Charts/Lines/LineGradients/index.vue
Normal file
86
src/packages/components/Charts/Lines/LineGradients/index.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, graphic } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview, colorGradientCustomMerge} from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
// 渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any, index: number) => {
|
||||
value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: themeColor[3 + index]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0, 0)'
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineLinearSingleConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
export const option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value'
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: chartColorsSearch[defaultTheme][2],
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineLinearSingleConfig.key
|
||||
public chartConfig = cloneDeep(LineLinearSingleConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
:name="`样式`"
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[0].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.color.colorStops[1].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影" :alone="true">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.lineStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="设置">
|
||||
<SettingItem name="阴影">
|
||||
<n-button
|
||||
size="small"
|
||||
@click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
|
||||
>
|
||||
去除阴影
|
||||
</n-button>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"dimensions": ["product", "data1"],
|
||||
"source": [
|
||||
{
|
||||
"product": "Mon",
|
||||
"data1": 120
|
||||
},
|
||||
{
|
||||
"product": "Tue",
|
||||
"data1": 200
|
||||
},
|
||||
{
|
||||
"product": "Wed",
|
||||
"data1": 150
|
||||
},
|
||||
{
|
||||
"product": "Thu",
|
||||
"data1": 80
|
||||
},
|
||||
{
|
||||
"product": "Fri",
|
||||
"data1": 70
|
||||
},
|
||||
{
|
||||
"product": "Sat",
|
||||
"data1": 110
|
||||
},
|
||||
{
|
||||
"product": "Sun",
|
||||
"data1": 130
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LineLinearSingleConfig: ConfigType = {
|
||||
key: 'LineLinearSingle',
|
||||
chartKey: 'VLineLinearSingle',
|
||||
conKey: 'VCLineLinearSingle',
|
||||
title: '单折线渐变图',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'line_linear_single.png'
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, reactive } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview, colorGradientCustomMerge } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const option = reactive({
|
||||
value: {}
|
||||
})
|
||||
|
||||
// 初始化与渐变色处理
|
||||
watch(
|
||||
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
|
||||
(newColor: keyof typeof chartColorsSearch) => {
|
||||
try {
|
||||
if (!isPreview()) {
|
||||
const themeColor =
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
|
||||
colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
|
||||
props.chartConfig.option.series.forEach((value: any) => {
|
||||
value.lineStyle.shadowColor = themeColor[2]
|
||||
value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
|
||||
v.color = themeColor[i]
|
||||
})
|
||||
})
|
||||
}
|
||||
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
props.chartConfig.option = option.value
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
() => {
|
||||
option.value = props.chartConfig.option
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
6
src/packages/components/Charts/Lines/index.ts
Normal file
6
src/packages/components/Charts/Lines/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { LineCommonConfig } from './LineCommon/index'
|
||||
import { LineLinearSingleConfig } from './LineLinearSingle/index'
|
||||
import { LineGradientSingleConfig } from './LineGradientSingle/index'
|
||||
import { LineGradientsConfig } from './LineGradients/index'
|
||||
|
||||
export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]
|
||||
107
src/packages/components/Charts/Maps/MapAmap/config.ts
Normal file
107
src/packages/components/Charts/Maps/MapAmap/config.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { MapAmapConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export enum ThemeEnum {
|
||||
NORMAL = 'normal',
|
||||
DARK = 'dark',
|
||||
LIGHT = 'light',
|
||||
WHITES_MOKE = 'whitesmoke',
|
||||
FRESH = 'fresh',
|
||||
GREY = 'grey',
|
||||
GRAFFITI = 'graffiti',
|
||||
MACARON = 'macaron',
|
||||
BLUE = 'blue',
|
||||
DARKBLUE = 'darkblue',
|
||||
WINE = 'wine'
|
||||
}
|
||||
|
||||
export enum LangEnum {
|
||||
ZH_CN = 'zh_cn',
|
||||
EN = 'en',
|
||||
ZH_EN = 'zh_en'
|
||||
}
|
||||
|
||||
export enum ViewModeEnum {
|
||||
PLANE = '2D',
|
||||
STEREOSCOPIC = '3D'
|
||||
}
|
||||
|
||||
export const ShowHideEnum = {
|
||||
SHOW: true,
|
||||
HIDE: false
|
||||
}
|
||||
|
||||
export enum FeaturesEnum {
|
||||
BG = 'bg',
|
||||
POINT = 'point',
|
||||
ROAD = 'road',
|
||||
BUILDING = 'building'
|
||||
}
|
||||
|
||||
export enum MarkerEnum {
|
||||
// 圆圈
|
||||
CIRCLE_MARKER = 'CircleMarker',
|
||||
// 定位标点
|
||||
MARKER = 'Marker',
|
||||
// 暂无
|
||||
NONE = 'none'
|
||||
}
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
mapOptions: {
|
||||
pitch: 60,
|
||||
skyColor: '#53A9DE',
|
||||
amapKey: '',
|
||||
amapStyleKey: ThemeEnum.DARK,
|
||||
amapStyleKeyCustom: '',
|
||||
amapLon: 116.397428,
|
||||
amapLat: 39.90923,
|
||||
amapZindex: 11,
|
||||
marker: {
|
||||
fillColor: '#E98984FF',
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: 'white',
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 0.5,
|
||||
zIndex: 10,
|
||||
bubble: true,
|
||||
cursor: 'pointer',
|
||||
clickable: true
|
||||
},
|
||||
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
|
||||
viewMode: ViewModeEnum.PLANE,
|
||||
showLabel: ShowHideEnum.SHOW,
|
||||
satelliteTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 1,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
roadNetTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 2,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
trafficTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 3,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
lang: LangEnum.ZH_CN,
|
||||
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
|
||||
}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = MapAmapConfig.key
|
||||
public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(MapAmapConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
290
src/packages/components/Charts/Maps/MapAmap/config.vue
Normal file
290
src/packages/components/Charts/Maps/MapAmap/config.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<collapse-item name="基础" :expanded="true">
|
||||
<setting-item-box name="语言类型" :alone="true">
|
||||
<setting-item>
|
||||
<n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="Key" :alone="true">
|
||||
<setting-item name="请务必使用自己的高德应用 key">
|
||||
<n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="自定义地图样式ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="地图" :expanded="true">
|
||||
<setting-item-box name="主题">
|
||||
<setting-item>
|
||||
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="显示要素" :alone="true">
|
||||
<n-checkbox-group v-model:value="optionData.mapOptions.features">
|
||||
<n-space item-style="display: flex;">
|
||||
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="文字标注" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="位置">
|
||||
<setting-item name="经度">
|
||||
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
|
||||
<template #suffix>°</template>
|
||||
</n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="纬度">
|
||||
<n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
|
||||
<template #suffix>°</template>
|
||||
</n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="初始缩放">
|
||||
<n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="模式" :alone="true">
|
||||
<setting-item>
|
||||
<n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
|
||||
<n-space>
|
||||
<n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
|
||||
{{ song.label }}
|
||||
</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<template v-if="optionData.mapOptions.viewMode === '3D'">
|
||||
<setting-item-box>
|
||||
<setting-item name="天空色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="俯仰角">
|
||||
<n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
</collapse-item>
|
||||
<collapse-item name="标记" :expanded="true">
|
||||
<setting-item-box name="样式">
|
||||
<setting-item name="类型">
|
||||
<n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="图层" :expanded="true">
|
||||
<setting-item-box name="卫星图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="路网图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="实时交通">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const themeOptions = [
|
||||
{
|
||||
value: ThemeEnum.NORMAL,
|
||||
label: '标准'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.DARK,
|
||||
label: '幻影黑'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.LIGHT,
|
||||
label: '月光银'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.WHITES_MOKE,
|
||||
label: '远山黛'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.FRESH,
|
||||
label: '草色青'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.GREY,
|
||||
label: '雅士灰'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.GRAFFITI,
|
||||
label: '涂鸦'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.MACARON,
|
||||
label: '马卡龙'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.BLUE,
|
||||
label: '靛青蓝'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.DARKBLUE,
|
||||
label: '极夜蓝'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.WINE,
|
||||
label: '酱籽'
|
||||
}
|
||||
]
|
||||
|
||||
const langOptions = [
|
||||
{
|
||||
value: LangEnum.ZH_CN,
|
||||
label: '中文简体'
|
||||
},
|
||||
{
|
||||
value: LangEnum.EN,
|
||||
label: '英文'
|
||||
},
|
||||
{
|
||||
value: LangEnum.ZH_EN,
|
||||
label: '中英文对照'
|
||||
}
|
||||
]
|
||||
|
||||
const viewModeOptions = [
|
||||
{
|
||||
value: ViewModeEnum.PLANE,
|
||||
label: '2D'
|
||||
},
|
||||
{
|
||||
value: ViewModeEnum.STEREOSCOPIC,
|
||||
label: '3D'
|
||||
}
|
||||
]
|
||||
|
||||
const featuresOptions = [
|
||||
{
|
||||
value: FeaturesEnum.BG,
|
||||
label: '区域面'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.POINT,
|
||||
label: '标注'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.ROAD,
|
||||
label: '道路'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.BUILDING,
|
||||
label: '建筑物'
|
||||
}
|
||||
]
|
||||
|
||||
const MarkerOptions = [
|
||||
{
|
||||
value: MarkerEnum.CIRCLE_MARKER,
|
||||
label: '圆形标点'
|
||||
},
|
||||
{
|
||||
value: MarkerEnum.MARKER,
|
||||
label: '定位标点'
|
||||
},
|
||||
{
|
||||
value: MarkerEnum.NONE,
|
||||
label: '隐藏标点'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
19
src/packages/components/Charts/Maps/MapAmap/data.json
Normal file
19
src/packages/components/Charts/Maps/MapAmap/data.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"markers": [
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 10,
|
||||
"position": [116.300467, 39.907761]
|
||||
},
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 15,
|
||||
"position": [116.400567, 39.908761]
|
||||
},
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 20,
|
||||
"position": [116.200467, 39.937761]
|
||||
}
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Maps/MapAmap/index.ts
Normal file
14
src/packages/components/Charts/Maps/MapAmap/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapAmapConfig: ConfigType = {
|
||||
key: 'MapAmap',
|
||||
chartKey: 'VMapAmap',
|
||||
conKey: 'VCMapAmap',
|
||||
title: '高德地图',
|
||||
category: ChatCategoryEnum.MAP,
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'map_amap.png'
|
||||
}
|
||||
164
src/packages/components/Charts/Maps/MapAmap/index.vue
Normal file
164
src/packages/components/Charts/Maps/MapAmap/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div ref="vChartRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, PropType, toRefs, watch } from 'vue'
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { MarkerEnum, ThemeEnum } from './config'
|
||||
import { isArray } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
let {
|
||||
amapKey,
|
||||
amapStyleKey,
|
||||
amapLon,
|
||||
amapLat,
|
||||
amapZindex,
|
||||
mapMarkerType,
|
||||
lang,
|
||||
amapStyleKeyCustom,
|
||||
features,
|
||||
viewMode,
|
||||
showLabel,
|
||||
pitch,
|
||||
skyColor,
|
||||
marker,
|
||||
satelliteTileLayer,
|
||||
roadNetTileLayer,
|
||||
trafficTileLayer
|
||||
} = toRefs(props.chartConfig.option.mapOptions)
|
||||
|
||||
let mapIns: any = null
|
||||
let markers: any = []
|
||||
let AMapIns: any = null
|
||||
const vChartRef = ref<HTMLElement>()
|
||||
|
||||
const initMap = (newData: any) => {
|
||||
// 初始化
|
||||
AMapLoader.load({
|
||||
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
|
||||
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||
})
|
||||
.then(AMap => {
|
||||
AMapIns = AMap
|
||||
mapIns = new AMap.Map(vChartRef.value, {
|
||||
resizeEnable: true,
|
||||
zoom: amapZindex.value, // 地图显示的缩放级别
|
||||
center: [amapLon.value, amapLat.value],
|
||||
lang: lang.value,
|
||||
features: features.value,
|
||||
pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||
skyColor: skyColor.value,
|
||||
viewMode: viewMode.value, // 地图模式
|
||||
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||
willReadFrequently: true
|
||||
})
|
||||
dataHandle(props.chartConfig.option.dataset)
|
||||
|
||||
let satelliteLayer = new AMap.TileLayer.Satellite({
|
||||
zIndex: satelliteTileLayer.value.zIndex,
|
||||
opacity: satelliteTileLayer.value.opacity,
|
||||
zooms: satelliteTileLayer.value.zooms
|
||||
})
|
||||
let roadNetLayer = new AMap.TileLayer.RoadNet({
|
||||
zIndex: roadNetTileLayer.value.zIndex,
|
||||
opacity: roadNetTileLayer.value.opacity,
|
||||
zooms: roadNetTileLayer.value.zooms
|
||||
})
|
||||
let trafficLayer = new AMap.TileLayer.Traffic({
|
||||
zIndex: trafficTileLayer.value.zIndex,
|
||||
opacity: trafficTileLayer.value.opacity,
|
||||
zooms: trafficTileLayer.value.zooms
|
||||
})
|
||||
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
|
||||
if (satelliteTileLayer.value.show) {
|
||||
mapIns.add([satelliteLayer])
|
||||
}
|
||||
if (roadNetTileLayer.value.show) {
|
||||
mapIns.add([roadNetLayer])
|
||||
}
|
||||
if (trafficTileLayer.value.show) {
|
||||
mapIns.add([trafficLayer])
|
||||
}
|
||||
|
||||
mapIns.setMapStyle(
|
||||
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
|
||||
)
|
||||
})
|
||||
.catch(e => {})
|
||||
}
|
||||
|
||||
const dataHandle = (newData: any) => {
|
||||
if (!mapIns && !AMapIns) {
|
||||
initMap(props.chartConfig.option)
|
||||
return
|
||||
}
|
||||
if (isArray(newData.markers)) {
|
||||
// 先清除旧标记
|
||||
mapIns.remove(markers)
|
||||
markers = []
|
||||
// 记录新标记
|
||||
if (mapMarkerType.value === MarkerEnum.MARKER) {
|
||||
newData.markers.forEach((markerItem: any) => {
|
||||
const markerInstance = new AMapIns.Marker({
|
||||
position: [markerItem.position[0], markerItem.position[1]],
|
||||
offset: new AMapIns.Pixel(-13, -30)
|
||||
})
|
||||
markers.push(markerInstance)
|
||||
markerInstance.setMap(mapIns)
|
||||
})
|
||||
} else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
|
||||
newData.markers.forEach((markerItem: any) => {
|
||||
const markerInstance = new AMapIns.CircleMarker({
|
||||
center: [markerItem.position[0], markerItem.position[1]],
|
||||
radius: markerItem.value,
|
||||
...marker.value
|
||||
})
|
||||
markers.push(markerInstance)
|
||||
markerInstance.setMap(mapIns)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const stopWatch = watch(
|
||||
() => props.chartConfig.option.mapOptions,
|
||||
option => {
|
||||
initMap(option)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
try {
|
||||
dataHandle(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
stopWatch()
|
||||
dataHandle(newData)
|
||||
})
|
||||
</script>
|
||||
183
src/packages/components/Charts/Maps/MapBase/config.ts
Normal file
183
src/packages/components/Charts/Maps/MapBase/config.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { MapBaseConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
mapRegion: {
|
||||
adcode: 'china',
|
||||
showHainanIsLands: true,
|
||||
enter: false,
|
||||
backSize: 20,
|
||||
backColor: '#ffffff'
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
pieces: [
|
||||
{ gte: 1000, label: '>1000' }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: '600-999' },
|
||||
{ gte: 200, lte: 599, label: '200-599' },
|
||||
{ gte: 50, lte: 199, label: '49-199' },
|
||||
{ gte: 10, lte: 49, label: '10-49' },
|
||||
{ lte: 9, label: '<9' } // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: ['#c3d7df', '#5cb3cc', '#8abcd1', '#66a9c9', '#2f90b9', '#1781b5']
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
show: false,
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: 'china',
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: 1
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 4,
|
||||
legendHoverLink: true,
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
scale: 6,
|
||||
color: '#FFFFFF',
|
||||
brushType: 'fill'
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(0,0,0,.6)',
|
||||
borderColor: 'rgba(147, 235, 248, .8)',
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: 'bottom',
|
||||
textBorderColor: '#fff',
|
||||
textShadowColor: '#000',
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: '#FFFFFF',
|
||||
show: true
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFFFFF',
|
||||
borderColor: 'rgba(225,255,255,2)',
|
||||
borderWidth: 4,
|
||||
shadowColor: '#E1FFFF',
|
||||
shadowBlur: 10
|
||||
},
|
||||
data: [],
|
||||
encode: {
|
||||
value: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '区域',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
data: [],
|
||||
selectedMode: false,
|
||||
zoom: 1,
|
||||
geoIndex: 1,
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: '#00000060',
|
||||
borderColor: 'rgba(147, 235, 248, 0.8)',
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
emphasis: {
|
||||
disabled: false,
|
||||
label: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#389BB7',
|
||||
shadowColor: '#389BB7',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#93EBF8',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#93ebf800' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#93ebf820' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
shadowColor: '#80D9F842',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 7 //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#4fb6d2',
|
||||
width: 1, //线条宽度
|
||||
opacity: 0.1, //尾迹线条透明度
|
||||
curveness: 0.3 //尾迹线条曲直度
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
export const MapDefaultConfig = { ...option }
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = MapBaseConfig.key
|
||||
public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(MapBaseConfig)
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
330
src/packages/components/Charts/Maps/MapBase/config.vue
Normal file
330
src/packages/components/Charts/Maps/MapBase/config.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="地图区域">
|
||||
<SettingItem name="默认中国">
|
||||
<n-select
|
||||
size="small"
|
||||
v-model:value="mapRegion.adcode"
|
||||
:options="mapRegionOptions"
|
||||
value-field="adcode"
|
||||
label-field="name"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="区域颜色">
|
||||
<SettingItem name="0%处颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor.colorStops[0].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="100%处颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor.colorStops[1].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="模糊程度">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowBlur"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="请输入模糊程度"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="水平偏移">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowOffsetX"
|
||||
size="small"
|
||||
placeholder="请输入水平偏移大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="垂直偏移">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowOffsetY"
|
||||
size="small"
|
||||
placeholder="请输入垂直偏移大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="地理信息名称">
|
||||
<SettingItem name="显示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="seriesList[1].label.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].label.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].label.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入字体大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="鼠标悬停聚焦">
|
||||
<SettingItem name="禁用（预览可见）">
|
||||
<n-space>
|
||||
<n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].emphasis.label.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入字体大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="阴影">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.itemStyle.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="边框大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].emphasis.itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="文字颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.label.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="悬浮弹窗">
|
||||
<SettingItem name="显示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="seriesList[1].tooltip.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].tooltip.textStyle.fontSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入字体大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].tooltip.textStyle.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].tooltip.backgroundColor"
|
||||
></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="其他" v-if="mapRegion.adcode === 'china'">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
<SettingItem v-if="seriesList[2]">
|
||||
<n-checkbox v-model:checked="mapRegion.enter" size="small">点击进入下级</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="返回图标" v-if="mapRegion.enter">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="mapRegion.backColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="mapRegion.backSize"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入字体大小"
|
||||
></n-input-number>
|
||||
</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>
|
||||
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="显示">
|
||||
<n-space>
|
||||
<n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="涟漪">
|
||||
<SettingItem name="涟漪大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[0].rippleEffect.scale"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入涟漪大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="涟漪颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="涟漪的绘制方式">
|
||||
<n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">
|
||||
<SettingItemBox name="箭头">
|
||||
<SettingItem name="速度">
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
|
||||
</template>
|
||||
值越小速度越快
|
||||
</n-tooltip>
|
||||
</SettingItem>
|
||||
<SettingItem name="尾迹">
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-input-number
|
||||
v-model:value="seriesList[2].effect.trailLength"
|
||||
size="small"
|
||||
:min="0"
|
||||
:max="1"
|
||||
></n-input-number>
|
||||
</template>
|
||||
特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
</n-tooltip>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="配置">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[2].lineStyle.normal.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
import { ref } from 'vue'
|
||||
import mapChinaJson from './mapGeojson/china.json'
|
||||
|
||||
const mapRegionOptions = ref([
|
||||
{
|
||||
adcode: 'china',
|
||||
name: '中国'
|
||||
}
|
||||
])
|
||||
|
||||
const rippleEffectOptions = ref([
|
||||
{
|
||||
value: 'fill',
|
||||
label: '实心'
|
||||
},
|
||||
{
|
||||
value: 'stroke',
|
||||
label: '空心'
|
||||
}
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initMapRegionOptions = () => {
|
||||
mapChinaJson.features.forEach((element: any) => {
|
||||
if (element.properties.name) {
|
||||
mapRegionOptions.value.push({ ...element.properties })
|
||||
}
|
||||
})
|
||||
}
|
||||
initMapRegionOptions()
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const mapRegion = computed(() => {
|
||||
return props.optionData.mapRegion
|
||||
})
|
||||
</script>
|
||||
105
src/packages/components/Charts/Maps/MapBase/data.json
Normal file
105
src/packages/components/Charts/Maps/MapBase/data.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.405285, 39.904989, 200]
|
||||
},
|
||||
{
|
||||
"name": "郑州",
|
||||
"value": [113.665412, 34.757975, 888]
|
||||
},
|
||||
{
|
||||
"name": "青海",
|
||||
"value": [101.778916, 36.623178, 666]
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": [106.278179, 38.46637, 66]
|
||||
},
|
||||
{
|
||||
"name": "哈尔滨市",
|
||||
"value": [126.642464, 45.756967, 101]
|
||||
}
|
||||
],
|
||||
"line": [
|
||||
{
|
||||
"coords": [
|
||||
[113.665412, 34.757975],
|
||||
[116.405285, 39.904989]
|
||||
]
|
||||
},
|
||||
{
|
||||
"coords": [
|
||||
[101.778916, 36.623178],
|
||||
[116.405285, 39.904989]
|
||||
]
|
||||
},
|
||||
{
|
||||
"coords": [
|
||||
[106.278179, 38.46637],
|
||||
[116.405285, 39.904989]
|
||||
]
|
||||
},
|
||||
{
|
||||
"coords": [
|
||||
[126.642464, 45.756967],
|
||||
[116.405285, 39.904989]
|
||||
]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": 666
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": 98
|
||||
},
|
||||
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": 300
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": 1199
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": 86
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": 850
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": 84
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": 81
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": 900
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": 800
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": 7
|
||||
}
|
||||
],
|
||||
"pieces": [
|
||||
{ "gte": 1000, "label": ">1000" },
|
||||
{ "gte": 600, "lte": 999, "label": "600-999" },
|
||||
{ "gte": 200, "lte": 599, "label": "200-599" },
|
||||
{ "gte": 50, "lte": 199, "label": "49-199" },
|
||||
{ "gte": 10, "lte": 49, "label": "10-49" },
|
||||
{ "lte": 9, "label": "<9" }
|
||||
]
|
||||
}
|
||||
14
src/packages/components/Charts/Maps/MapBase/index.ts
Normal file
14
src/packages/components/Charts/Maps/MapBase/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapBaseConfig: ConfigType = {
|
||||
key: 'MapBase',
|
||||
chartKey: 'VMapBase',
|
||||
conKey: 'VCMapBase',
|
||||
title: '地图(可选省份)',
|
||||
category: ChatCategoryEnum.MAP,
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'map.png'
|
||||
}
|
||||
268
src/packages/components/Charts/Maps/MapBase/index.vue
Normal file
268
src/packages/components/Charts/Maps/MapBase/index.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel">
|
||||
<n-icon :color="backColor" :size="backSize * 1.1">
|
||||
<ArrowBackIcon />
|
||||
</n-icon>
|
||||
<span
|
||||
:style="{
|
||||
'font-weight': 200,
|
||||
color: backColor,
|
||||
'font-size': `${backSize}px`
|
||||
}"
|
||||
>
|
||||
返回上级
|
||||
</span>
|
||||
</div>
|
||||
<v-chart
|
||||
ref="vChartRef"
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option.value"
|
||||
:manual-update="isPreview()"
|
||||
autoresize
|
||||
@click="chartPEvents"
|
||||
>
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch, ref, nextTick, toRefs } from 'vue'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
import { icon } from '@/plugins'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import mapChinaJson from './mapGeojson/china.json'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { ArrowBackIcon } = icon.ionicons5
|
||||
let levelHistory: any = ref([])
|
||||
|
||||
const { backColor, backSize, enter } = toRefs(props.chartConfig.option.mapRegion)
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
MapChart,
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
GeoComponent,
|
||||
EffectScatterChart,
|
||||
VisualMapComponent
|
||||
])
|
||||
|
||||
const option = reactive({
|
||||
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
//动态获取json注册地图
|
||||
const getGeojson = (regionId: string) => {
|
||||
return new Promise<boolean>(resolve => {
|
||||
import(`./mapGeojson/${regionId}.json`).then(data => {
|
||||
registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
// 进行更换初始化地图 如果为china 单独处理
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
const adCode = `${props.chartConfig.option.mapRegion.adcode}`
|
||||
if (adCode !== 'china') {
|
||||
await getGeojson(adCode)
|
||||
} else {
|
||||
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
|
||||
}
|
||||
vEchartsSetOption()
|
||||
}
|
||||
registerMapInitAsync()
|
||||
|
||||
// 手动触发渲染
|
||||
const vEchartsSetOption = () => {
|
||||
option.value = props.chartConfig.option
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
|
||||
// 更新数据处理
|
||||
const dataSetHandle = async (dataset: any) => {
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
|
||||
else if (item.type === 'lines' && dataset.line) {
|
||||
item.data = dataset.line.map((it: any) => {
|
||||
return {
|
||||
...it,
|
||||
lineStyle: {
|
||||
color: props.chartConfig.option.series[2].lineStyle.normal.color
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (item.type === 'map' && dataset.map) item.data = dataset.map
|
||||
})
|
||||
if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
|
||||
|
||||
isPreview() && vEchartsSetOption()
|
||||
}
|
||||
// 处理海南群岛
|
||||
const hainanLandsHandle = async (newData: boolean) => {
|
||||
if (newData) {
|
||||
await getGeojson('china')
|
||||
} else {
|
||||
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
}
|
||||
}
|
||||
|
||||
// 点击区域
|
||||
const chartPEvents = (e: any) => {
|
||||
if (e.seriesType !== 'map') return
|
||||
if (!props.chartConfig.option.mapRegion.enter) {
|
||||
return
|
||||
}
|
||||
mapChinaJson.features.forEach(item => {
|
||||
var pattern = new RegExp(e.name)
|
||||
if (pattern.test(item.properties.name)) {
|
||||
let code = String(item.properties.adcode)
|
||||
levelHistory.value.push(code)
|
||||
checkOrMap(code)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一级
|
||||
const backLevel = () => {
|
||||
levelHistory.value = []
|
||||
if (levelHistory.value.length > 1) {
|
||||
levelHistory.value.pop()
|
||||
const code = levelHistory[levelHistory.value.length - 1]
|
||||
checkOrMap(code)
|
||||
} else {
|
||||
checkOrMap('china')
|
||||
}
|
||||
}
|
||||
|
||||
// 切换地图
|
||||
const checkOrMap = async (newData: string) => {
|
||||
if (newData === 'china') {
|
||||
if (props.chartConfig.option.mapRegion.showHainanIsLands) {
|
||||
// 显示南海
|
||||
hainanLandsHandle(true)
|
||||
vEchartsSetOption()
|
||||
} else {
|
||||
// 隐藏南海
|
||||
hainanLandsHandle(false)
|
||||
vEchartsSetOption()
|
||||
}
|
||||
} else {
|
||||
await getGeojson(newData)
|
||||
}
|
||||
props.chartConfig.option.geo.map = newData
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = newData
|
||||
})
|
||||
vEchartsSetOption()
|
||||
}
|
||||
|
||||
//监听 dataset 数据发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 监听线的颜色
|
||||
if (props.chartConfig.option.series[2] && !isPreview()) {
|
||||
watch(
|
||||
() => props.chartConfig.option.series[2].lineStyle.normal.color,
|
||||
() => {
|
||||
dataSetHandle(props.chartConfig.option.dataset)
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
//监听是否显示南海群岛
|
||||
if (!isPreview()) {
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.showHainanIsLands,
|
||||
async newData => {
|
||||
try {
|
||||
await hainanLandsHandle(newData)
|
||||
vEchartsSetOption()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
}
|
||||
//监听地图展示区域发生变化
|
||||
watch(
|
||||
() => `${props.chartConfig.option.mapRegion.adcode}`,
|
||||
newData => {
|
||||
try {
|
||||
checkOrMap(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scope lang="scss">
|
||||
.back-icon {
|
||||
z-index: 50;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":710000,"name":"台湾省","center":[121.509062,25.044332],"centroid":[120.971485,23.749452],"childrenNum":0,"level":"province","acroutes":[100000],"parent":{"adcode":100000}},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.443558,22.441245],[120.517584,22.408536],[120.569903,22.361728],[120.640505,22.241347],[120.659209,22.15432],[120.662001,22.066983],[120.651464,22.033165],[120.667691,21.983168],[120.70157,21.927065],[120.743246,21.915569],[120.78155,21.923957],[120.85468,21.883333],[120.87291,21.897387],[120.866482,21.98436],[120.907315,22.033208],[120.904154,22.119757],[120.914955,22.302718],[120.981658,22.528305],[121.015009,22.584168],[121.033292,22.650725],[121.078498,22.669656],[121.170544,22.723133],[121.210481,22.770665],[121.237931,22.836327],[121.324708,22.945666],[121.354687,23.01006],[121.370388,23.084347],[121.409535,23.102669],[121.430294,23.137196],[121.415015,23.195973],[121.440358,23.272096],[121.479558,23.3223],[121.497788,23.419789],[121.521497,23.483198],[121.523078,23.538708],[121.587778,23.76102],[121.621604,23.92075],[121.659381,24.006893],[121.639992,24.064276],[121.643838,24.097713],[121.678085,24.133906],[121.689044,24.174401],[121.809172,24.339055],[121.826717,24.423579],[121.867498,24.478978],[121.885464,24.529677],[121.892524,24.617912],[121.862598,24.671515],[121.837993,24.76015],[121.845053,24.836269],[121.932883,24.938645],[122.012178,25.001469],[121.980776,25.03079],[121.947425,25.031955],[121.917077,25.137908],[121.842155,25.135332],[121.782407,25.160425],[121.750531,25.160716],[121.707327,25.191493],[121.700319,25.226913],[121.655324,25.241859],[121.623026,25.294694],[121.584986,25.308926],[121.535038,25.307515],[121.444415,25.270624],[121.413487,25.238912],[121.371864,25.159885],[121.319281,25.140691],[121.209322,25.127104],[121.133135,25.078728],[121.102102,25.075153],[121.024704,25.040479],[121.009688,24.993649],[120.960899,24.940227],[120.908475,24.852012],[120.892299,24.767526],[120.823753,24.688321],[120.762371,24.658335],[120.688661,24.600678],[120.64277,24.490172],[120.589187,24.432354],[120.546299,24.370413],[120.521009,24.312038],[120.470534,24.24259],[120.451461,24.182691],[120.392029,24.11824],[120.316158,23.984881],[120.278276,23.927798],[120.245768,23.840553],[120.175377,23.807385],[120.102773,23.700981],[120.094817,23.587466],[120.121741,23.504664],[120.107831,23.341264],[120.081434,23.29191],[120.018947,23.073115],[120.029537,23.048623],[120.131382,23.002118],[120.149138,22.896715],[120.200403,22.721101],[120.274272,22.560181],[120.297191,22.531315],[120.443558,22.441245]]],[[[124.542984,25.903911],[124.586346,25.913777],[124.572805,25.93974],[124.541825,25.931031],[124.542984,25.903911]]],[[[123.445286,25.725966],[123.472104,25.713024],[123.508933,25.723237],[123.514834,25.751226],[123.483063,25.768587],[123.444496,25.746514],[123.445286,25.725966]]],[[[119.64597,23.55091],[119.701081,23.550657],[119.678057,23.600041],[119.610089,23.603953],[119.594388,23.577245],[119.566306,23.584732],[119.562565,23.530377],[119.573788,23.505885],[119.609141,23.503864],[119.64597,23.55091]]],[[[123.667207,25.914066],[123.707092,25.916873],[123.678008,25.938667],[123.667207,25.914066]]],[[[119.506031,23.625567],[119.505241,23.575814],[119.472416,23.557136],[119.523207,23.563699],[119.525578,23.624895],[119.506031,23.625567]]],[[[119.49739,23.386683],[119.495125,23.350156],[119.516885,23.349903],[119.49739,23.386683]]],[[[119.557454,23.666474],[119.604083,23.616989],[119.615516,23.660925],[119.586485,23.675974],[119.557454,23.666474]]],[[[121.46823,22.676644],[121.476502,22.64166],[121.513541,22.631833],[121.5147,22.67639],[121.46823,22.676644]]],[[[121.510538,22.087185],[121.507693,22.048523],[121.534089,22.022146],[121.594522,21.995382],[121.604586,22.022699],[121.575028,22.037122],[121.575607,22.084421],[121.510538,22.087185]]],[[[122.097533,25.500168],[122.093581,25.47183],[122.124825,25.475932],[122.097533,25.500168]]],[[[119.421467,23.216684],[119.421309,23.18935],[119.453396,23.217697],[119.421467,23.216684]]],[[[120.355042,22.327259],[120.395454,22.342287],[120.383072,22.355573],[120.355042,22.327259]]]]}}]}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"type":"FeatureCollection",
|
||||
"features":[]
|
||||
}
|
||||
25711
src/packages/components/Charts/Maps/MapBase/mapWithoutHainanIsLands.json
Normal file
25711
src/packages/components/Charts/Maps/MapBase/mapWithoutHainanIsLands.json
Normal file
File diff suppressed because it is too large
Load Diff
4
src/packages/components/Charts/Maps/index.ts
Normal file
4
src/packages/components/Charts/Maps/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import { MapBaseConfig } from './MapBase/index'
|
||||
import { MapAmapConfig } from './MapAmap/index'
|
||||
|
||||
export default [MapBaseConfig, MapAmapConfig]
|
||||
91
src/packages/components/Charts/Mores/Dial/config.ts
Normal file
91
src/packages/components/Charts/Mores/Dial/config.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { DialConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const includes = []
|
||||
const option = {
|
||||
backgroundColor: '#0E1327',
|
||||
dataset:70,
|
||||
series: [{
|
||||
type: "gauge",
|
||||
data: [{
|
||||
value: 70,
|
||||
itemStyle: { // 指针样式
|
||||
color: '#2AF4FF'
|
||||
}
|
||||
}],
|
||||
min: 0, //最小刻度
|
||||
max: 100, //最大刻度
|
||||
splitNumber: 10, //刻度数量
|
||||
center: ['50%', '55%'],
|
||||
radius: '80%',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0, 'rgba(0,212,230,0.5)'],
|
||||
[1, 'rgba(28,128,245,0)']
|
||||
],
|
||||
width: 170
|
||||
}
|
||||
},
|
||||
axisLabel: { // 文字样式
|
||||
color: '#eee',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 4
|
||||
},
|
||||
animationDuration: 2000,
|
||||
},
|
||||
{
|
||||
name: '外部刻度',
|
||||
type: 'gauge',
|
||||
center: ['50%', '55%'],
|
||||
radius: '90%',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 25,
|
||||
color: [ // 表盘外部颜色
|
||||
[0, '#1369E380'],
|
||||
[1, '#1369E380']
|
||||
],
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 5,
|
||||
lineStyle: { //刻度颜色
|
||||
color: '#42E5FB',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
length: 15,
|
||||
lineStyle: {
|
||||
color: '#42E5FB',
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = DialConfig.key
|
||||
public chartConfig = cloneDeep(DialConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user