feat【能源场景】：完善供水系统显示逻辑
This commit is contained in:
parent
418cefce82
commit
0a292d40e5
@ -6,8 +6,175 @@ import dataJson from './data.json'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export const includes = []
|
||||
const otherOption = {
|
||||
secneID: '',
|
||||
unit: dataJson.unit,
|
||||
}
|
||||
export const option = {
|
||||
...otherOption,
|
||||
// 添加标题配置
|
||||
title: {
|
||||
text: '单位：' + otherOption.unit,
|
||||
left: '2%',
|
||||
top: '2%',
|
||||
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
|
||||
},
|
||||
|
||||
const option = {
|
||||
// X轴配置
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
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: false,
|
||||
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: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 数据系列配置
|
||||
series: [{
|
||||
name: '左侧',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: "rgba(26,102,255,0)" // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "#22bef5", // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
barGap: 0,
|
||||
|
||||
},
|
||||
{
|
||||
name: '右侧',
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: "rgba(51,153,255,0)" // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "#22bef5", // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
barGap: 0
|
||||
}, {
|
||||
name: '顶部',
|
||||
type: 'pictorialBar',
|
||||
symbol: 'diamond',
|
||||
symbolSize: ['16', '9'],
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: ['', '-50%'],
|
||||
itemStyle: {
|
||||
color: '#44D5FC'
|
||||
},
|
||||
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
|
||||
}]
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="go-energy-box">
|
||||
<div class="content">
|
||||
<!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
|
||||
<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>
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, onMounted, ref } from 'vue'
|
||||
import { PropType, computed, onMounted, ref, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import * as echarts from 'echarts'
|
||||
@ -24,7 +23,6 @@ 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,
|
||||
@ -50,189 +48,30 @@ use([
|
||||
|
||||
const replaceMergeArr = ref<string[]>([])
|
||||
|
||||
// const option = computed(() => {
|
||||
// return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
// })
|
||||
const updataUnit = () => {
|
||||
option.value.title.text = '单位：' + option.value.unit;
|
||||
}
|
||||
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
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
updataUnit();
|
||||
option.value.dataset = newData
|
||||
}, {
|
||||
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
|
||||
}]
|
||||
};
|
||||
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
// 更新显示单位
|
||||
updataUnit();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,8 @@ import * as echarts from 'echarts'
|
||||
|
||||
export const includes = []
|
||||
const otherOption = {
|
||||
unit: '万kwh',
|
||||
secneID:'',
|
||||
unit: dataJson.unit,
|
||||
}
|
||||
|
||||
const option = {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>你好</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
|
||||
@ -52,5 +52,6 @@
|
||||
"month": "12月",
|
||||
"value": 67
|
||||
}
|
||||
]
|
||||
],
|
||||
"unit": "万kwh"
|
||||
}
|
||||
@ -6,11 +6,29 @@ 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 = {
|
||||
const wid = 12;
|
||||
const w1 = Math.sin(Math.PI / 6) * wid; //4
|
||||
const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
|
||||
const snapHeight = wid / 2;
|
||||
const otherOption = {
|
||||
wid, w1, w2, snapHeight,
|
||||
unit: dataJson.unit,
|
||||
secneID:''
|
||||
}
|
||||
export 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',
|
||||
@ -23,7 +41,6 @@ const option = {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
dataset: dataJson,
|
||||
// 网格配置
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -38,7 +55,8 @@ const option = {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#eee'
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'solid',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
@ -46,22 +64,25 @@ const option = {
|
||||
},
|
||||
//
|
||||
axisLabel: {
|
||||
color: '#80b0c4',
|
||||
color: '#eee',
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
margin: 20
|
||||
}
|
||||
|
||||
},
|
||||
z: 1
|
||||
},
|
||||
|
||||
// Y轴配置
|
||||
yAxis: {
|
||||
|
||||
type: 'value',
|
||||
min: 0,
|
||||
interval: 25,
|
||||
axisLine: {
|
||||
show: false,
|
||||
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
@ -75,76 +96,28 @@ const option = {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
z: 0,
|
||||
},
|
||||
|
||||
// 数据系列配置
|
||||
series: [{
|
||||
|
||||
name: '能源消耗',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
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,
|
||||
|
||||
color: 'transparent',
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: createRenderItemFunction(wid, w1, w2, snapHeight)
|
||||
}
|
||||
],
|
||||
|
||||
// 图形元素配置
|
||||
graphic: [{
|
||||
// 单位标注
|
||||
type: 'text',
|
||||
left: '3%',
|
||||
top: '3%',
|
||||
style: {
|
||||
text: '单位：' + dataJson.unit,
|
||||
fontSize: 12,
|
||||
fill: 'rgba(255, 255, 255, 0.7)',
|
||||
}
|
||||
}, {
|
||||
// 左侧阴影效果
|
||||
type: 'rect',
|
||||
left: 0,
|
||||
@ -153,7 +126,7 @@ const option = {
|
||||
bottom: '3%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||
])
|
||||
},
|
||||
@ -175,6 +148,142 @@ const option = {
|
||||
}]
|
||||
};
|
||||
|
||||
// 导出 renderItem 函数
|
||||
export function createRenderItemFunction(wid: number, w1: number, w2: number, snapHeight: number) {
|
||||
return (params: any, api: any) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
location[0] = location[0] + wid * 0;
|
||||
const xlocation = api.coord([api.value(0), 0]);
|
||||
xlocation[0] = xlocation[0] + wid * 0;
|
||||
|
||||
return {
|
||||
type: 'group',
|
||||
children: [{
|
||||
type: 'CubeLeft',
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: xlocation
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#01F0FF'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#005559'
|
||||
}])
|
||||
}
|
||||
}, {
|
||||
type: 'CubeRight',
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: xlocation
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#23C9CC'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#005559'
|
||||
}])
|
||||
}
|
||||
}, {
|
||||
type: 'CubeTop',
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: xlocation
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: '#2BFAFF'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#029199'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
export function createCubeShapes() {
|
||||
const wid = otherOption.wid;
|
||||
const w1 = otherOption.w1;
|
||||
const w2 = otherOption.w2;
|
||||
const snapHeight = otherOption.snapHeight;
|
||||
|
||||
const CubeLeft = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint
|
||||
const c0 = [shape.x, shape.y]
|
||||
const c1 = [shape.x - w2, shape.y]
|
||||
const c2 = [shape.x - w2, xAxisPoint[1]]
|
||||
const c3 = [shape.x, xAxisPoint[1]]
|
||||
ctx.moveTo(c0[0], c0[1])
|
||||
ctx.lineTo(c1[0], c1[1])
|
||||
ctx.lineTo(c2[0], c2[1])
|
||||
ctx.lineTo(c3[0], c3[1])
|
||||
ctx.closePath()
|
||||
}
|
||||
})
|
||||
|
||||
const CubeRight = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint
|
||||
const c1 = [shape.x, shape.y]
|
||||
const c2 = [shape.x, xAxisPoint[1]]
|
||||
const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight]
|
||||
const c4 = [shape.x + w1, shape.y - w2 + snapHeight]
|
||||
ctx.moveTo(c1[0], c1[1]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.lineTo(c4[0], c4[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
})
|
||||
|
||||
const CubeTop = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c1 = [shape.x, shape.y]
|
||||
const c2 = [shape.x + w1, shape.y - w2 + snapHeight]
|
||||
const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight]
|
||||
const c4 = [shape.x - w2, shape.y]
|
||||
ctx.moveTo(c1[0], c1[1]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.lineTo(c4[0], c4[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
})
|
||||
|
||||
return { CubeLeft, CubeRight, CubeTop };
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = WaterSupplySystemConfig.key
|
||||
public chartConfig = cloneDeep(WaterSupplySystemConfig)
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="go-energy-box">
|
||||
<div class="content">
|
||||
<!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
|
||||
<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>
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, onMounted, ref } from 'vue'
|
||||
import { PropType, computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import * as echarts from 'echarts'
|
||||
@ -20,11 +19,10 @@ 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 config, { includes, createCubeShapes, createRenderItemFunction } 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,
|
||||
@ -39,6 +37,7 @@ const props = defineProps({
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const { CubeLeft, CubeRight, CubeTop } = createCubeShapes();
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
@ -50,184 +49,25 @@ use([
|
||||
|
||||
const replaceMergeArr = ref<string[]>([])
|
||||
|
||||
// const option = computed(() => {
|
||||
// return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
// })
|
||||
const option = computed(() => {
|
||||
const mergedOption = 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
|
||||
},
|
||||
// 重新设置 renderItem 函数
|
||||
if (mergedOption.series && mergedOption.series[1] && mergedOption.series[1].type === 'custom') {
|
||||
const { wid, w1, w2, snapHeight } = props.chartConfig.option;
|
||||
mergedOption.series[1].renderItem = createRenderItemFunction(wid, w1, w2, snapHeight)
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
return mergedOption
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 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
|
||||
})
|
||||
|
||||
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
||||
echarts.graphic.registerShape('CubeRight', CubeRight)
|
||||
echarts.graphic.registerShape('CubeTop', CubeTop)
|
||||
onMounted(async () => {
|
||||
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user