feat【能源大屏】：新增（供水系统、供风系统）未完成
This commit is contained in:
parent
c11e5ded59
commit
c6db32eecd
@ -0,0 +1,18 @@
|
|||||||
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||||
|
import { AirSupplySystemConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
export const includes = []
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key: string = AirSupplySystemConfig.key
|
||||||
|
public chartConfig = cloneDeep(AirSupplySystemConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = echartOptionProfixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>你好</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, computed } from 'vue'
|
||||||
|
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||||
|
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||||
|
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<GlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"dimensions": [
|
||||||
|
"month",
|
||||||
|
"value"
|
||||||
|
],
|
||||||
|
"source": [
|
||||||
|
{
|
||||||
|
"month": "1月",
|
||||||
|
"value": 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "2月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "3月",
|
||||||
|
"value": 66
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "4月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "5月",
|
||||||
|
"value": 89
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "6月",
|
||||||
|
"value": 67
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "7月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "8月",
|
||||||
|
"value": 89
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "9月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "10月",
|
||||||
|
"value": 89
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "11月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "12月",
|
||||||
|
"value": 67
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "万kwh"
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const AirSupplySystemConfig: ConfigType = {
|
||||||
|
key: 'AirSupplySystem',
|
||||||
|
chartKey: 'VAirSupplySystem',
|
||||||
|
conKey: 'VCAirSupplySystem',
|
||||||
|
title: '供风系统',
|
||||||
|
category: ChatCategoryEnum.IntegratedEnergy,
|
||||||
|
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.ECHARTS,
|
||||||
|
image: 'AirSupplySystem.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,250 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-energy-box">
|
||||||
|
<div class="content">
|
||||||
|
<!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
|
||||||
|
replaceMerge: replaceMergeArr
|
||||||
|
}" autoresize>
|
||||||
|
</v-chart> -->
|
||||||
|
<v-chart :option="option" autosize></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, computed, onMounted, ref } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { BarChart } from 'echarts/charts'
|
||||||
|
import { TitleComponent, GridComponent } from 'echarts/components'
|
||||||
|
import config, { includes } from './config'
|
||||||
|
import { mergeTheme } from '@/packages/public/chart'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
const props = defineProps({
|
||||||
|
themeSetting: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
themeColor: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||||
|
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
TitleComponent,
|
||||||
|
GridComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const replaceMergeArr = ref<string[]>([])
|
||||||
|
|
||||||
|
// const option = computed(() => {
|
||||||
|
// return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
|
// })
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
// 添加标题配置
|
||||||
|
title: {
|
||||||
|
text: '单位：' + dataJson.unit,
|
||||||
|
left: '3%',
|
||||||
|
top: '3%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
fontWeight: 'normal'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 提示框配置
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||||
|
borderColor: '#00ffff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataset: dataJson,
|
||||||
|
// 网格配置
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// X轴配置
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
//
|
||||||
|
axisLabel: {
|
||||||
|
color: '#80b0c4',
|
||||||
|
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: '左侧',
|
||||||
|
tooltip: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 7,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(26,102,255,0)" // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(26,102,255,0.9)", // 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barGap: 0,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '右侧',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 7,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(51,153,255,0)" // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(26,102,255,1)", // 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barGap: 0
|
||||||
|
}, {
|
||||||
|
name: '顶部',
|
||||||
|
tooltip: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
type: 'pictorialBar',
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#fff',
|
||||||
|
color: '#66B2FF' // 顶部方块的颜色
|
||||||
|
},
|
||||||
|
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
|
||||||
|
symbolSize: ['13', '7'], // 第一个值控制顶部方形大小
|
||||||
|
symbolOffset: ['-3', '-3'], // 控制顶部放行 左右和上下
|
||||||
|
symbolRotate: -16,
|
||||||
|
symbolPosition: 'end',
|
||||||
|
barGap: 0,
|
||||||
|
z: 3,
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// 图形元素配置
|
||||||
|
graphic: [{
|
||||||
|
// 左侧阴影效果
|
||||||
|
type: 'rect',
|
||||||
|
left: 0,
|
||||||
|
top: '15%',
|
||||||
|
width: '25%',
|
||||||
|
bottom: '3%',
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||||
|
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}, {
|
||||||
|
// 底部阴影效果
|
||||||
|
type: 'rect',
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
height: '10%',
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
||||||
|
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
||||||
|
])
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@include go('energy-box') {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,183 @@
|
|||||||
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||||
|
import { WaterSupplySystemConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
export const includes = ['title']
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
// var myChart = echarts.init(document.getElementById('main'));
|
||||||
|
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
// 提示框配置
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||||
|
borderColor: '#00ffff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataset: dataJson,
|
||||||
|
// 网格配置
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// X轴配置
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eee'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
//
|
||||||
|
axisLabel: {
|
||||||
|
color: '#80b0c4',
|
||||||
|
interval: 0,
|
||||||
|
fontSize: 9,
|
||||||
|
margin: 20
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// Y轴配置
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
interval: 25,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
|
||||||
|
},
|
||||||
|
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: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#1d7b7b' }, // 更暗的左侧颜色，增强阴影效果
|
||||||
|
{ offset: 0.2, color: '#196b6b' }, // 左侧过渡色
|
||||||
|
{ offset: 0.7, color: '#00cccc' }, // 中间主色
|
||||||
|
{ offset: 0.8, color: '#33dddd' }, // 右侧过渡色
|
||||||
|
{ offset: 1, color: '#66ffff' } // 右侧亮色，增强高光效果
|
||||||
|
]),
|
||||||
|
// 添加更强的3D效果
|
||||||
|
shadowBlur: 20,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.7)',
|
||||||
|
shadowOffsetX: -5,
|
||||||
|
shadowOffsetY: 5,
|
||||||
|
borderRadius: [0, 0, 6, 6],
|
||||||
|
borderWidth: 0,
|
||||||
|
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowColor: 'rgba(0, 255, 255, 0.9)',
|
||||||
|
shadowBlur: 25,
|
||||||
|
shadowOffsetX: -8,
|
||||||
|
shadowOffsetY: 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// })),
|
||||||
|
|
||||||
|
barWidth: '40%',
|
||||||
|
|
||||||
|
// 3D圆柱体效果
|
||||||
|
roundCap: true
|
||||||
|
}, {
|
||||||
|
name: '顶部圆',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
z: 3,
|
||||||
|
symbolSize: ['57%', '10'],
|
||||||
|
symbolOffset: [0.1, -5],
|
||||||
|
symbolPosition: "end",
|
||||||
|
itemStyle: {
|
||||||
|
color: "#40ECEC",
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowColor: 'rgba(0, 255, 255, 0.8)',
|
||||||
|
shadowBlur: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 图形元素配置
|
||||||
|
graphic: [{
|
||||||
|
// 单位标注
|
||||||
|
type: 'text',
|
||||||
|
left: '3%',
|
||||||
|
top: '3%',
|
||||||
|
style: {
|
||||||
|
text: '单位：' + dataJson.unit,
|
||||||
|
fontSize: 12,
|
||||||
|
fill: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
// 左侧阴影效果
|
||||||
|
type: 'rect',
|
||||||
|
left: 0,
|
||||||
|
top: '15%',
|
||||||
|
width: '25%',
|
||||||
|
bottom: '3%',
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||||
|
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}, {
|
||||||
|
// 底部阴影效果
|
||||||
|
type: 'rect',
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
height: '10%',
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
||||||
|
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
||||||
|
])
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key: string = WaterSupplySystemConfig.key
|
||||||
|
public chartConfig = cloneDeep(WaterSupplySystemConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = echartOptionProfixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>你好</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, computed } from 'vue'
|
||||||
|
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||||
|
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||||
|
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<GlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"dimensions": [
|
||||||
|
"month",
|
||||||
|
"value"
|
||||||
|
],
|
||||||
|
"source": [
|
||||||
|
{
|
||||||
|
"month": "1月",
|
||||||
|
"value": 88
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "2月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "3月",
|
||||||
|
"value": 66
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "4月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "5月",
|
||||||
|
"value": 89
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "6月",
|
||||||
|
"value": 67
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "7月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "8月",
|
||||||
|
"value": 89
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "9月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "10月",
|
||||||
|
"value": 89
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "11月",
|
||||||
|
"value": 54
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"month": "12月",
|
||||||
|
"value": 67
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "万kwh"
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const WaterSupplySystemConfig: ConfigType = {
|
||||||
|
key: 'WaterSupplySystem',
|
||||||
|
chartKey: 'VWaterSupplySystem',
|
||||||
|
conKey: 'VCWaterSupplySystem',
|
||||||
|
title: '供水系统',
|
||||||
|
category: ChatCategoryEnum.IntegratedEnergy,
|
||||||
|
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.ECHARTS,
|
||||||
|
image: 'WaterSupplySystem.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,247 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-energy-box">
|
||||||
|
<div class="content">
|
||||||
|
<!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
|
||||||
|
replaceMerge: replaceMergeArr
|
||||||
|
}" autoresize>
|
||||||
|
</v-chart> -->
|
||||||
|
<v-chart :option="option" autosize></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, computed, onMounted, ref } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { BarChart } from 'echarts/charts'
|
||||||
|
import { TitleComponent, GridComponent } from 'echarts/components'
|
||||||
|
import config, { includes } from './config'
|
||||||
|
import { mergeTheme } from '@/packages/public/chart'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
const props = defineProps({
|
||||||
|
themeSetting: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
themeColor: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||||
|
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
TitleComponent,
|
||||||
|
GridComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const replaceMergeArr = ref<string[]>([])
|
||||||
|
|
||||||
|
// const option = computed(() => {
|
||||||
|
// return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
|
// })
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
// 添加标题配置
|
||||||
|
title: {
|
||||||
|
text: '单位：' + dataJson.unit,
|
||||||
|
left: '3%',
|
||||||
|
top: '3%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
fontWeight: 'normal'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 提示框配置
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||||
|
borderColor: '#00ffff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataset: dataJson,
|
||||||
|
// 网格配置
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// X轴配置
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
//
|
||||||
|
axisLabel: {
|
||||||
|
color: '#80b0c4',
|
||||||
|
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: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#82ffff' }, // 更暗的左侧颜色，增强阴影效果
|
||||||
|
{ offset: 0.2, color: '#00bfbf' }, // 左侧过渡色
|
||||||
|
{ offset: 0.5, color: '#008f8f' }, // 中间主色
|
||||||
|
{ offset: 0.8, color: '#00bfbf' }, // 右侧过渡色
|
||||||
|
{ offset: 1, color: '#82ffff' } // 右侧亮色，增强高光效果
|
||||||
|
]),
|
||||||
|
opacity: 0.60,
|
||||||
|
// 添加更强的3D效果
|
||||||
|
shadowBlur: 20,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.7)',
|
||||||
|
shadowOffsetX: -5,
|
||||||
|
shadowOffsetY: 5,
|
||||||
|
borderRadius: [0, 0, 4, 4],
|
||||||
|
borderWidth: 0,
|
||||||
|
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowColor: 'rgba(0, 255, 255, 0.9)',
|
||||||
|
shadowBlur: 25,
|
||||||
|
shadowOffsetX: -8,
|
||||||
|
shadowOffsetY: 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// })),
|
||||||
|
|
||||||
|
barWidth: '45%',
|
||||||
|
|
||||||
|
// 3D圆柱体效果
|
||||||
|
roundCap: false
|
||||||
|
}, {
|
||||||
|
name: '顶部圆',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
z: 3,
|
||||||
|
symbolSize: ['62%', '6'],
|
||||||
|
symbolOffset: [0.1, -3],
|
||||||
|
symbolPosition: "end",
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(51, 221, 221, 0.8)",
|
||||||
|
},
|
||||||
|
// opacity: 0.1,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowColor: 'rgba(0, 255, 255, 0.8)',
|
||||||
|
shadowBlur: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 图形元素配置
|
||||||
|
graphic: [{
|
||||||
|
// 左侧阴影效果
|
||||||
|
type: 'rect',
|
||||||
|
left: 0,
|
||||||
|
top: '15%',
|
||||||
|
width: '25%',
|
||||||
|
bottom: '3%',
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||||
|
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}, {
|
||||||
|
// 底部阴影效果
|
||||||
|
type: 'rect',
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
height: '10%',
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
||||||
|
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
||||||
|
])
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@include go('energy-box') {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,5 +1,7 @@
|
|||||||
import { EnergyOverviewConfig } from "./EnergyOverview"
|
import { EnergyOverviewConfig } from "./EnergyOverview"
|
||||||
import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
|
import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
|
||||||
|
import { WaterSupplySystemConfig } from "./WaterSupplySystem"
|
||||||
|
import { AirSupplySystemConfig } from './AirSupplySystem'
|
||||||
export default [
|
export default [
|
||||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig
|
EnergyOverviewConfig, EnergyConsumptionTrendConfig, WaterSupplySystemConfig, AirSupplySystemConfig
|
||||||
]
|
]
|
||||||
Loading…
Reference in New Issue
Block a user