feat: 添加多种的散点图支持

This commit is contained in:
tnt group
2022-09-15 12:07:01 +08:00
parent 1baa18888f
commit 8c370c550e
19 changed files with 830 additions and 367 deletions
@@ -0,0 +1,57 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { ScatterBasicConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const option = {
dataset: dataJson,
tooltip: {
// trigger: 'axis',
showDelay: 0,
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {},
xAxis: {
show: true,
type: 'value',
scale: true,
splitLine: {
show: false
}
},
yAxis: {
show: true,
type: 'value',
scale: true,
splitLine: {
show: false
}
},
series: [
{
type: 'scatter',
emphasis: {
focus: 'self'
},
symbolSize: 12
}
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ScatterBasicConfig.key
public chartConfig = cloneDeep(ScatterBasicConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}
@@ -0,0 +1,27 @@
{
"dimensions": ["data1"],
"source": [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
]
}
@@ -1,12 +1,12 @@
import image from '@/assets/images/chart/charts/Point.png'
import image from '@/assets/images/chart/charts/point.png'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const ScatterCommonConfig: ConfigType = {
key: 'ScatterCommon',
chartKey: 'VScatterCommon',
conKey: 'VCScatterCommon',
title: '散点图',
export const ScatterBasicConfig: ConfigType = {
key: 'ScatterBasic',
chartKey: 'VScatterBasic',
conKey: 'VCScatterBasic',
title: '基础散点图',
category: ChatCategoryEnum.SCATTER,
categoryName: ChatCategoryEnumName.SCATTER,
package: PackagesCategoryEnum.CHARTS,
@@ -0,0 +1,66 @@
<template>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
: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 { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
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
}
})
use([DatasetComponent, CanvasRenderer, ScatterChart, 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, oldData) => {
if (newData?.length !== oldData?.length) {
replaceMergeArr.value = ['series']
nextTick(() => {
replaceMergeArr.value = []
})
}
},
{
deep: false
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
@@ -1,114 +0,0 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { ScatterCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const seriesItem = {
type: 'scatter',
emphasis: {
focus: 'series'
}
}
export const option = {
dataset: { ...dataJson },
tooltip: {
// trigger: 'axis',
showDelay: 0,
formatter: function (params: { value: string | any[]; seriesName: string; name: string }) {
if (params.value.length > 1) {
return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg '
} else {
return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + 'kg '
}
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {},
// visualMap: {
// min: 0,
// max: 360,
// dimension: 1,
// orient: 'vertical',
// right: 10,
// top: 'center',
// text: ['高', '低'],
// calculable: true,
// inRange: {
// color: ['#f2c31a', '#24b7f2']
// }
// },
xAxis: [
{
type: 'value',
scale: true,
// axisLabel: {
// formatter: '{value} cm'
// },
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
// axisLabel: {
// formatter: '{value} kg'
// },
splitLine: {
show: false
}
}
],
// series: [
// {
// name: 'Data1',
// type: 'scatter',
// emphasis: {
// focus: 'series'
// },
// // symbolSize: 12,
// symbolSize: (item: number[]) => (item[1] / item[0]) * 30,
// datasetIndex: 0
// },
// {
// name: 'Data2',
// type: 'scatter',
// emphasis: {
// focus: 'series'
// },
// // symbolSize: 12,
// symbolSize: (item: number[]) => (item[1] / item[0]) * 30,
// datasetIndex: 1
// }
// ]
series: dataJson.map((item, index) => ({
...seriesItem,
name: item.dimensions[0],
datasetIndex: index
}))
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ScatterCommonConfig.key
public chartConfig = cloneDeep(ScatterCommonConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}
@@ -0,0 +1,87 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { SScatterLogarithmicRegressionConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const option = {
dataset: dataJson,
tooltip: {
showDelay: 0,
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {
data: dataJson
.filter(i => i?.transform?.type === 'filter' && i?.transform?.config?.eq)
.map(i => i.transform?.config?.eq)
},
xAxis: {
show: true,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: true,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
visualMap: {
show: false,
dimension: 2,
min: 20000,
max: 1500000000,
seriesIndex: [0, 1],
inRange: {
symbolSize: [10, 70]
}
},
series: [
{
type: 'scatter',
datasetIndex: 1
},
{
type: 'scatter',
datasetIndex: 2
},
{
type: 'line',
smooth: true,
datasetIndex: 3,
symbolSize: 0.1,
symbol: 'circle',
label: { show: true, fontSize: 16 },
labelLayout: { dx: -20 },
encode: { label: 2, tooltip: 1 }
}
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = SScatterLogarithmicRegressionConfig.key
public chartConfig = cloneDeep(SScatterLogarithmicRegressionConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}
@@ -0,0 +1,18 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
// eslint-disable-next-line no-unused-vars
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
}
})
</script>
@@ -0,0 +1,64 @@
[
{
"source": [
[28604, 77, 17096869, "Australia", 1990],
[31163, 77.4, 27662440, "Canada", 1990],
[1516, 68, 1154605773, "China", 1990],
[13670, 74.7, 10582082, "Cuba", 1990],
[28599, 75, 4986705, "Finland", 1990],
[29476, 77.1, 56943299, "France", 1990],
[31476, 75.4, 78958237, "Germany", 1990],
[28666, 78.1, 254830, "Iceland", 1990],
[1777, 57.7, 870601776, "India", 1990],
[29550, 79.1, 122249285, "Japan", 1990],
[2076, 67.9, 20194354, "North Korea", 1990],
[12087, 72, 42972254, "South Korea", 1990],
[24021, 75.4, 3397534, "New Zealand", 1990],
[43296, 76.8, 4240375, "Norway", 1990],
[10088, 70.8, 38195258, "Poland", 1990],
[19349, 69.6, 147568552, "Russia", 1990],
[10670, 67.3, 53994605, "Turkey", 1990],
[26424, 75.7, 57110117, "United Kingdom", 1990],
[37062, 75.4, 252847810, "United States", 1990],
[44056, 81.8, 23968973, "Australia", 2015],
[43294, 81.7, 35939927, "Canada", 2015],
[13334, 76.9, 1376048943, "China", 2015],
[21291, 78.5, 11389562, "Cuba", 2015],
[38923, 80.8, 5503457, "Finland", 2015],
[37599, 81.9, 64395345, "France", 2015],
[44053, 81.1, 80688545, "Germany", 2015],
[42182, 82.8, 329425, "Iceland", 2015],
[5903, 66.8, 1311050527, "India", 2015],
[36162, 83.5, 126573481, "Japan", 2015],
[1390, 71.4, 25155317, "North Korea", 2015],
[34644, 80.7, 50293439, "South Korea", 2015],
[34186, 80.6, 4528526, "New Zealand", 2015],
[64304, 81.6, 5210967, "Norway", 2015],
[24787, 77.3, 38611794, "Poland", 2015],
[23038, 73.13, 143456918, "Russia", 2015],
[19360, 76.5, 78665830, "Turkey", 2015],
[38225, 81.4, 64715810, "United Kingdom", 2015],
[53354, 79.1, 321773631, "United States", 2015]
]
},
{
"transform": {
"type": "filter",
"config": { "dimension": 4, "eq": 1990 }
}
},
{
"transform": {
"type": "filter",
"config": { "dimension": 4, "eq": 2015 }
}
},
{
"transform": {
"type": "ecStat:regression",
"config": {
"method": "logarithmic"
}
}
}
]
@@ -0,0 +1,15 @@
import image from '@/assets/images/chart/charts/point.png'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const SScatterLogarithmicRegressionConfig: ConfigType = {
key: 'ScatterLogarithmicRegression',
chartKey: 'VScatterLogarithmicRegression',
conKey: 'VCScatterLogarithmicRegression',
title: '对数回归散点图',
category: ChatCategoryEnum.SCATTER,
categoryName: ChatCategoryEnumName.SCATTER,
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.ECHARTS,
image
}
@@ -0,0 +1,73 @@
<template>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
:update-options="{ replaceMerge: replaceMergeArr }"
autoresize
>
</v-chart>
</template>
<script setup lang="ts">
import { PropType, computed, ref } from 'vue'
import VChart from 'vue-echarts'
import ecStat from 'echarts-stat'
import { use, registerTransform } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart, LineChart } from 'echarts/charts'
import { UniversalTransition, LabelLayout } from 'echarts/features'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import { isPreview } from '@/utils'
import {
DatasetComponent,
GridComponent,
LegendComponent,
TooltipComponent,
TransformComponent,
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
}
})
use([
DatasetComponent,
CanvasRenderer,
ScatterChart,
LineChart,
GridComponent,
LegendComponent,
TooltipComponent,
TransformComponent,
VisualMapComponent,
UniversalTransition,
LabelLayout
])
registerTransform(ecStat.transform.regression)
const replaceMergeArr = ref<string[]>()
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
@@ -0,0 +1,84 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { ScatterMuitDataConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis']
export const seriesItem = {
type: 'scatter',
emphasis: {
focus: 'series'
}
}
export const option = {
dataset: dataJson,
tooltip: {
showDelay: 0,
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {},
// visualMap: {
// min: 0,
// max: 360,
// dimension: 1,
// orient: 'vertical',
// right: 10,
// top: 'center',
// text: ['高', '低'],
// calculable: true,
// inRange: {
// color: ['#f2c31a', '#24b7f2']
// }
// },
xAxis: {
type: 'value',
scale: true,
// axisLabel: {
// formatter: '{value} cm'
// },
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
scale: true,
// axisLabel: {
// formatter: '{value} kg'
// },
splitLine: {
show: false
}
},
// series: [
// { ...seriesItem, datasetIndex: 0 },
// { ...seriesItem, datasetIndex: 1 }
// ],
series: dataJson.map((item, index) => ({
...seriesItem,
// name: (item.dimensions && item.dimensions[0]) || `data${index}`,
datasetIndex: index
}))
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ScatterMuitDataConfig.key
public chartConfig = cloneDeep(ScatterMuitDataConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}
@@ -0,0 +1,18 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
// eslint-disable-next-line no-unused-vars
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
}
})
</script>
@@ -0,0 +1,15 @@
import image from '@/assets/images/chart/charts/point.png'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const ScatterMuitDataConfig: ConfigType = {
key: 'ScatterMuitData',
chartKey: 'VScatterMuitData',
conKey: 'VCScatterMuitData',
title: '多数据散点图',
category: ChatCategoryEnum.SCATTER,
categoryName: ChatCategoryEnumName.SCATTER,
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.ECHARTS,
image
}
@@ -1,3 +1,5 @@
import { ScatterCommonConfig } from './ScatterCommon/index'
import { ScatterBasicConfig } from './ScatterBasic/index'
import { ScatterMuitDataConfig } from './ScatterMuitData/index'
import { SScatterLogarithmicRegressionConfig as ScatterLogarithmicRegressionConfig } from './ScatterLogarithmicRegression/index'
export default [ScatterCommonConfig]
export default [ScatterBasicConfig, ScatterMuitDataConfig, ScatterLogarithmicRegressionConfig]