go-viee-fetch-Demo/src/packages/components/Charts/MyComponents/LineDropdown/config.ts
2025-08-24 21:23:02 +08:00

114 lines
2.5 KiB
TypeScript

import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { LineDropdownConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['xAxis', 'yAxis', 'grid']
const option = {
backgroundColor: 'rgba(13, 16, 22, 1)',
grid: {
left: '8%',
right: '8%',
top: '15%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 12
},
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)',
type: 'solid'
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(58, 160, 255, 1)',
type: 'solid'
}
}
},
dataset: { ...dataJson },
series: [
{
type: 'line',
smooth: true,
symbol: 'none', // 默认不显示点
symbolSize: 8,
lineStyle: {
width: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(58, 160, 255, 1)' },
{ offset: 1, color: 'rgba(127, 216, 255, 1)' }
]
}
},
emphasis: {
focus: 'series',
symbol: 'circle', // 鼠标悬停时显示圆点
symbolSize: 8,
itemStyle: {
color: 'rgba(58, 160, 255, 1)',
borderColor: 'rgba(255, 255, 255, 0.8)',
borderWidth: 2
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(58, 160, 255, 0.5)' },
{ offset: 1, color: 'rgba(58, 160, 255, 0.05)' }
]
}
}
}
]
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = LineDropdownConfig.key
public chartConfig = cloneDeep(LineDropdownConfig)
public option = echartOptionProfixHandle(option, includes)
}