土地资源
This commit is contained in:
parent
bea334086a
commit
05249ceca6
3
components.d.ts
vendored
3
components.d.ts
vendored
@ -42,6 +42,9 @@ declare module 'vue' {
|
||||
CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
|
||||
CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
|
||||
CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
|
||||
IndexCo: typeof import('./src/components/custom-echart-line/index-co.vue')['default']
|
||||
IndexRe: typeof import('./src/components/new-hyaline-cake/index-re.vue')['default']
|
||||
NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SubTop: typeof import('./src/components/subTop.vue')['default']
|
||||
|
||||
463
src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue
Normal file
463
src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue
Normal file
@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ width: width, height: height }"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
|
||||
defineOptions({ name: 'NewHyalineCake' });
|
||||
|
||||
// 定义组件 props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
// 默认示例数据
|
||||
{ name: '项目一', value: 60 },
|
||||
{ name: '项目二', value: 44 },
|
||||
{ name: '项目三', value: 32 },
|
||||
],
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
|
||||
k: 1,
|
||||
// 扇形边缘向外偏移距离比例（用于选中效果），单位视图坐标，可调
|
||||
itemGap: 0.2,
|
||||
// 扇形高度（影响z轴拉伸程度）
|
||||
itemHeight: 120,
|
||||
// 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
|
||||
autoItemHeight: 0,
|
||||
// 透明度设置
|
||||
opacity: 0.6,
|
||||
// 图例后缀
|
||||
legendSuffix: '',
|
||||
}),
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
});
|
||||
|
||||
// 声明组件触发的事件
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
// 绑定到DOM的容器引用
|
||||
const chartRef = ref(null);
|
||||
// 使用 useEcharts 钩子初始化 ECharts 实例，并获取控制方法
|
||||
const { setOptions, getInstance } = useEcharts(chartRef);
|
||||
|
||||
// 存储当前的 ECharts 配置项
|
||||
const chartOption = ref({});
|
||||
|
||||
// 参数方程函数：生成每个扇形曲面的参数方程，用于 series-surface.parametricEquation
|
||||
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||||
// 中心弧度用于计算偏移方向
|
||||
const midRatio = (startRatio + endRatio) / 2;
|
||||
const startRadian = startRatio * Math.PI * 2;
|
||||
const endRadian = endRatio * Math.PI * 2;
|
||||
const midRadian = midRatio * Math.PI * 2;
|
||||
|
||||
// 如果整个饼只剩一个扇形，则不实现选中效果
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
// k 取默认值 1/3（环的厚度比例），如果传入 k 则使用传入值
|
||||
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||
|
||||
// 计算选中效果的偏移量（基于扇形中心角度）
|
||||
const offsetX = Math.cos(midRadian) * props.option.itemGap;
|
||||
const offsetY = Math.sin(midRadian) * props.option.itemGap;
|
||||
// 计算高亮时的放大比例（未高亮时为1）
|
||||
const hoverRate = isHovered ? 1.08 : 1;
|
||||
|
||||
// 返回 parametric 曲面方程
|
||||
return {
|
||||
u: {
|
||||
// u 参数控制饼的周向角度：从 -π 到 3π，可以完整绘制一圈
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
v: {
|
||||
// v 参数控制扇形的径向方向（厚度方向）
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
x(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(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(u, v) {
|
||||
// 在 u < -π/2 时，防止出现不必要的翻转，直接使用基本正弦
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
// 在 u > 2.5π 时，处理扇形尾部厚度
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u) * h * 0.1;
|
||||
}
|
||||
// 正常情况下，z 根据 v 参数控制上下表面的高度差
|
||||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// 生成整个 3D 饼图的配置项
|
||||
function getPie3D(pieData) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
// 计算总值
|
||||
pieData.forEach((item) => {
|
||||
sumValue += item.value;
|
||||
});
|
||||
|
||||
// k 为外径厚度系数
|
||||
const k = props.option.k ?? 1;
|
||||
// 构建每个扇形的 series 数据
|
||||
pieData.forEach((dataItem, idx) => {
|
||||
const seriesItem = {
|
||||
name: dataItem.name ?? `series${idx}`,
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: { show: false },
|
||||
pieData: dataItem,
|
||||
itemStyle: {
|
||||
opacity: props.option.opacity,
|
||||
borderRadius: 300,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 0,
|
||||
},
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k,
|
||||
},
|
||||
};
|
||||
// 合并自定义样式（如果有）
|
||||
if (dataItem.itemStyle) {
|
||||
const customStyle = {};
|
||||
if (dataItem.itemStyle.color !== undefined) {
|
||||
customStyle.color = dataItem.itemStyle.color;
|
||||
}
|
||||
if (dataItem.itemStyle.opacity !== undefined) {
|
||||
customStyle.opacity = dataItem.itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = { ...seriesItem.itemStyle, ...customStyle };
|
||||
}
|
||||
series.push(seriesItem);
|
||||
});
|
||||
|
||||
// 计算每个扇形的 startRatio/endRatio 和参数方程
|
||||
let startValue = 0;
|
||||
series.forEach((serie) => {
|
||||
const endValue = startValue + serie.pieData.value;
|
||||
const startRatio = startValue / sumValue;
|
||||
const endRatio = endValue / sumValue;
|
||||
serie.pieData.startRatio = startRatio;
|
||||
serie.pieData.endRatio = endRatio;
|
||||
// 初始均为未选中未高亮
|
||||
serie.parametricEquation = getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
false,
|
||||
true,
|
||||
k,
|
||||
// 扇形高度：根据配置自动计算或使用固定高度
|
||||
props.option.autoItemHeight > 0 ? props.option.autoItemHeight * serie.pieData.value : props.option.itemHeight
|
||||
);
|
||||
startValue = endValue;
|
||||
});
|
||||
|
||||
// 添加一个透明圆环，用于实现 hover 在扇形外面时取消高亮
|
||||
series.push({
|
||||
name: 'mouseoutSeries',
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: { show: false },
|
||||
itemStyle: { opacity: 0 },
|
||||
parametricEquation: {
|
||||
u: { min: 0, max: Math.PI * 2, step: Math.PI / 20 },
|
||||
v: { min: 0, max: Math.PI, step: Math.PI / 20 },
|
||||
x(u, v) {
|
||||
return Math.sin(v) * Math.sin(u) + Math.sin(u);
|
||||
},
|
||||
y(u, v) {
|
||||
return Math.sin(v) * Math.cos(u) + Math.cos(u);
|
||||
},
|
||||
z(u, v) {
|
||||
return Math.cos(v) > 0 ? 0.1 : -0.1;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 基础配置：坐标轴、视角、图例、提示框等
|
||||
const option = Object.assign(
|
||||
{
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8)',
|
||||
borderColor: '#35d0c0',
|
||||
color: '#fff',
|
||||
position: (point, params, dom, rect, size) => {
|
||||
// 动态调整 tooltip 位置，避免溢出
|
||||
let x = point[0],
|
||||
y = point[1];
|
||||
const [viewW, viewH] = size.viewSize;
|
||||
const [boxW, boxH] = size.contentSize;
|
||||
if (x + boxW > viewW) x -= boxW;
|
||||
if (y + boxH > viewH) y -= boxH;
|
||||
if (x < 0) x = 0;
|
||||
if (y < 0) y = 0;
|
||||
return [x, y];
|
||||
},
|
||||
formatter: (params) => {
|
||||
// 只对非透明环（实际扇形）显示信息
|
||||
if (params.seriesName !== 'mouseoutSeries') {
|
||||
return `
|
||||
<span style="color:#FFF">
|
||||
${params.seriesName}<br/>
|
||||
<span style="
|
||||
display:inline-block;
|
||||
margin-right:5px;
|
||||
border-radius:10px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
background-color:${params.color};"></span>
|
||||
${chartOption.value.series[params.seriesIndex].pieData.value}
|
||||
</span>`;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
xAxis3D: { min: -1, max: 1 },
|
||||
yAxis3D: { min: -1, max: 1 },
|
||||
zAxis3D: { min: -1, max: 1 },
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
top: '0',
|
||||
left: '-20%',
|
||||
viewControl: {
|
||||
// 3D 视角设置
|
||||
alpha: 60, // 俯仰角度
|
||||
distance: 240, // 视角距离
|
||||
rotateSensitivity: 10,
|
||||
zoomSensitivity: 10,
|
||||
panSensitivity: 10,
|
||||
autoRotate: true,
|
||||
autoRotateAfterStill: 2,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
itemHeight: 12,
|
||||
itemWidth: 12,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
},
|
||||
// 图例标签显示名称和数值
|
||||
formatter: (name) => {
|
||||
const item = props.chartData.find((d) => d.name === name);
|
||||
return item ? ` ${name} ${item.value}${props.option.legendSuffix || ''}` : name;
|
||||
},
|
||||
},
|
||||
series,
|
||||
},
|
||||
// 将外部配置项覆盖基础配置
|
||||
props.option
|
||||
);
|
||||
|
||||
return option;
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initChart() {
|
||||
// 生成基础的3D饼图配置
|
||||
const baseOption = getPie3D(props.chartData);
|
||||
// 合并用户配置，确保不修改原始对象
|
||||
const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
|
||||
chartOption.value = finalOption;
|
||||
// 设置图表配置
|
||||
setOptions(chartOption.value);
|
||||
// 等待 DOM + ECharts 初始化完成
|
||||
nextTick(() => {
|
||||
const chart = getInstance();
|
||||
if (!chart) {
|
||||
console.warn('ECharts 实例未初始化，事件绑定失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 避免重复绑定事件
|
||||
chart.off('click');
|
||||
chart.off('mouseover');
|
||||
chart.off('globalout');
|
||||
|
||||
chart.on('click', handleClick);
|
||||
chart.on('mouseover', handleMouseover);
|
||||
chart.on('globalout', handleGlobalout);
|
||||
});
|
||||
}
|
||||
function handleClick(params) {
|
||||
// 如果点击的是透明辅助环，则忽略
|
||||
if (params.seriesName === 'mouseoutSeries') return;
|
||||
|
||||
const optionVal = chartOption.value;
|
||||
const series = optionVal.series;
|
||||
const idx = params.seriesIndex;
|
||||
|
||||
// 新的选中状态（取反）
|
||||
const isSelected = !series[idx].pieStatus.selected;
|
||||
const isHovered = series[idx].pieStatus.hovered;
|
||||
const k = series[idx].pieStatus.k;
|
||||
const startRatio = series[idx].pieData.startRatio;
|
||||
const endRatio = series[idx].pieData.endRatio;
|
||||
const h = series[idx].pieData.value;
|
||||
|
||||
// 如果之前有其他扇形被选中，取消其选中状态
|
||||
if (selectedIndex !== null && selectedIndex !== idx) {
|
||||
const prev = series[selectedIndex];
|
||||
prev.parametricEquation = getParametricEquation(
|
||||
prev.pieData.startRatio,
|
||||
prev.pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
prev.pieStatus.k,
|
||||
prev.pieData.value
|
||||
);
|
||||
prev.pieStatus.selected = false;
|
||||
selectedIndex = null;
|
||||
}
|
||||
|
||||
// 设置当前扇形的选中/取消选中状态
|
||||
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);
|
||||
}
|
||||
function handleMouseover(params) {
|
||||
const optionVal = chartOption.value;
|
||||
const series = optionVal.series;
|
||||
const idx = params.seriesIndex;
|
||||
|
||||
// 鼠标经过透明环时不做高亮处理
|
||||
if (params.seriesName === 'mouseoutSeries') {
|
||||
return;
|
||||
}
|
||||
// 如果此扇形已经高亮，无需重复操作
|
||||
if (hoveredIndex === idx) {
|
||||
return;
|
||||
}
|
||||
console.log('hoveredIndexOne :>> ', hoveredIndex);
|
||||
console.log('idx= :>> ', idx);
|
||||
// 取消之前高亮的扇形
|
||||
if (hoveredIndex !== null) {
|
||||
const prev = series[hoveredIndex];
|
||||
const isSelected = prev.pieStatus.selected;
|
||||
prev.parametricEquation = getParametricEquation(
|
||||
prev.pieData.startRatio,
|
||||
prev.pieData.endRatio,
|
||||
isSelected,
|
||||
false,
|
||||
prev.pieStatus.k,
|
||||
prev.pieData.value
|
||||
);
|
||||
prev.pieStatus.hovered = false;
|
||||
hoveredIndex = null;
|
||||
}
|
||||
|
||||
// 设置当前扇形的高亮状态
|
||||
const isSelected = series[idx].pieStatus.selected;
|
||||
const startRatio = series[idx].pieData.startRatio;
|
||||
const endRatio = series[idx].pieData.endRatio;
|
||||
const k = series[idx].pieStatus.k;
|
||||
const h = series[idx].pieData.value;
|
||||
series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, true, k, h);
|
||||
series[idx].pieStatus.hovered = true;
|
||||
hoveredIndex = idx;
|
||||
console.log('hoveredIndexTwo :>> ', hoveredIndex);
|
||||
|
||||
setOptions(optionVal);
|
||||
}
|
||||
function handleGlobalout() {
|
||||
if (hoveredIndex !== null) {
|
||||
const optionVal = chartOption.value;
|
||||
const series = optionVal.series;
|
||||
const prev = series[hoveredIndex];
|
||||
const isSelected = prev.pieStatus.selected;
|
||||
prev.parametricEquation = getParametricEquation(
|
||||
prev.pieData.startRatio,
|
||||
prev.pieData.endRatio,
|
||||
isSelected,
|
||||
false,
|
||||
prev.pieStatus.k,
|
||||
prev.pieData.value
|
||||
);
|
||||
prev.pieStatus.hovered = false;
|
||||
hoveredIndex = null;
|
||||
setOptions(optionVal);
|
||||
}
|
||||
}
|
||||
// 记录当前选中和高亮的系列索引
|
||||
let selectedIndex = null;
|
||||
let hoveredIndex = null;
|
||||
|
||||
// 组件挂载后绑定事件
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
|
||||
// 监听数据或配置变更，重新初始化图表
|
||||
watch(
|
||||
[() => props.chartData, () => props.option],
|
||||
() => {
|
||||
if (props.chartData && props.chartData.length) {
|
||||
initChart();
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可根据需要自定义图表容器样式 */
|
||||
</style>
|
||||
@ -204,6 +204,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
flex: none;
|
||||
.rank {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@ -212,7 +213,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
.ranking-column {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.inside-column {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@ -7,9 +7,9 @@ import echarts from '../utils/echarts';
|
||||
|
||||
export const useEcharts = (elRef, theme = 'default') => {
|
||||
// 新增轮播相关状态
|
||||
const autoPlayTimer = ref(null);
|
||||
const currentIndex = ref(-1);
|
||||
const dataLength = ref(0);
|
||||
const autoPlayTimer = ref(null); // 定时器句柄
|
||||
const currentIndex = ref(-1); // 当前高亮的数据索引
|
||||
const dataLength = ref(0); // 当前系列的数据总长度
|
||||
|
||||
let mapClickHandler = null;
|
||||
|
||||
@ -18,29 +18,41 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
const {
|
||||
interval = 2000, // 轮播间隔(ms)
|
||||
seriesIndex = 0, // 默认操作第一个系列
|
||||
showTooltip = true, // 是否显示提示框
|
||||
showTooltip = false, // 是否显示提示框，默认是false，外部配置了，无论是否true都会显示
|
||||
showMarkPoint = true, // 是否显示默认的动态标记点
|
||||
} = options;
|
||||
|
||||
stopAutoPlay(); // 先停止已有轮播
|
||||
|
||||
// 获取数据长度
|
||||
// 获取当前系列的数据长度
|
||||
const seriesData = unref(getOptions).series?.[seriesIndex]?.data;
|
||||
const xAxisData = unref(getOptions).xAxis?.data || [];
|
||||
// 获取当前 option 中的 yAxis 类型来判断是否倒置
|
||||
const axisType = unref(getOptions).yAxis?.type;
|
||||
const isCategoryY = axisType === 'category';
|
||||
|
||||
dataLength.value = seriesData?.length || 0;
|
||||
if (dataLength.value === 0) return;
|
||||
|
||||
autoPlayTimer.value = setInterval(() => {
|
||||
currentIndex.value = (currentIndex.value + 1) % dataLength.value;
|
||||
// 更新MarkPoint点信息
|
||||
if (showMarkPoint) {
|
||||
updateMarkPoint(currentIndex.value, xAxisData, seriesData, isCategoryY);
|
||||
}
|
||||
|
||||
// 执行轮播动作
|
||||
// 重置之前的高亮
|
||||
chartInstance?.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: seriesIndex,
|
||||
});
|
||||
// 高亮当前项
|
||||
chartInstance?.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: seriesIndex,
|
||||
dataIndex: currentIndex.value,
|
||||
});
|
||||
// 显示 tooltip（可选）
|
||||
if (showTooltip) {
|
||||
chartInstance?.dispatchAction({
|
||||
type: 'showTip',
|
||||
@ -51,6 +63,40 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
}, interval);
|
||||
};
|
||||
|
||||
function updateMarkPoint(index, xAxis, seriesData, isCategoryY) {
|
||||
const x = isCategoryY ? seriesData[index] : xAxis[index];
|
||||
const y = isCategoryY ? xAxis[index] : seriesData[index];
|
||||
const updatedSeries = chartInstance.getOption().series;
|
||||
|
||||
if (updatedSeries[0].markPoint && Array.isArray(updatedSeries[0].markPoint.data) && updatedSeries[0].markPoint.data.length > 1) {
|
||||
// 已初始化：只改坐标
|
||||
updatedSeries[0].markPoint.data.forEach((el) => {
|
||||
el.coord = [x, y];
|
||||
});
|
||||
} else {
|
||||
// 未初始化或数据不对：重建
|
||||
updatedSeries[0].markPoint = {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ coord: [x, y], symbolSize: 16, itemStyle: { color: '#ffffff' }, z: 12 },
|
||||
{ coord: [x, y], symbolSize: 24, itemStyle: { color: 'rgba(1, 238, 255, 0.5)' }, z: 11 },
|
||||
{ coord: [x, y], symbolSize: 40, itemStyle: { color: 'rgba(1, 238, 255, 0.3)' }, z: 10 },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
chartInstance.setOption({
|
||||
series: updatedSeries,
|
||||
});
|
||||
}
|
||||
|
||||
// 新增方法 - 停止轮播
|
||||
const stopAutoPlay = () => {
|
||||
if (autoPlayTimer.value) {
|
||||
|
||||
@ -32,6 +32,9 @@ import {
|
||||
CalendarComponent,
|
||||
GraphicComponent,
|
||||
GeoComponent,
|
||||
MarkPointComponent,
|
||||
MarkLineComponent,
|
||||
MarkAreaComponent,
|
||||
} from 'echarts/components';
|
||||
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
@ -64,6 +67,9 @@ echarts.use([
|
||||
ScatterChart,
|
||||
EffectScatterChart,
|
||||
GeoComponent,
|
||||
MarkPointComponent,
|
||||
MarkLineComponent,
|
||||
MarkAreaComponent,
|
||||
]);
|
||||
|
||||
export default echarts;
|
||||
|
||||
@ -27,16 +27,17 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
let str = `<div class="custom-echarts-tips">
|
||||
let str = `<div class="custom-echarts-tips" >
|
||||
<span>${params.name}</span><br/>
|
||||
<span>${params.marker} ${params.data} 万元</span>
|
||||
<span>${params.marker} ${params.data} 万亩</span>
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 14,
|
||||
@ -46,13 +47,13 @@ const state = reactive({
|
||||
},
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#35D0C0' },
|
||||
{ offset: 1, color: '#35D0C0' },
|
||||
{ offset: 1, color: 'rgba(53,208,192,0)' },
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
|
||||
@ -128,16 +128,15 @@ const _circleNum = computed(() => {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&.active {
|
||||
background-color: rgba($color: #4aeb82, $alpha: 0.4);
|
||||
border: 1px solid rgba($color: #008f32, $alpha: 08);
|
||||
background: rgba(38, 122, 102, 0.3);
|
||||
border: 1px solid #35d0c0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
.spot {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
._label,
|
||||
._value {
|
||||
font-size: 18px;
|
||||
._label {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
._label {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
|
||||
<centerMap class="land-map-body" :dialog-title="'土地类型'" @mapclick="doMapclick">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">土地类型</div>
|
||||
@ -49,6 +49,11 @@ const all = computed(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-body {
|
||||
:deep(.el-dialog__body) {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -26,21 +26,22 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
let str = `<div class="custom-echarts-tips">
|
||||
let str = `<div class="custom-echarts-tips" >
|
||||
<span>${params.name}</span><br/>
|
||||
<span>${params.marker} ${params.data} 万亩</span>
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 15,
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
|
||||
borderRadius: 8, // 设置柱子的圆角半径
|
||||
},
|
||||
color: {
|
||||
type: 'linear',
|
||||
@ -49,23 +50,14 @@ const state = reactive({
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#35D0C0' },
|
||||
{ offset: 1, color: '#35D0C0' },
|
||||
{ offset: 0, color: '#35d0c0' },
|
||||
{ offset: 1, color: 'rgba(53,208,192,0)' },
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// name: '面积',
|
||||
// splitLine: {
|
||||
// show: false,
|
||||
// lineStyle: {
|
||||
// type: 'dashed',
|
||||
// color: '',
|
||||
// width: 1,
|
||||
// },
|
||||
// },
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: false,
|
||||
@ -78,44 +70,11 @@ const state = reactive({
|
||||
color: 'rgba(28, 158, 222, 1)',
|
||||
},
|
||||
},
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// type: 'solid',
|
||||
// width: 1,
|
||||
// // color: '#000',
|
||||
// },
|
||||
// },
|
||||
// axisLabel: {
|
||||
// margin: 8,
|
||||
// interval: 'auto',
|
||||
// rotate: 0,
|
||||
// fontSize: 10,
|
||||
// color: '#fff',
|
||||
// },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '面积(万亩)',
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'insideTop',
|
||||
// distance: -10,
|
||||
// formatter: () => {
|
||||
// return `{z|}{a|}`;
|
||||
// },
|
||||
// rich: {
|
||||
// a: {
|
||||
// widht: 18,
|
||||
// height: 18,
|
||||
// backgroundColor: {
|
||||
// image:
|
||||
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKUSURBVHgBpVPPaxNBFH4zszubTTY2sSRSrFCC1dIepChoD9JgKwiem6s3vYl4lyb/QS/+wJPnBPQ/0LQ91KsHe5BaWo3Yupqk6WZ3Z3Z2xt2tKUUNHnww8OB775tv3nwP4D8DDQOqqoqh9iuPjlpeVkkxQurvBAoiREGlUcHbpUWcHaWkoGUivAWOPyUt5iiYgbABS/IkCTp5YxMAF1rTui36Rt70acipFmOEcqE8n+vaWZbf74jnl++KAQlOLlcKNZuA6X7JcPw9K2uSPOd68bY1NXtJL0zGeWiO5h3fsbxxk5abNRIrPlawVK8TmGtRx89ZJIVy93NzC9et0sMU6JMxzkF+XXc/1Fbab1+bmuq2RNcZ39jg9UojTBTkSx3spIu6oaHMLevC9E3r4tNBcxwU8NhCeurZg9y1GwRYJucX9e2lRYwi5TiW8nmEYe6FusIsfWfkyjIMiauZ0j2PozRJ92lxi2E1mAGcB8jwjoakQS1EZ4cRxBg1McUMkzNaFqEBgbeTTWYhlZChUs4wghCUw5gh43xnIv75mACBKkxkpKFbARiYtUNnbRhBW7hrUvicUCoK73flsQK7uSlZCgXI892X7uZjEU3992auwr1Xh++eEKr3fY8E9sx8YiiSyHlRhrFvPQT0NOyGP3puwDfO0XwuYseRf9mnoFtfOVx9tM6/fGShOPRhxy/ndsWbWvPI3rGRKtDAkWspQM8MkUpHtk6L0NIlOkAIpRhnro8Mo38Kep493guaUA3j5ydPiCpUAyrS3toMbEFcQke6ppWxteDAlszYV9L7zk9Bh4mWmzTXqlLB0Tr8uY3RTpQjWxcK09gx9hLcYm1l2/OyXF6VVVSViY0RKPhHHJGrpHTo2v8EGgI2uB3r9kQAAAAASUVORK5CYII=',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
data: [],
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<custom-echart-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
|
||||
<new-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -15,19 +15,19 @@ const props = defineProps({
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
opacity: 0.6,
|
||||
itemGap: 0.2,
|
||||
opacity: 1,
|
||||
itemGap: 0.1,
|
||||
legendSuffix: '万亩',
|
||||
itemHeight: 120,
|
||||
itemHeight: 500,
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
boxHeight: 1,
|
||||
top: '0',
|
||||
left: '-20%',
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 30, //角度(这个很重要 调节角度的)
|
||||
distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
alpha: 45, //角度(这个很重要 调节角度的)
|
||||
distance: 300, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||||
|
||||
@ -31,7 +31,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
@ -41,6 +41,7 @@ const state = reactive({
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -60,7 +61,6 @@ const state = reactive({
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
|
||||
@ -20,10 +20,10 @@ const state = reactive({
|
||||
option: {
|
||||
// 数据
|
||||
dataset: [],
|
||||
type: 'column',
|
||||
type: 'row',
|
||||
rowNum: 6,
|
||||
isAnimation: true,
|
||||
waitTime: 5,
|
||||
waitTime: 2,
|
||||
unit: '万元',
|
||||
sort: true,
|
||||
height: 12,
|
||||
@ -32,9 +32,9 @@ const state = reactive({
|
||||
borderRadius: '12px',
|
||||
carousel: 'single',
|
||||
indexPrefix: 'TOP',
|
||||
indexFontSize: 12,
|
||||
leftFontSize: 14,
|
||||
rightFontSize: 14,
|
||||
indexFontSize: 20,
|
||||
leftFontSize: 16,
|
||||
rightFontSize: 16,
|
||||
valueFormatter: (item) => {
|
||||
return item.value;
|
||||
},
|
||||
@ -61,8 +61,11 @@ watch(
|
||||
&:deep(.row-item) {
|
||||
.ranking-info {
|
||||
color: #35d0c0 !important;
|
||||
font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
.ranking-value {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.inside-column {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="农村土地资源项目效益" :top-postion="'left'">
|
||||
<customBack top-title="农村土地资源" :top-postion="'left'">
|
||||
<template #back>
|
||||
<landTwo :data="state.data.two" />
|
||||
</template>
|
||||
@ -55,14 +55,31 @@
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="年度农用地规划面积" :top-postion="'right'">
|
||||
<customBack
|
||||
top-title="管理需求分类"
|
||||
:down-title="'永久基本农田'"
|
||||
:top-postion="'right'"
|
||||
:down-width="'140px'"
|
||||
:options="[
|
||||
{ label: '永久基本农田', value: '530926' },
|
||||
{ label: '耿马镇', value: '42611' },
|
||||
{ label: '勐撒镇', value: '9259' },
|
||||
{ label: '勐永镇', value: '17787' },
|
||||
{ label: '孟定镇', value: '42610' },
|
||||
{ label: '勐简乡', value: '17788' },
|
||||
{ label: '贺派乡', value: '40161' },
|
||||
{ label: '四排山乡', value: '40163' },
|
||||
{ label: '大兴乡', value: '40159' },
|
||||
]"
|
||||
:is-down="true"
|
||||
>
|
||||
<template #back>
|
||||
<landFive :data="state.data.five" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="各地农用地利用面积" :top-postion="'right'">
|
||||
<customBack top-title="全县作物情况" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landSix :data="state.data.six" />
|
||||
</template>
|
||||
@ -198,9 +215,22 @@ const handleCommand = (data) => {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.custom-back-content) {
|
||||
padding: 8px !important; /* 强制覆盖 padding */
|
||||
}
|
||||
|
||||
.data-home-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
|
||||
font-weight: 400;
|
||||
:deep(*) {
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
:deep(.title-top-content) {
|
||||
font-size: 24px;
|
||||
}
|
||||
.left-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user