Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch
This commit is contained in:
commit
6e7ace57bb
@ -0,0 +1,242 @@
|
|||||||
|
const heightProportion = 0.2 // 柱状扇形的高度比例
|
||||||
|
|
||||||
|
const colorList = [
|
||||||
|
'rgba(0, 81, 180, 0.5)',
|
||||||
|
'rgba(255, 196, 0, 0.5)',
|
||||||
|
'rgba(95, 144, 110, 0.5)',
|
||||||
|
'rgba(144, 19, 254, 0.5)',
|
||||||
|
'rgba(255, 105, 97, 0.5)',
|
||||||
|
'rgba(255, 215, 0, 0.5)',
|
||||||
|
'rgba(126, 211, 33, 0.5)',
|
||||||
|
'rgba(255, 153, 153, 0.5)',
|
||||||
|
'rgba(255, 204, 102, 0.5)',
|
||||||
|
'rgba(153, 204, 255, 0.5)',
|
||||||
|
'rgba(255, 153, 204, 0.5)',
|
||||||
|
'rgba(204, 255, 153, 0.5)',
|
||||||
|
'rgba(255, 204, 204, 0.5)',
|
||||||
|
]
|
||||||
|
|
||||||
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||||
|
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
||||||
|
|
||||||
|
// 计算
|
||||||
|
let midRatio = (startRatio + endRatio) / 3;
|
||||||
|
|
||||||
|
let startRadian = startRatio * Math.PI * 2;
|
||||||
|
let endRadian = endRatio * Math.PI * 2;
|
||||||
|
let midRadian = midRatio * Math.PI * 2;
|
||||||
|
|
||||||
|
// 如果只有一个扇形，则不实现选中效果。
|
||||||
|
if (startRatio === 0 && endRatio === 1) {
|
||||||
|
isSelected = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||||
|
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||||
|
|
||||||
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||||
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||||
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||||
|
|
||||||
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||||
|
let hoverRate = isHovered ? 1.1 : 1;
|
||||||
|
|
||||||
|
// 返回曲面参数方程
|
||||||
|
return {
|
||||||
|
u: {
|
||||||
|
min: -Math.PI,
|
||||||
|
max: Math.PI * 3,
|
||||||
|
step: Math.PI / 32
|
||||||
|
},
|
||||||
|
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20
|
||||||
|
},
|
||||||
|
|
||||||
|
x: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
y: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
z: function (u, v) {
|
||||||
|
if (u < -Math.PI * 0.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
if (u > Math.PI * 2.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
return Math.sin(v) > 0 ? heightProportion * height : -1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成模拟 3D 饼图的配置项
|
||||||
|
export function getPie3D(pieData, internalDiameterRatio) {
|
||||||
|
|
||||||
|
let series = [];
|
||||||
|
let sumValue = 0;
|
||||||
|
let startValue = 0;
|
||||||
|
let endValue = 0;
|
||||||
|
let legendData = [];
|
||||||
|
let linesSeries = []; // line3D模拟label指示线
|
||||||
|
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||||
|
|
||||||
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||||
|
for (let i = 0; i < pieData.length; i++) {
|
||||||
|
|
||||||
|
sumValue += pieData[i].value;
|
||||||
|
|
||||||
|
let seriesItem = {
|
||||||
|
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pieData: pieData[i],
|
||||||
|
pieStatus: {
|
||||||
|
selected: false,
|
||||||
|
hovered: false,
|
||||||
|
k: k
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: colorList[i]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
series.push(seriesItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||||
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||||
|
for (let i = 0; i < series.length; i++) {
|
||||||
|
endValue = startValue + series[i].pieData.value;
|
||||||
|
// console.log(series[i]);
|
||||||
|
series[i].pieData.startRatio = startValue / sumValue;
|
||||||
|
series[i].pieData.endRatio = endValue / sumValue;
|
||||||
|
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,
|
||||||
|
series[i].pieData.endRatio,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
k,
|
||||||
|
series[i].pieData.value / sumValue * 100
|
||||||
|
);
|
||||||
|
|
||||||
|
startValue = endValue;
|
||||||
|
|
||||||
|
// 计算label指示线的起始和终点位置
|
||||||
|
let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
|
||||||
|
let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
|
||||||
|
let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
|
||||||
|
let color = colorList[i];
|
||||||
|
let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)]
|
||||||
|
let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)]
|
||||||
|
|
||||||
|
console.log('endPosArr',endPosArr);
|
||||||
|
linesSeries.push({
|
||||||
|
type: 'line3D',
|
||||||
|
lineStyle: {
|
||||||
|
color: color,
|
||||||
|
},
|
||||||
|
data: [[posX, posY, posZ], turningPosArr, endPosArr]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 0,
|
||||||
|
position: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgb(226,236,236)',
|
||||||
|
borderWidth: 2,
|
||||||
|
fontSize: 18,
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
formatter: '{b}'
|
||||||
|
},
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [{ name: series[i].pieData.value, value: endPosArr }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 0,
|
||||||
|
position: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgb(158,158,158',
|
||||||
|
borderWidth: 2,
|
||||||
|
fontSize: 12,
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
paddingTop:50,
|
||||||
|
},
|
||||||
|
formatter: '{b}'
|
||||||
|
},
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [{ name: series[i].name, value: [endPosArr[0],endPosArr[1],endPosArr[2]*-1] }]
|
||||||
|
});
|
||||||
|
|
||||||
|
legendData.push(series[i].name);
|
||||||
|
}
|
||||||
|
|
||||||
|
series = series.concat(linesSeries)
|
||||||
|
|
||||||
|
// 最底下圆盘
|
||||||
|
// 最底下圆盘
|
||||||
|
series.push({
|
||||||
|
name: 'mouseoutSeries',
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: 'rgba(25, 93, 176, 1)',
|
||||||
|
},
|
||||||
|
parametricEquation: {
|
||||||
|
u: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
x: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
y: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
z: function (u, v) {
|
||||||
|
return Math.cos(v) > 0 ? -0 : -1.5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return series;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 174 KiB |
@ -0,0 +1,99 @@
|
|||||||
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||||
|
import { ConsumptionProportionConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
import { getParametricEquation, getPie3D } from './3dPie'
|
||||||
|
import { chartInitConfig } from '@/settings/designSetting'
|
||||||
|
export const includes = ['legend']
|
||||||
|
|
||||||
|
// 其它配置
|
||||||
|
const otherConfig = {
|
||||||
|
dateTime: {
|
||||||
|
selectValue: 'day',
|
||||||
|
dataset: [
|
||||||
|
{
|
||||||
|
label: '当天',
|
||||||
|
value: 'day'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '本周',
|
||||||
|
value: 'week'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '当月',
|
||||||
|
value: 'month'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '本季度',
|
||||||
|
value: 'quarter'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '当年',
|
||||||
|
value: 'year'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let total = 0
|
||||||
|
dataJson.source.forEach(item => {
|
||||||
|
total += item.value;
|
||||||
|
})
|
||||||
|
|
||||||
|
const series = getPie3D(dataJson.source, 0.8);
|
||||||
|
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
...otherConfig,
|
||||||
|
renderer: 'canvas',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
legend: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
// color: ['rgba(255, 215, 0, 1)', 'rgba(74, 144, 226, 1)', 'rgba(80, 227, 194, 1)', 'rgba(126, 211, 33, 1)', 'rgba(144, 19, 254, 1)'],
|
||||||
|
dataset: { ...dataJson },
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BC0CB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis3D: {
|
||||||
|
min: -1.2,
|
||||||
|
max: 1.2,
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
min: -1.2,
|
||||||
|
max: 1.2,
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
min: -1.2,
|
||||||
|
max: 1.2,
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
|
show: false,
|
||||||
|
boxHeight: 6,
|
||||||
|
top: '20%',
|
||||||
|
viewControl: {
|
||||||
|
distance: 180,
|
||||||
|
alpha: 20,
|
||||||
|
beta: -60,
|
||||||
|
autoRotate: false, // 自动旋转
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: series,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key: string = ConsumptionProportionConfig.key
|
||||||
|
public chartConfig = cloneDeep(ConsumptionProportionConfig)
|
||||||
|
public option = echartOptionProfixHandle(option, includes)
|
||||||
|
public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 基础配置可以复用PieCommon的配置面板 -->
|
||||||
|
<CollapseItem name="基础配置" :expanded="true">
|
||||||
|
<SettingItemBox name="图例">
|
||||||
|
<SettingItem name="显示">
|
||||||
|
<n-switch v-model:value="optionData.legend.show" size="small" />
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
import { NSwitch } from 'naive-ui'
|
||||||
|
import { option } from './config'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"dimensions": [
|
||||||
|
"name",
|
||||||
|
"value",
|
||||||
|
"itemColor",
|
||||||
|
"borderColor"
|
||||||
|
],
|
||||||
|
"source": [
|
||||||
|
{
|
||||||
|
"name": "电",
|
||||||
|
"value": 423
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "燃气",
|
||||||
|
"value": 235
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const ConsumptionProportionConfig: ConfigType = {
|
||||||
|
key: 'ConsumptionProportion',
|
||||||
|
chartKey: 'VConsumptionProportion',
|
||||||
|
conKey: 'VCConsumptionProportion',
|
||||||
|
title: '能耗占比',
|
||||||
|
category: ChatCategoryEnum.IntegratedEnergy,
|
||||||
|
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.ECHARTS,
|
||||||
|
image: 'pie_center.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-border-box">
|
||||||
|
<!-- <img src="./assets/title.svg" class="svg" />
|
||||||
|
<div class="header-title">有限空间分布情况</div> -->
|
||||||
|
<div class="title-value">
|
||||||
|
<div class="title-value_number">100.00</div>
|
||||||
|
<div class="title-value_unit">/万元</div>
|
||||||
|
</div>
|
||||||
|
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import 'echarts-gl'
|
||||||
|
import { toRaw, toReadonly, toRefs } from '@vue/reactivity'
|
||||||
|
import { isPreview } from '@/utils'
|
||||||
|
import { computed, onMounted, PropType, reactive, watch } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { PieChart } from 'echarts/charts'
|
||||||
|
import { mergeTheme } from '@/packages/public/chart'
|
||||||
|
import config, { includes } from './config'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
import { getPie3D } from './3dPie'
|
||||||
|
import axiosInstance from '@/api/axios';
|
||||||
|
|
||||||
|
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([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
|
||||||
|
|
||||||
|
const option = computed(() => {
|
||||||
|
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化图表数据
|
||||||
|
const initializeChartData = () => {
|
||||||
|
// 使用 dataJson 中的 source 数据初始化图表
|
||||||
|
if (dataJson && dataJson.source) {
|
||||||
|
props.chartConfig.option.dataset = { ...dataJson }
|
||||||
|
|
||||||
|
const series = getPie3D(dataJson.source, 0.8);
|
||||||
|
|
||||||
|
props.chartConfig.option.series = series
|
||||||
|
|
||||||
|
console.log('图表数据已初始化:', props.chartConfig.option.dataset)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateChartData = (newData: any) => {
|
||||||
|
if (!newData) return
|
||||||
|
|
||||||
|
// 确保数据被正确设置到图表配置中
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
|
||||||
|
const totalValue = newData.source.reduce((total: number, item: any) => {
|
||||||
|
return total + (item.value || 0)
|
||||||
|
}, 0)
|
||||||
|
|
||||||
|
// 更新图表标题中的总数
|
||||||
|
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
|
||||||
|
props.chartConfig.option.title[0].text = totalValue
|
||||||
|
}
|
||||||
|
|
||||||
|
const series = getPie3D(newData.source, 0.8);
|
||||||
|
props.chartConfig.option.series = series;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
newData => {
|
||||||
|
if (newData) {
|
||||||
|
updateChartData(newData)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
updateChartData(newData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件挂载时初始化数据
|
||||||
|
onMounted(async () => {
|
||||||
|
initializeChartData()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title-value {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
width:200px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.title-value_number {
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-select" @click="toggleDropdown">
|
||||||
|
<div class="select-display">
|
||||||
|
<span class="select-text">{{ getSelectedLabel() }}</span>
|
||||||
|
<span class="select-arrow" :class="{ 'arrow-up': isDropdownOpen }">▼</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-dropdown" v-show="isDropdownOpen">
|
||||||
|
<div
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
class="select-option"
|
||||||
|
:class="{ 'selected': item.value === selectedValue }"
|
||||||
|
@click.stop="selectOption(item)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
|
||||||
|
// 定义props
|
||||||
|
const props = defineProps<{
|
||||||
|
options: Array<{ label: string; value: any }>
|
||||||
|
selectedValue: any
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 定义emits
|
||||||
|
const emit = defineEmits<{
|
||||||
|
change: [value: any]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const isDropdownOpen = ref(false)
|
||||||
|
|
||||||
|
// 切换下拉菜单显示状态
|
||||||
|
const toggleDropdown = (event: Event) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
isDropdownOpen.value = !isDropdownOpen.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择选项
|
||||||
|
const selectOption = (item: any) => {
|
||||||
|
emit('change', item.value)
|
||||||
|
isDropdownOpen.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取选中项的标签
|
||||||
|
const getSelectedLabel = () => {
|
||||||
|
const selectedItem = props.options.find(
|
||||||
|
(item: any) => item.value === props.selectedValue
|
||||||
|
)
|
||||||
|
return selectedItem ? selectedItem.label : '请选择'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击外部关闭下拉菜单
|
||||||
|
const handleClickOutside = (event: Event) => {
|
||||||
|
const target = event.target as HTMLElement
|
||||||
|
if (!target.closest('.custom-select')) {
|
||||||
|
isDropdownOpen.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时添加全局点击事件监听
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener('click', handleClickOutside)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时移除事件监听
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener('click', handleClickOutside)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.custom-select {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 22px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background-color: rgb(48, 110, 100);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-text {
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-arrow {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 10px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&.arrow-up {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgb(48, 110, 100);
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-top: 2px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
animation: slideDown 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option {
|
||||||
|
padding: 10px 12px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,320 @@
|
|||||||
|
// 传入数据生成 option
|
||||||
|
const dataList = [
|
||||||
|
{
|
||||||
|
name: '公务用车运行维护费',
|
||||||
|
val: 1230,//存储数据的地方
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(0, 81, 180, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '办公费',
|
||||||
|
val: 800,//存储数据的地方
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255, 196, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '差旅费',
|
||||||
|
val: 500,//存储数据的地方
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(95, 144, 110, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const heightProportion = 0.2 // 柱状扇形的高度比例
|
||||||
|
|
||||||
|
|
||||||
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||||
|
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
||||||
|
|
||||||
|
// 计算
|
||||||
|
let midRatio = (startRatio + endRatio) / 3;
|
||||||
|
|
||||||
|
let startRadian = startRatio * Math.PI * 2;
|
||||||
|
let endRadian = endRatio * Math.PI * 2;
|
||||||
|
let midRadian = midRatio * Math.PI * 2;
|
||||||
|
|
||||||
|
// 如果只有一个扇形，则不实现选中效果。
|
||||||
|
if (startRatio === 0 && endRatio === 1) {
|
||||||
|
isSelected = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||||
|
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||||
|
|
||||||
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||||
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||||
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||||
|
|
||||||
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||||
|
let hoverRate = isHovered ? 1.1 : 1;
|
||||||
|
|
||||||
|
// 返回曲面参数方程
|
||||||
|
return {
|
||||||
|
u: {
|
||||||
|
min: -Math.PI,
|
||||||
|
max: Math.PI * 3,
|
||||||
|
step: Math.PI / 32
|
||||||
|
},
|
||||||
|
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20
|
||||||
|
},
|
||||||
|
|
||||||
|
x: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
y: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
z: function (u, v) {
|
||||||
|
if (u < -Math.PI * 0.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
if (u > Math.PI * 2.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
return Math.sin(v) > 0 ? heightProportion * height : -1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成模拟 3D 饼图的配置项
|
||||||
|
function getPie3D(pieData, internalDiameterRatio) {
|
||||||
|
|
||||||
|
let series = [];
|
||||||
|
let sumValue = 0;
|
||||||
|
let startValue = 0;
|
||||||
|
let endValue = 0;
|
||||||
|
let legendData = [];
|
||||||
|
let linesSeries = []; // line3D模拟label指示线
|
||||||
|
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||||
|
|
||||||
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||||
|
for (let i = 0; i < pieData.length; i++) {
|
||||||
|
|
||||||
|
sumValue += pieData[i].value;
|
||||||
|
|
||||||
|
let seriesItem = {
|
||||||
|
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pieData: pieData[i],
|
||||||
|
pieStatus: {
|
||||||
|
selected: false,
|
||||||
|
hovered: false,
|
||||||
|
k: k
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof pieData[i].itemStyle != 'undefined') {
|
||||||
|
|
||||||
|
let itemStyle = {};
|
||||||
|
|
||||||
|
typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
||||||
|
typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
||||||
|
|
||||||
|
seriesItem.itemStyle = itemStyle;
|
||||||
|
}
|
||||||
|
series.push(seriesItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||||
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||||
|
for (let i = 0; i < series.length; i++) {
|
||||||
|
endValue = startValue + series[i].pieData.value;
|
||||||
|
// console.log(series[i]);
|
||||||
|
series[i].pieData.startRatio = startValue / sumValue;
|
||||||
|
series[i].pieData.endRatio = endValue / sumValue;
|
||||||
|
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,
|
||||||
|
series[i].pieData.endRatio,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
k,
|
||||||
|
series[i].pieData.value
|
||||||
|
);
|
||||||
|
|
||||||
|
startValue = endValue;
|
||||||
|
|
||||||
|
// 计算label指示线的起始和终点位置
|
||||||
|
let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
|
||||||
|
let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
|
||||||
|
let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
|
||||||
|
let color = pieData[i].itemStyle.color;
|
||||||
|
let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)]
|
||||||
|
let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)]
|
||||||
|
|
||||||
|
linesSeries.push({
|
||||||
|
type: 'line3D',
|
||||||
|
lineStyle: {
|
||||||
|
color: color,
|
||||||
|
},
|
||||||
|
data: [[posX, posY, posZ], turningPosArr, endPosArr]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 0,
|
||||||
|
position: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
backgroundColor: color,
|
||||||
|
borderWidth: 2,
|
||||||
|
fontSize: 14,
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
formatter: '{b}'
|
||||||
|
},
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }]
|
||||||
|
});
|
||||||
|
|
||||||
|
legendData.push(series[i].name);
|
||||||
|
}
|
||||||
|
series = series.concat(linesSeries)
|
||||||
|
|
||||||
|
// 最底下圆盘
|
||||||
|
series.push({
|
||||||
|
name: 'mouseoutSeries',
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: 'rgba(25, 93, 176, 1)',
|
||||||
|
},
|
||||||
|
parametricEquation: {
|
||||||
|
u: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
x: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
y: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
z: function (u, v) {
|
||||||
|
return Math.cos(v) > 0 ? -0 : -1.5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return series;
|
||||||
|
}
|
||||||
|
|
||||||
|
let total = 0
|
||||||
|
dataList.forEach(item => {
|
||||||
|
total += item.val
|
||||||
|
})
|
||||||
|
const series = getPie3D(dataList.map(item => {
|
||||||
|
item.value = Number((item.val / total * 100).toFixed(2))
|
||||||
|
return item
|
||||||
|
}), 0.8, 240, 28, 26, 1);
|
||||||
|
|
||||||
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||||
|
option = {
|
||||||
|
legend: {
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: dataList.map(item => item.name),
|
||||||
|
top: '5%',
|
||||||
|
left: '5%',
|
||||||
|
icon: 'circle',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: true,
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
x: 'center',
|
||||||
|
top: '40%',
|
||||||
|
text: total,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 42,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'center',
|
||||||
|
top: '48%',
|
||||||
|
text: '还款总额',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 22,
|
||||||
|
fontWeight: 400
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
backgroundColor: '#333',
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BC0CB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xAxis3D: {
|
||||||
|
min: -1.5,
|
||||||
|
max: 1.5,
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
min: -1.5,
|
||||||
|
max: 1.5,
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
min: -1,
|
||||||
|
max: 1,
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
|
show: false,
|
||||||
|
boxHeight: 4,
|
||||||
|
bottom: '50%',
|
||||||
|
viewControl: {
|
||||||
|
distance: 180,
|
||||||
|
alpha: 25,
|
||||||
|
beta: 60,
|
||||||
|
autoRotate: true, // 自动旋转
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: series,
|
||||||
|
};
|
||||||
@ -0,0 +1,242 @@
|
|||||||
|
const heightProportion = 0.2 // 柱状扇形的高度比例
|
||||||
|
|
||||||
|
const colorList = [
|
||||||
|
'rgba(0, 81, 180, 0.5)',
|
||||||
|
'rgba(255, 196, 0, 0.5)',
|
||||||
|
'rgba(95, 144, 110, 0.5)',
|
||||||
|
'rgba(144, 19, 254, 0.5)',
|
||||||
|
'rgba(255, 105, 97, 0.5)',
|
||||||
|
'rgba(255, 215, 0, 0.5)',
|
||||||
|
'rgba(126, 211, 33, 0.5)',
|
||||||
|
'rgba(255, 153, 153, 0.5)',
|
||||||
|
'rgba(255, 204, 102, 0.5)',
|
||||||
|
'rgba(153, 204, 255, 0.5)',
|
||||||
|
'rgba(255, 153, 204, 0.5)',
|
||||||
|
'rgba(204, 255, 153, 0.5)',
|
||||||
|
'rgba(255, 204, 204, 0.5)',
|
||||||
|
]
|
||||||
|
|
||||||
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||||
|
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
||||||
|
|
||||||
|
// 计算
|
||||||
|
let midRatio = (startRatio + endRatio) / 3;
|
||||||
|
|
||||||
|
let startRadian = startRatio * Math.PI * 2;
|
||||||
|
let endRadian = endRatio * Math.PI * 2;
|
||||||
|
let midRadian = midRatio * Math.PI * 2;
|
||||||
|
|
||||||
|
// 如果只有一个扇形，则不实现选中效果。
|
||||||
|
if (startRatio === 0 && endRatio === 1) {
|
||||||
|
isSelected = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||||
|
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||||
|
|
||||||
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||||
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||||
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||||
|
|
||||||
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||||
|
let hoverRate = isHovered ? 1.1 : 1;
|
||||||
|
|
||||||
|
// 返回曲面参数方程
|
||||||
|
return {
|
||||||
|
u: {
|
||||||
|
min: -Math.PI,
|
||||||
|
max: Math.PI * 3,
|
||||||
|
step: Math.PI / 32
|
||||||
|
},
|
||||||
|
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20
|
||||||
|
},
|
||||||
|
|
||||||
|
x: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
y: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
z: function (u, v) {
|
||||||
|
if (u < -Math.PI * 0.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
if (u > Math.PI * 2.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
return Math.sin(v) > 0 ? heightProportion * height : -1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成模拟 3D 饼图的配置项
|
||||||
|
export function getPie3D(pieData, internalDiameterRatio) {
|
||||||
|
|
||||||
|
let series = [];
|
||||||
|
let sumValue = 0;
|
||||||
|
let startValue = 0;
|
||||||
|
let endValue = 0;
|
||||||
|
let legendData = [];
|
||||||
|
let linesSeries = []; // line3D模拟label指示线
|
||||||
|
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||||
|
|
||||||
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||||
|
for (let i = 0; i < pieData.length; i++) {
|
||||||
|
|
||||||
|
sumValue += pieData[i].value;
|
||||||
|
|
||||||
|
let seriesItem = {
|
||||||
|
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pieData: pieData[i],
|
||||||
|
pieStatus: {
|
||||||
|
selected: false,
|
||||||
|
hovered: false,
|
||||||
|
k: k
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: colorList[i]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
series.push(seriesItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||||
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||||
|
for (let i = 0; i < series.length; i++) {
|
||||||
|
endValue = startValue + series[i].pieData.value;
|
||||||
|
// console.log(series[i]);
|
||||||
|
series[i].pieData.startRatio = startValue / sumValue;
|
||||||
|
series[i].pieData.endRatio = endValue / sumValue;
|
||||||
|
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,
|
||||||
|
series[i].pieData.endRatio,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
k,
|
||||||
|
series[i].pieData.value / sumValue * 100
|
||||||
|
);
|
||||||
|
|
||||||
|
startValue = endValue;
|
||||||
|
|
||||||
|
// 计算label指示线的起始和终点位置
|
||||||
|
let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
|
||||||
|
let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
|
||||||
|
let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
|
||||||
|
let color = colorList[i];
|
||||||
|
let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0)*0.2, posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0)*0.2, posZ * (2)]
|
||||||
|
let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0)*0.2, posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0)*0.2, posZ * (6)]
|
||||||
|
|
||||||
|
console.log('endPosArr',posX,posY,posZ,turningPosArr,endPosArr);
|
||||||
|
linesSeries.push({
|
||||||
|
type: 'line3D',
|
||||||
|
lineStyle: {
|
||||||
|
color: color,
|
||||||
|
},
|
||||||
|
data: [[posX, posY, posZ], turningPosArr, endPosArr]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 0,
|
||||||
|
position: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgb(226,236,236)',
|
||||||
|
borderWidth: 2,
|
||||||
|
fontSize: 18,
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
formatter: '{b}'
|
||||||
|
},
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [{ name: series[i].pieData.value, value: endPosArr }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 0,
|
||||||
|
position: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgb(158,158,158',
|
||||||
|
borderWidth: 2,
|
||||||
|
fontSize: 12,
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
paddingTop:50,
|
||||||
|
},
|
||||||
|
formatter: '{b}'
|
||||||
|
},
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [{ name: series[i].name, value: [endPosArr[0],endPosArr[1],endPosArr[2]*-1] }]
|
||||||
|
});
|
||||||
|
|
||||||
|
legendData.push(series[i].name);
|
||||||
|
}
|
||||||
|
|
||||||
|
series = series.concat(linesSeries)
|
||||||
|
|
||||||
|
// 最底下圆盘
|
||||||
|
// 最底下圆盘
|
||||||
|
series.push({
|
||||||
|
name: 'mouseoutSeries',
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: 'rgba(25, 93, 176, 1)',
|
||||||
|
},
|
||||||
|
parametricEquation: {
|
||||||
|
u: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
x: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
y: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
z: function (u, v) {
|
||||||
|
return Math.cos(v) > 0 ? -0 : -1.5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return series;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 174 KiB |
@ -0,0 +1,99 @@
|
|||||||
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||||
|
import { FeeOverviewConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
import { getParametricEquation, getPie3D } from './3dPie'
|
||||||
|
import { chartInitConfig } from '@/settings/designSetting'
|
||||||
|
export const includes = ['legend']
|
||||||
|
|
||||||
|
// 其它配置
|
||||||
|
const otherConfig = {
|
||||||
|
dateTime: {
|
||||||
|
selectValue: 'day',
|
||||||
|
dataset: [
|
||||||
|
{
|
||||||
|
label: '当天',
|
||||||
|
value: 'day'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '本周',
|
||||||
|
value: 'week'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '当月',
|
||||||
|
value: 'month'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '本季度',
|
||||||
|
value: 'quarter'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '当年',
|
||||||
|
value: 'year'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let total = 0
|
||||||
|
dataJson.source.forEach(item => {
|
||||||
|
total += item.value;
|
||||||
|
})
|
||||||
|
|
||||||
|
const series = getPie3D(dataJson.source, 0.8);
|
||||||
|
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
...otherConfig,
|
||||||
|
renderer: 'canvas',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
legend: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
// color: ['rgba(255, 215, 0, 1)', 'rgba(74, 144, 226, 1)', 'rgba(80, 227, 194, 1)', 'rgba(126, 211, 33, 1)', 'rgba(144, 19, 254, 1)'],
|
||||||
|
dataset: { ...dataJson },
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BC0CB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis3D: {
|
||||||
|
min: -1.2,
|
||||||
|
max: 1.2,
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
min: -1.2,
|
||||||
|
max: 1.2,
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
min: -1.2,
|
||||||
|
max: 1.2,
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
|
show: false,
|
||||||
|
boxHeight: 6,
|
||||||
|
top: '15%',
|
||||||
|
viewControl: {
|
||||||
|
distance: 180,
|
||||||
|
alpha: 25,
|
||||||
|
beta: -80,
|
||||||
|
autoRotate: false, // 自动旋转
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: series,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key: string = FeeOverviewConfig.key
|
||||||
|
public chartConfig = cloneDeep(FeeOverviewConfig)
|
||||||
|
public option = echartOptionProfixHandle(option, includes)
|
||||||
|
public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 基础配置可以复用PieCommon的配置面板 -->
|
||||||
|
<CollapseItem name="基础配置" :expanded="true">
|
||||||
|
<SettingItemBox name="图例">
|
||||||
|
<SettingItem name="显示">
|
||||||
|
<n-switch v-model:value="optionData.legend.show" size="small" />
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
import { NSwitch } from 'naive-ui'
|
||||||
|
import { option } from './config'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"dimensions": [
|
||||||
|
"name",
|
||||||
|
"value",
|
||||||
|
"itemColor",
|
||||||
|
"borderColor"
|
||||||
|
],
|
||||||
|
"source": [
|
||||||
|
{
|
||||||
|
"name": "水",
|
||||||
|
"value": 450
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "燃气",
|
||||||
|
"value": 220
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "电",
|
||||||
|
"value": 200
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const FeeOverviewConfig: ConfigType = {
|
||||||
|
key: 'FeeOverview',
|
||||||
|
chartKey: 'VFeeOverview',
|
||||||
|
conKey: 'VCFeeOverview',
|
||||||
|
title: '费用概况',
|
||||||
|
category: ChatCategoryEnum.IntegratedEnergy,
|
||||||
|
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.ECHARTS,
|
||||||
|
image: 'pie_center.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-border-box">
|
||||||
|
<!-- <img src="./assets/title.svg" class="svg" />
|
||||||
|
<div class="header-title">有限空间分布情况</div> -->
|
||||||
|
<div class="title-value">
|
||||||
|
<div class="title-value_number">100.00</div>
|
||||||
|
<div class="title-value_unit">/万元</div>
|
||||||
|
</div>
|
||||||
|
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import 'echarts-gl'
|
||||||
|
import { toRaw, toReadonly, toRefs } from '@vue/reactivity'
|
||||||
|
import { isPreview } from '@/utils'
|
||||||
|
import { computed, onMounted, PropType, reactive, watch } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { PieChart } from 'echarts/charts'
|
||||||
|
import { mergeTheme } from '@/packages/public/chart'
|
||||||
|
import config, { includes } from './config'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
|
||||||
|
import dataJson from './data.json'
|
||||||
|
import { getPie3D } from './3dPie'
|
||||||
|
import axiosInstance from '@/api/axios';
|
||||||
|
|
||||||
|
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([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
|
||||||
|
|
||||||
|
const option = computed(() => {
|
||||||
|
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化图表数据
|
||||||
|
const initializeChartData = () => {
|
||||||
|
// 使用 dataJson 中的 source 数据初始化图表
|
||||||
|
if (dataJson && dataJson.source) {
|
||||||
|
props.chartConfig.option.dataset = { ...dataJson }
|
||||||
|
|
||||||
|
const series = getPie3D(dataJson.source, 0.8);
|
||||||
|
|
||||||
|
props.chartConfig.option.series = series
|
||||||
|
|
||||||
|
console.log('图表数据已初始化:', props.chartConfig.option.dataset)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateChartData = (newData: any) => {
|
||||||
|
if (!newData) return
|
||||||
|
|
||||||
|
// 确保数据被正确设置到图表配置中
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
|
||||||
|
const totalValue = newData.source.reduce((total: number, item: any) => {
|
||||||
|
return total + (item.value || 0)
|
||||||
|
}, 0)
|
||||||
|
|
||||||
|
// 更新图表标题中的总数
|
||||||
|
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
|
||||||
|
props.chartConfig.option.title[0].text = totalValue
|
||||||
|
}
|
||||||
|
|
||||||
|
const series = getPie3D(newData.source, 0.8);
|
||||||
|
props.chartConfig.option.series = series;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
newData => {
|
||||||
|
if (newData) {
|
||||||
|
updateChartData(newData)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
updateChartData(newData)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件挂载时初始化数据
|
||||||
|
onMounted(async () => {
|
||||||
|
initializeChartData()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title-value {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
width:200px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.title-value_number {
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-select" @click="toggleDropdown">
|
||||||
|
<div class="select-display">
|
||||||
|
<span class="select-text">{{ getSelectedLabel() }}</span>
|
||||||
|
<span class="select-arrow" :class="{ 'arrow-up': isDropdownOpen }">▼</span>
|
||||||
|
</div>
|
||||||
|
<div class="select-dropdown" v-show="isDropdownOpen">
|
||||||
|
<div
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
class="select-option"
|
||||||
|
:class="{ 'selected': item.value === selectedValue }"
|
||||||
|
@click.stop="selectOption(item)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
|
||||||
|
// 定义props
|
||||||
|
const props = defineProps<{
|
||||||
|
options: Array<{ label: string; value: any }>
|
||||||
|
selectedValue: any
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 定义emits
|
||||||
|
const emit = defineEmits<{
|
||||||
|
change: [value: any]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const isDropdownOpen = ref(false)
|
||||||
|
|
||||||
|
// 切换下拉菜单显示状态
|
||||||
|
const toggleDropdown = (event: Event) => {
|
||||||
|
event.stopPropagation()
|
||||||
|
isDropdownOpen.value = !isDropdownOpen.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择选项
|
||||||
|
const selectOption = (item: any) => {
|
||||||
|
emit('change', item.value)
|
||||||
|
isDropdownOpen.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取选中项的标签
|
||||||
|
const getSelectedLabel = () => {
|
||||||
|
const selectedItem = props.options.find(
|
||||||
|
(item: any) => item.value === props.selectedValue
|
||||||
|
)
|
||||||
|
return selectedItem ? selectedItem.label : '请选择'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击外部关闭下拉菜单
|
||||||
|
const handleClickOutside = (event: Event) => {
|
||||||
|
const target = event.target as HTMLElement
|
||||||
|
if (!target.closest('.custom-select')) {
|
||||||
|
isDropdownOpen.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时添加全局点击事件监听
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener('click', handleClickOutside)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件卸载时移除事件监听
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener('click', handleClickOutside)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.custom-select {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 22px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background-color: rgb(48, 110, 100);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-text {
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-arrow {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 10px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&.arrow-up {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgb(48, 110, 100);
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-top: 2px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
animation: slideDown 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option {
|
||||||
|
padding: 10px 12px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,320 @@
|
|||||||
|
// 传入数据生成 option
|
||||||
|
const dataList = [
|
||||||
|
{
|
||||||
|
name: '公务用车运行维护费',
|
||||||
|
val: 1230,//存储数据的地方
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(0, 81, 180, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '办公费',
|
||||||
|
val: 800,//存储数据的地方
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255, 196, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '差旅费',
|
||||||
|
val: 500,//存储数据的地方
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(95, 144, 110, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const heightProportion = 0.2 // 柱状扇形的高度比例
|
||||||
|
|
||||||
|
|
||||||
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||||
|
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
||||||
|
|
||||||
|
// 计算
|
||||||
|
let midRatio = (startRatio + endRatio) / 3;
|
||||||
|
|
||||||
|
let startRadian = startRatio * Math.PI * 2;
|
||||||
|
let endRadian = endRatio * Math.PI * 2;
|
||||||
|
let midRadian = midRatio * Math.PI * 2;
|
||||||
|
|
||||||
|
// 如果只有一个扇形，则不实现选中效果。
|
||||||
|
if (startRatio === 0 && endRatio === 1) {
|
||||||
|
isSelected = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||||
|
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||||
|
|
||||||
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||||
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||||
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||||
|
|
||||||
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||||
|
let hoverRate = isHovered ? 1.1 : 1;
|
||||||
|
|
||||||
|
// 返回曲面参数方程
|
||||||
|
return {
|
||||||
|
u: {
|
||||||
|
min: -Math.PI,
|
||||||
|
max: Math.PI * 3,
|
||||||
|
step: Math.PI / 32
|
||||||
|
},
|
||||||
|
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20
|
||||||
|
},
|
||||||
|
|
||||||
|
x: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
y: function (u, v) {
|
||||||
|
if (u < startRadian) {
|
||||||
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
if (u > endRadian) {
|
||||||
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
}
|
||||||
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
|
||||||
|
z: function (u, v) {
|
||||||
|
if (u < -Math.PI * 0.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
if (u > Math.PI * 2.5) {
|
||||||
|
return Math.sin(u);
|
||||||
|
}
|
||||||
|
return Math.sin(v) > 0 ? heightProportion * height : -1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成模拟 3D 饼图的配置项
|
||||||
|
function getPie3D(pieData, internalDiameterRatio) {
|
||||||
|
|
||||||
|
let series = [];
|
||||||
|
let sumValue = 0;
|
||||||
|
let startValue = 0;
|
||||||
|
let endValue = 0;
|
||||||
|
let legendData = [];
|
||||||
|
let linesSeries = []; // line3D模拟label指示线
|
||||||
|
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||||
|
|
||||||
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||||
|
for (let i = 0; i < pieData.length; i++) {
|
||||||
|
|
||||||
|
sumValue += pieData[i].value;
|
||||||
|
|
||||||
|
let seriesItem = {
|
||||||
|
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pieData: pieData[i],
|
||||||
|
pieStatus: {
|
||||||
|
selected: false,
|
||||||
|
hovered: false,
|
||||||
|
k: k
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof pieData[i].itemStyle != 'undefined') {
|
||||||
|
|
||||||
|
let itemStyle = {};
|
||||||
|
|
||||||
|
typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
||||||
|
typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
||||||
|
|
||||||
|
seriesItem.itemStyle = itemStyle;
|
||||||
|
}
|
||||||
|
series.push(seriesItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||||
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||||
|
for (let i = 0; i < series.length; i++) {
|
||||||
|
endValue = startValue + series[i].pieData.value;
|
||||||
|
// console.log(series[i]);
|
||||||
|
series[i].pieData.startRatio = startValue / sumValue;
|
||||||
|
series[i].pieData.endRatio = endValue / sumValue;
|
||||||
|
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,
|
||||||
|
series[i].pieData.endRatio,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
k,
|
||||||
|
series[i].pieData.value
|
||||||
|
);
|
||||||
|
|
||||||
|
startValue = endValue;
|
||||||
|
|
||||||
|
// 计算label指示线的起始和终点位置
|
||||||
|
let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
|
||||||
|
let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
|
||||||
|
let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
|
||||||
|
let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
|
||||||
|
let color = pieData[i].itemStyle.color;
|
||||||
|
let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)]
|
||||||
|
let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)]
|
||||||
|
|
||||||
|
linesSeries.push({
|
||||||
|
type: 'line3D',
|
||||||
|
lineStyle: {
|
||||||
|
color: color,
|
||||||
|
},
|
||||||
|
data: [[posX, posY, posZ], turningPosArr, endPosArr]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 0,
|
||||||
|
position: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
backgroundColor: color,
|
||||||
|
borderWidth: 2,
|
||||||
|
fontSize: 14,
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
formatter: '{b}'
|
||||||
|
},
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }]
|
||||||
|
});
|
||||||
|
|
||||||
|
legendData.push(series[i].name);
|
||||||
|
}
|
||||||
|
series = series.concat(linesSeries)
|
||||||
|
|
||||||
|
// 最底下圆盘
|
||||||
|
series.push({
|
||||||
|
name: 'mouseoutSeries',
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: 'rgba(25, 93, 176, 1)',
|
||||||
|
},
|
||||||
|
parametricEquation: {
|
||||||
|
u: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI * 2,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
v: {
|
||||||
|
min: 0,
|
||||||
|
max: Math.PI,
|
||||||
|
step: Math.PI / 20,
|
||||||
|
},
|
||||||
|
x: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
y: function (u, v) {
|
||||||
|
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
|
||||||
|
},
|
||||||
|
z: function (u, v) {
|
||||||
|
return Math.cos(v) > 0 ? -0 : -1.5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return series;
|
||||||
|
}
|
||||||
|
|
||||||
|
let total = 0
|
||||||
|
dataList.forEach(item => {
|
||||||
|
total += item.val
|
||||||
|
})
|
||||||
|
const series = getPie3D(dataList.map(item => {
|
||||||
|
item.value = Number((item.val / total * 100).toFixed(2))
|
||||||
|
return item
|
||||||
|
}), 0.8, 240, 28, 26, 1);
|
||||||
|
|
||||||
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||||
|
option = {
|
||||||
|
legend: {
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: dataList.map(item => item.name),
|
||||||
|
top: '5%',
|
||||||
|
left: '5%',
|
||||||
|
icon: 'circle',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: true,
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
x: 'center',
|
||||||
|
top: '40%',
|
||||||
|
text: total,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 42,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'center',
|
||||||
|
top: '48%',
|
||||||
|
text: '还款总额',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 22,
|
||||||
|
fontWeight: 400
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
backgroundColor: '#333',
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BC0CB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xAxis3D: {
|
||||||
|
min: -1.5,
|
||||||
|
max: 1.5,
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
min: -1.5,
|
||||||
|
max: 1.5,
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
min: -1,
|
||||||
|
max: 1,
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
|
show: false,
|
||||||
|
boxHeight: 4,
|
||||||
|
bottom: '50%',
|
||||||
|
viewControl: {
|
||||||
|
distance: 180,
|
||||||
|
alpha: 25,
|
||||||
|
beta: 60,
|
||||||
|
autoRotate: true, // 自动旋转
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: series,
|
||||||
|
};
|
||||||
@ -1,7 +1,13 @@
|
|||||||
import { EnergyOverviewConfig } from "./EnergyOverview"
|
import { EnergyOverviewConfig } from "./EnergyOverview"
|
||||||
import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
|
import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
|
||||||
|
import { ConsumptionProportionConfig } from "./ConsumptionProportion"
|
||||||
|
import { FeeOverviewConfig } from "./FeeOverview"
|
||||||
import { WaterSupplySystemConfig } from "./WaterSupplySystem"
|
import { WaterSupplySystemConfig } from "./WaterSupplySystem"
|
||||||
import { AirSupplySystemConfig } from './AirSupplySystem'
|
import { AirSupplySystemConfig } from './AirSupplySystem'
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig, WaterSupplySystemConfig, AirSupplySystemConfig
|
EnergyOverviewConfig, EnergyConsumptionTrendConfig,
|
||||||
|
ConsumptionProportionConfig,
|
||||||
|
FeeOverviewConfig,
|
||||||
|
WaterSupplySystemConfig, AirSupplySystemConfig
|
||||||
]
|
]
|
||||||
Loading…
Reference in New Issue
Block a user