perf: 优化异常处理

This commit is contained in:
奔跑的面条
2022-10-12 21:57:30 +08:00
parent b2eb54ca4b
commit 37593bc257
21 changed files with 390 additions and 307 deletions
@@ -53,17 +53,21 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
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(seriesItem)
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(seriesItem)
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
} catch (error) {
console.log(error)
}
},
{
@@ -52,17 +52,21 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
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(seriesItem)
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(seriesItem)
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
} catch (error) {
console.log(error)
}
},
{
@@ -53,17 +53,21 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
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(seriesItem)
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(seriesItem)
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
} catch (error) {
console.log(error)
}
},
{
@@ -1,10 +1,5 @@
<template>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option.value"
:manual-update="isPreview()"
autoresize>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
</v-chart>
</template>
@@ -37,14 +32,7 @@ const props = defineProps({
}
})
use([
DatasetComponent,
CanvasRenderer,
LineChart,
GridComponent,
TooltipComponent,
LegendComponent,
])
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStore = useChartEditStore()
const option = reactive({
@@ -52,32 +40,42 @@ const option = reactive({
})
// 渐变色处理
watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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)'
}
])
})
watch(
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
(newColor: keyof typeof chartColorsSearch) => {
try {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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
}
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option = option.value
}, {
immediate: true
})
)
watch(() => props.chartConfig.option.dataset, () => {
option.value = props.chartConfig.option
})
watch(
() => props.chartConfig.option.dataset,
() => {
option.value = props.chartConfig.option
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
@@ -1,93 +1,79 @@
<template>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option.value"
:manual-update="isPreview()"
autoresize
></v-chart>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
import { reactive, watch, PropType } from "vue";
import VChart from "vue-echarts";
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 } from "@/utils";
import { reactive, watch, PropType } from 'vue'
import VChart from 'vue-echarts'
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 } from '@/utils'
const props = defineProps({
themeSetting: {
type: Object,
required: true,
required: true
},
themeColor: {
type: Object,
required: true,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true,
},
});
required: true
}
})
use([
DatasetComponent,
CanvasRenderer,
LineChart,
GridComponent,
TooltipComponent,
LegendComponent,
]);
const chartEditStore = useChartEditStore();
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const chartEditStore = useChartEditStore()
const option = reactive({
value: {},
});
value: {}
})
// 渐变色处理
watch(
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
(newColor: keyof typeof chartColorsSearch) => {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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)",
},
]);
});
try {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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)
}
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
props.chartConfig.option = option.value;
},
{
immediate: true,
immediate: true
}
);
)
watch(
() => props.chartConfig.option.dataset,
() => {
option.value = props.chartConfig.option;
option.value = props.chartConfig.option
}
);
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
@@ -43,17 +43,21 @@ const option = reactive({
watch(
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
(newColor: keyof typeof chartColorsSearch) => {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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]
try {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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)
}
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option = option.value
},
{
immediate: true
@@ -64,9 +64,9 @@ registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, spe
// 进行更换初始化地图 如果为china 单独处理
const registerMapInitAsync = async () => {
await nextTick()
if (props.chartConfig.option.mapRegion.adcode!="china") {
if (props.chartConfig.option.mapRegion.adcode != 'china') {
await getGeojson(props.chartConfig.option.mapRegion.adcode)
}else{
} else {
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
}
vEchartsSetOption()
@@ -90,12 +90,12 @@ const dataSetHandle = async (dataset: any) => {
isPreview() && vEchartsSetOption()
}
// 处理海南群岛
const hainanLandsHandle=async(newData:boolean)=>{
const hainanLandsHandle = async (newData: boolean) => {
if (newData) {
await getGeojson('china')
} else {
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
}
await getGeojson('china')
} else {
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
}
}
//监听 dataset 数据发生变化
watch(
@@ -113,8 +113,12 @@ watch(
watch(
() => props.chartConfig.option.mapRegion.showHainanIsLands,
async newData => {
await hainanLandsHandle(newData)
vEchartsSetOption()
try {
await hainanLandsHandle(newData)
vEchartsSetOption()
} catch (error) {
console.log(error)
}
},
{
deep: false
@@ -125,12 +129,16 @@ watch(
watch(
() => props.chartConfig.option.mapRegion.adcode,
async newData => {
await getGeojson(newData)
props.chartConfig.option.geo.map = newData
props.chartConfig.option.series.forEach((item: any) => {
if (item.type === 'map') item.map = newData
})
vEchartsSetOption()
try {
await getGeojson(newData)
props.chartConfig.option.geo.map = newData
props.chartConfig.option.series.forEach((item: any) => {
if (item.type === 'map') item.map = newData
})
vEchartsSetOption()
} catch (error) {
console.log(error)
}
},
{
deep: false
@@ -75,7 +75,11 @@ const dataSetHandle = (dataset: typeof dataJson) => {
watch(
() => props.chartConfig.option.dataset,
newData => {
dataSetHandle(newData)
try {
dataSetHandle(newData)
} catch (error) {
console.log(error)
}
},
{
deep: false
@@ -57,7 +57,11 @@ const option = shallowReactive({
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
option.dataset = toNumber(newData, 2)
try {
option.dataset = toNumber(newData, 2)
} catch (error) {
console.log(error)
}
},
{
deep: false
@@ -57,7 +57,11 @@ const dataSetHandle = (dataset: typeof dataJson) => {
watch(
() => props.chartConfig.option.dataset,
newData => {
dataSetHandle(newData)
try {
dataSetHandle(newData)
} catch (error) {
console.log(error)
}
},
{
deep: false
@@ -49,8 +49,12 @@ const dataSetHandle = (dataset: typeof dataJson) => {
watch(
() => props.chartConfig.option.dataset,
newData => {
if(!isArray(newData)) return
dataSetHandle(newData)
try {
if (!isArray(newData)) return
dataSetHandle(newData)
} catch (error) {
console.log(error)
}
},
{
deep: false
@@ -42,23 +42,27 @@ const option = reactive({
watch(
() => chartEditStore.getEditCanvasConfig.chartThemeColor,
(newColor: keyof typeof chartColorsSearch) => {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
// 背景颜色
props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
// 水球颜色
props.chartConfig.option.series[0].color[0].colorStops = [
{
offset: 0,
color: themeColor[0]
},
{
offset: 1,
color: themeColor[1]
}
]
try {
if (!isPreview()) {
const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
// 背景颜色
props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
// 水球颜色
props.chartConfig.option.series[0].color[0].colorStops = [
{
offset: 0,
color: themeColor[0]
},
{
offset: 1,
color: themeColor[1]
}
]
}
option.value = props.chartConfig.option
} catch (error) {
console.log(error)
}
option.value = props.chartConfig.option
},
{
immediate: true
@@ -75,7 +79,7 @@ const dataHandle = (newData: number | string) => {
watch(
() => props.chartConfig.option.dataset,
newData => {
if(!isString(newData) && !isNumber(newData)) return
if (!isString(newData) && !isNumber(newData)) return
props.chartConfig.option.series[0].data = [dataHandle(newData)]
option.value = props.chartConfig.option
},
@@ -48,7 +48,13 @@ const dataHandle = (newData: any) => {
// 配置时
watch(
() => props.chartConfig.option.dataset,
newData => dataHandle(newData),
newData => {
try {
dataHandle(newData)
} catch (error) {
console.log(error)
}
},
{
immediate: true,
deep: false
@@ -39,15 +39,19 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.type,
newData => {
if (newData === 'nomal') {
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = false
} else if (newData === 'ring') {
props.chartConfig.option.series[0].radius = ['40%', '65%']
props.chartConfig.option.series[0].roseType = false
} else {
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = true
try {
if (newData === 'nomal') {
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = false
} else if (newData === 'ring') {
props.chartConfig.option.series[0].radius = ['40%', '65%']
props.chartConfig.option.series[0].roseType = false
} else {
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = true
}
} catch (error) {
console.log(error)
}
},
{ deep: false, immediate: true }
@@ -69,17 +69,21 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.dataset,
(newData, oldData) => {
if (!isArray(newData)) return
if (Array.isArray(newData)) {
replaceMergeArr.value = ['series']
// eslint-disable-next-line vue/no-mutating-props
props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
...seriesItem,
datasetIndex: index
}))
nextTick(() => {
replaceMergeArr.value = []
})
try {
if (!isArray(newData)) return
if (Array.isArray(newData)) {
replaceMergeArr.value = ['series']
// eslint-disable-next-line vue/no-mutating-props
props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
...seriesItem,
datasetIndex: index
}))
nextTick(() => {
replaceMergeArr.value = []
})
}
} catch (error) {
console.log(error)
}
},
{