158 lines
3.2 KiB
TypeScript
158 lines
3.2 KiB
TypeScript
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
|
import { GasSystemConfig } from './index'
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|
import * as echarts from 'echarts'
|
|
import dataJson from './data.json'
|
|
|
|
export const includes = []
|
|
const otherOption = {
|
|
sceneCode: '',
|
|
titleText: '燃气系统',
|
|
unit: dataJson.unit,
|
|
}
|
|
|
|
const option = {
|
|
...otherOption,
|
|
dataset: dataJson,
|
|
// 添加标题配置
|
|
title: {
|
|
text: '单位：' + otherOption.unit,
|
|
left: '2%',
|
|
top: '2%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
fontWeight: 'normal'
|
|
}
|
|
},
|
|
// 提示框配置
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
// formatter: function (params) {
|
|
// let param = params[0];
|
|
// return `${param.name}: ${param.value.value}`;
|
|
// },
|
|
axisPointer: {
|
|
type: 'line',
|
|
lineStyle: {
|
|
color: 'rgba(58, 160, 255, 1)',
|
|
type: 'solid'
|
|
}
|
|
}
|
|
},
|
|
// 网格配置
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
|
|
// X轴配置
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
//
|
|
axisLabel: {
|
|
color: '#eee',
|
|
interval: 0,
|
|
fontSize: 9,
|
|
margin: 20
|
|
}
|
|
|
|
},
|
|
|
|
// Y轴配置
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
// interval: 25,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
formatter: '{value}'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
type: 'solid'
|
|
}
|
|
}
|
|
},
|
|
|
|
// 数据系列配置
|
|
series: [
|
|
{
|
|
name: '值',
|
|
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(53, 192, 227,1)' },
|
|
{ offset: 0.4, color: 'rgba(49, 175, 255, 0.8)' },
|
|
{ offset: 1, color: 'rgba(58, 160, 255, 0.05)' }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
};
|
|
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
|
public key: string = GasSystemConfig.key
|
|
public chartConfig = cloneDeep(GasSystemConfig)
|
|
// 图表配置项
|
|
public option = echartOptionProfixHandle(option, includes)
|
|
}
|