2022-09-12 00:28:13 +08:00
|
|
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
2022-02-24 21:02:08 +08:00
|
|
|
import { LineGradientsConfig } from './index'
|
|
|
|
import { CreateComponentType } from '@/packages/index.d'
|
2022-02-25 11:19:51 +08:00
|
|
|
import { graphic } from 'echarts/core'
|
2022-03-12 11:29:57 +08:00
|
|
|
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
2022-11-12 15:37:41 +08:00
|
|
|
import cloneDeep from 'lodash/cloneDeep'
|
2022-03-20 18:11:26 +08:00
|
|
|
import dataJson from './data.json'
|
2022-02-24 21:02:08 +08:00
|
|
|
|
2022-10-14 16:46:41 +08:00
|
|
|
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
2022-02-24 21:02:08 +08:00
|
|
|
|
2022-02-26 17:38:24 +08:00
|
|
|
const option = {
|
2022-03-09 19:22:58 +08:00
|
|
|
tooltip: {
|
|
|
|
show: true,
|
|
|
|
trigger: 'axis',
|
|
|
|
axisPointer: {
|
|
|
|
type: 'line'
|
|
|
|
}
|
|
|
|
},
|
2022-02-26 17:38:24 +08:00
|
|
|
xAxis: {
|
|
|
|
show: true,
|
2022-09-12 00:28:13 +08:00
|
|
|
type: 'category'
|
2022-02-26 17:38:24 +08:00
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
show: true,
|
2022-02-28 10:30:51 +08:00
|
|
|
type: 'value'
|
2022-02-26 17:38:24 +08:00
|
|
|
},
|
2022-03-20 18:11:26 +08:00
|
|
|
dataset: { ...dataJson },
|
2022-02-26 17:38:24 +08:00
|
|
|
series: [
|
|
|
|
{
|
|
|
|
type: 'line',
|
|
|
|
smooth: false,
|
2022-10-14 16:46:41 +08:00
|
|
|
symbolSize: 5, //设定实心点的大小
|
2022-10-09 16:04:29 +08:00
|
|
|
label: {
|
|
|
|
show: true,
|
|
|
|
position: 'top',
|
|
|
|
color: '#fff',
|
|
|
|
fontSize: 12
|
|
|
|
},
|
2022-02-28 10:30:51 +08:00
|
|
|
lineStyle: {
|
2022-05-03 15:36:35 +08:00
|
|
|
width: 3,
|
2022-09-12 00:28:13 +08:00
|
|
|
type: 'solid'
|
2022-02-28 10:30:51 +08:00
|
|
|
},
|
2022-02-26 17:38:24 +08:00
|
|
|
areaStyle: {
|
|
|
|
opacity: 0.8,
|
|
|
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
2022-03-12 11:29:57 +08:00
|
|
|
color: chartColorsSearch[defaultTheme][3]
|
2022-02-26 17:38:24 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
2022-03-12 11:29:57 +08:00
|
|
|
color: 'rgba(0,0,0,0)'
|
2022-02-28 10:30:51 +08:00
|
|
|
}
|
|
|
|
])
|
2022-09-12 00:28:13 +08:00
|
|
|
}
|
2022-02-25 11:19:51 +08:00
|
|
|
},
|
2022-02-26 17:38:24 +08:00
|
|
|
{
|
|
|
|
type: 'line',
|
|
|
|
smooth: false,
|
2022-10-09 16:04:29 +08:00
|
|
|
label: {
|
|
|
|
show: true,
|
|
|
|
position: 'top',
|
|
|
|
color: '#fff',
|
|
|
|
fontSize: 12
|
|
|
|
},
|
2022-02-28 10:30:51 +08:00
|
|
|
lineStyle: {
|
2022-09-14 15:31:56 +08:00
|
|
|
width: 3,
|
|
|
|
type: 'solid'
|
2022-02-28 10:30:51 +08:00
|
|
|
},
|
2022-02-26 17:38:24 +08:00
|
|
|
areaStyle: {
|
2022-03-11 10:22:54 +08:00
|
|
|
opacity: 0.8,
|
|
|
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
2022-03-12 11:29:57 +08:00
|
|
|
color: chartColorsSearch[defaultTheme][4]
|
2022-03-11 10:22:54 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
2022-03-12 11:29:57 +08:00
|
|
|
color: 'rgba(0,0,0,0)'
|
2022-03-11 10:22:54 +08:00
|
|
|
}
|
|
|
|
])
|
2022-09-12 00:28:13 +08:00
|
|
|
}
|
2022-02-28 10:30:51 +08:00
|
|
|
}
|
|
|
|
]
|
2022-02-26 17:38:24 +08:00
|
|
|
}
|
2022-02-24 21:02:08 +08:00
|
|
|
|
2022-09-12 00:28:13 +08:00
|
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
2022-02-24 21:02:08 +08:00
|
|
|
public key: string = LineGradientsConfig.key
|
2022-11-12 15:37:41 +08:00
|
|
|
public chartConfig = cloneDeep(LineGradientsConfig)
|
2022-02-24 21:02:08 +08:00
|
|
|
// 图表配置项
|
2022-02-26 17:38:24 +08:00
|
|
|
public option = echartOptionProfixHandle(option, includes)
|
2022-02-25 11:19:51 +08:00
|
|
|
}
|