115 lines
2.1 KiB
TypeScript
115 lines
2.1 KiB
TypeScript
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||
|
|
import { LineGraph01Config } from './index'
|
||
|
|
import { CreateComponentType } from '@/packages/index.d'
|
||
|
|
import cloneDeep from 'lodash/cloneDeep'
|
||
|
|
import { chartInitConfig } from '@/settings/designSetting'
|
||
|
|
import dataJson from './data.json'
|
||
|
|
export interface DataSourceItem {
|
||
|
|
dataname: string;
|
||
|
|
values: number[];
|
||
|
|
datavalues: (string | number)[][];
|
||
|
|
}
|
||
|
|
export interface DatasType {
|
||
|
|
title: string;
|
||
|
|
names: string[];
|
||
|
|
tip: string;
|
||
|
|
dataIndex: number;
|
||
|
|
dataSource: DataSourceItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||
|
|
export const seriesItem = {
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
symbol: 'none',
|
||
|
|
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'top',
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: null,
|
||
|
|
borderRadius: 0
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
type: 'solid',
|
||
|
|
width: 2,
|
||
|
|
color: '#50BB9A'
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(80,187,154,0.6)'
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(80,187,154,0.3)'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export const option = {
|
||
|
|
dataset: {
|
||
|
|
source: dataJson.dataSource[0].datavalues
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '15%',
|
||
|
|
right: '12%',
|
||
|
|
top: 9,
|
||
|
|
bottom: '25%'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#B7BFC6'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}s',
|
||
|
|
color: "#4C535B"
|
||
|
|
},
|
||
|
|
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
series: [seriesItem]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||
|
|
public key: string = LineGraph01Config.key
|
||
|
|
public chartConfig = cloneDeep(LineGraph01Config)
|
||
|
|
public mockData = dataJson
|
||
|
|
// 图表配置项
|
||
|
|
public option = echartOptionProfixHandle(option, includes)
|
||
|
|
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||
|
|
}
|
||
|
|
|