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 { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
|
||||
import { WaterSupplySystemConfig } from "./WaterSupplySystem"
|
||||
import { AirSupplySystemConfig } from './AirSupplySystem'
|
||||
export default [
|
||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig
|
||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig, WaterSupplySystemConfig, AirSupplySystemConfig
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user