diff --git a/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue b/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue index 7d645ea..b3868be 100644 --- a/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue +++ b/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue @@ -9,16 +9,13 @@ import { useEcharts } from '@/hooks/useEcharts'; defineOptions({ name: 'NewHyalineCake' }); -// 记录当前选中和高亮的系列索引 let selectedIndex = null; let hoveredIndex = null; -// 定义组件 props const props = defineProps({ chartData: { type: Array, default: () => [ - // 默认示例数据 { name: '项目一', value: 60 }, { name: '项目二', value: 44 }, { name: '项目三', value: 32 }, @@ -27,8 +24,8 @@ const props = defineProps({ option: { type: Object, default: () => ({ - k: 1, // 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大 - itemGap: 0.1, // 扇形边缘向外偏移距离比例（用于选中效果）,扇形的间距，单位视图坐标，可调 + k: 1, // 控制内外径关系的系数，1 表示无内径，值越小内径越大 + itemGap: 0.1, // 扇形的间距 itemHeight: 120, // 扇形高度（影响z轴拉伸程度） autoItemHeight: 0, // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ） opacity: 0.6, // 透明度设置 @@ -46,15 +43,11 @@ const props = defineProps({ }, }); -// 声明组件触发的事件 const emit = defineEmits(['click']); -// 绑定到DOM的容器引用 const chartRef = ref(null); -// 使用 useEcharts 钩子初始化 ECharts 实例，并获取控制方法 const { setOptions, getInstance } = useEcharts(chartRef); -// 存储当前的 ECharts 配置项 const chartOption = ref({}); /** @@ -69,8 +62,7 @@ const chartOption = ref({}); * @return {Object} parametric 曲面方程 */ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, offsetZ = 0) { - console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ); - // 中心弧度用于计算偏移方向 + // console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ); const midRatio = (startRatio + endRatio) / 2; const startRadian = startRatio * Math.PI * 2; const endRadian = endRatio * Math.PI * 2; @@ -89,7 +81,6 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h // 计算高亮时的放大比例（未高亮时为1） const hoverRate = isHovered ? 1.05 : 1; - // 返回 parametric 曲面方程 return { u: { // u 参数控制饼的周向角度：从 -π 到 3π，可以完整绘制一圈 @@ -155,10 +146,6 @@ function getPie3D(pieData, internalDiameterRatio) { const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3; - // 计算总值 - // pieData.forEach((item) => { - // sumValue += item.value; - // }); // 构建每个扇形的 series 数据 for (let i = 0; i < pieData.length; i += 1) { sumValue += pieData[i].value; @@ -169,16 +156,19 @@ function getPie3D(pieData, internalDiameterRatio) { parametric: true, wireframe: { show: false }, pieData: pieData[i], - // itemStyle: { - // opacity: props.option.opacity, - // borderRadius: 300, - // borderColor: '#fff', - // } pieStatus: { selected: true, hovered: false, k, }, + label: { + show: true, + formatter: () => `${pieData[i].value}`, // 直接显示 value + position: 'outside', // 标签位置 + distance: 10, // 距扇形边缘的距离 + color: '#fff', // 根据背景色调整 + fontSize: 14, + }, }; if (typeof pieData[i].itemStyle !== 'undefined') { const { itemStyle } = pieData[i]; @@ -191,7 +181,7 @@ function getPie3D(pieData, internalDiameterRatio) { } // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 - console.log(series); + // console.log(series); for (let i = 0; i < series.length; i += 1) { endValue = startValue + series[i].pieData.value; @@ -301,7 +291,7 @@ function getPie3D(pieData, internalDiameterRatio) { // 监听 mouseover，近似实现高亮（放大）效果 function handleMouseover(params) { - console.log('mouseover'); + // console.log('mouseover'); const idx = params.seriesIndex; const series = chartOption.value.series; @@ -418,19 +408,10 @@ function handleClick(params) { series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h); series[idx].pieStatus.selected = isSelected; - // 更新记录选中的系列索引 selectedIndex = isSelected ? idx : null; - - // 更新图表配置 setOptions(optionVal); - // 触发组件 click 事件供父组件使用 emit('click', params); } -// 在函数顶部声明（确保作用域覆盖所有需要的地方） -window.debugZValues = { - current: null, - history: [], -}; // 组件挂载后绑定事件 onMounted(() => { diff --git a/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue b/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue index b6948a1..0c43684 100644 --- a/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue +++ b/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue @@ -42,16 +42,46 @@ const state = reactive({ icon: 'rect', left: 'center', textStyle: { - color: '#fff', // 根据你的主题调整颜色 - fontSize: 14, - }, - itemStyle: { - display: 'float', - top: '120px', - backgroundColor: 'rgba(255, 255, 255, 0.2)', + color: '#fff', + fontSize: 16, }, formatter: (name) => name, }, + // series: [ + // { + // type: 'pie3D', + // center: ['50%', '50%'], + // radius: ['40%', '60%'], + // avoidLabelOverlap: false, + // label: { + // normal: { + // formatter: (params) => { + // return params.value + '%'; + // }, + // padding: [0, -100, 25, -100], + // rich: { + // icon: { + // fontSize: 16, + // }, + // name: { + // fontSize: 14, + // padding: [0, 10, 0, 4], + // color: '#666666', + // }, + // value: { + // fontSize: 18, + // fontWeight: 'bold', + // color: '#333333', + // }, + // }, + // }, + // }, + // labelLine: { + // show: false, + // }, + // data: [], + // }, + // ], }, data: [ { value: 76, name: '产业运营平台' },