189 lines
3.9 KiB
TypeScript
189 lines
3.9 KiB
TypeScript
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
|
import { CarbonEmissionConfig } from './index'
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|
import { graphic } from 'echarts/core'
|
|
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|
import dataJson from './data.json'
|
|
import { fontStyle } from 'html2canvas/dist/types/css/property-descriptors/font-style'
|
|
import {chartInitConfig} from "@/settings/designSetting";
|
|
|
|
export const includes = ['xAxis', 'yAxis']
|
|
const otherOption = {
|
|
sceneCode: '',
|
|
titleText: '碳排放',
|
|
unit: dataJson.unit,
|
|
}
|
|
|
|
const option = {
|
|
...otherOption,
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: '20',
|
|
right: '50',
|
|
itemStyle: {
|
|
borderType: 'dotted'
|
|
},
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
cap: 'round',
|
|
opacity: 0.9,
|
|
},
|
|
// icon: 'rect',
|
|
data: [{
|
|
name: '电',
|
|
// 强制设置图形为圆。
|
|
icon: 'rect',
|
|
itemStyle: {
|
|
color: 'rgba(12, 109, 196,1)'
|
|
}, textStyle: {
|
|
color: '#eee'
|
|
},
|
|
}, {
|
|
name: '燃气',
|
|
textStyle: {
|
|
color: '#eee'
|
|
},
|
|
// 强制设置图形为圆。
|
|
icon: 'rect',
|
|
itemStyle: {
|
|
color: 'rgba(48, 189, 104,1)'
|
|
},
|
|
}],
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
//
|
|
axisLabel: {
|
|
color: '#eee',
|
|
interval: 0,
|
|
fontSize: 9,
|
|
margin: 20
|
|
}
|
|
|
|
},
|
|
// name: '单位：万/kwh',
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
interval: 25,
|
|
name: '单位：万/kwh',
|
|
nameTextStyle:{
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
},
|
|
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'
|
|
}
|
|
}
|
|
},
|
|
dataset: { ...dataJson },
|
|
series: [
|
|
{
|
|
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 0, //设定实心点的大小
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
lineStyle: {
|
|
width: 3,
|
|
type: 'solid',
|
|
|
|
color: 'rgba(12, 109, 196,1)'
|
|
},
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: chartColorsSearch[defaultTheme][3]
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(12, 57, 68,0.5)'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
{
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 0, //设定实心点的大小
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
lineStyle: {
|
|
width: 3,
|
|
type: 'solid',
|
|
join: 'round',
|
|
color: 'rgba(48, 189, 104,1)'
|
|
},
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: chartColorsSearch[defaultTheme][4]
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(8, 48, 85,0.5)'
|
|
}
|
|
])
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
|
public key: string = CarbonEmissionConfig.key
|
|
public chartConfig = cloneDeep(CarbonEmissionConfig)
|
|
// 图表配置项
|
|
public option = echartOptionProfixHandle(option, includes)
|
|
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
|
|
}
|