zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-11-28 22:25:58 +08:00
parent 85f1f3a6f7
commit e2a54c16eb
90 changed files with 2451 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/views/home/echarts/barHatEcharts.vue
View File

@ -1,5 +1,5 @@
<template>
<div style="height:100%;width:100%" :id="echartsId"></div>
<div class="bar-hat-chart" :id="echartsId"></div>
</template>
<script setup>
@ -35,6 +35,19 @@ const props = defineProps({
pauseOnHover: {
type: Boolean,
default: true
},
// 新增：是否将X轴设为数据轴，Y轴设为类别轴
isXAxisData: {
type: Boolean,
default: false
},
// 新增：自定义图表左边距
chartLeft: {
type: Object,
default: () => ({
dataAxis: "25%", // isXAxisData为true时的默认值
categoryAxis: "6%" // isXAxisData为false时的默认值
})
}
});
@ -174,38 +187,97 @@ function resumeAutoTooltip() {
// 处理数据
function handleDate() {
let xDate = props.data.xDate;
let categories = props.data.xDate;
let legend = props.data.list.map(v => { return { name: v.name } })
// 根据isXAxisData属性调整数据处理
let series = props.data.list.map((item, i) => {
let obj = {
name: item.name,
type: "bar",
data: item.value,
barWidth: "10px",
// 根据isXAxisData调整线性渐变方向
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
{ offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }], false),
color: new echarts.graphic.LinearGradient(
0, 0,
props.isXAxisData ? 1 : 0,
props.isXAxisData ? 0 : 1, [
{ offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
{ offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }], false),
}
},
// 根据isXAxisData调整标记点位置
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [11, 4], // 设置扁圆的宽和高
symbolSize: props.isXAxisData ? [4, 11] : [11, 4], // 根据方向调整扁圆的宽高
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
data: item.value.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj + 0 // 柱子的值加上一些偏移量
xAxis: props.isXAxisData ? obj + 0 : index, // 对应柱子的横坐标
yAxis: props.isXAxisData ? index : obj + 0 // 柱子的值加上一些偏移量
}))
},
}
return obj
})
lineChartFn(xDate, legend, series)
lineChartFn(categories, legend, series)
}
function lineChartFn(xDate, legend, series) {
function lineChartFn(categories, legend, series) {
myChart.value = echarts.init(document.getElementById(props.echartsId));
// 根据isXAxisData属性调整坐标轴配置
const xAxisConfig = {
type: props.isXAxisData ? "value" : "category",
data: props.isXAxisData ? null : categories,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
},
axisLabel: {
margin: 10,
color: "#e2e9ff",
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
}
};
const yAxisConfig = {
type: props.isXAxisData ? "category" : "value",
data: props.isXAxisData ? categories : null,
// name: '单位：万元',
axisLabel: {
formatter: "{value}",
color: "#e2e9ff"
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
}
};
// 根据isXAxisData属性调整grid配置
const gridConfig = {
top: "15%",
right: props.isXAxisData ? "2%" : "2%",
left: props.isXAxisData ? props.chartLeft.dataAxis : props.chartLeft.categoryAxis,
bottom: props.isXAxisData ? "15%" : "22%"
};
var option = {
legend: {
type: "plain",
@ -228,8 +300,7 @@ function lineChartFn(xDate, legend, series) {
formatter: function (params) {
// 获取当前数据点的所有系列信息
const dataIndex = params.dataIndex;
const categoryName = params.name;
const categoryName = props.isXAxisData ? categories[dataIndex] : params.name;
let result = `<div style="margin-bottom: 8px; font-weight: bold; color: #00d4ff; font-size: 14px; border-bottom: 1px solid #00d4ff; padding-bottom: 4px;">${categoryName}</div>`;
// 遍历所有系列，显示该数据点的所有信息
if (props.data && props.data.list) {
@ -253,7 +324,6 @@ function lineChartFn(xDate, legend, series) {
transitionDuration: 0.2,
// 设置提示框位置
position: function (point, params, dom, rect, size) {
// console.log(point, params, dom, rect, size);
// 设置提示框的z-index为999，确保显示在最上层
dom.style.zIndex = 999;
@ -274,50 +344,9 @@ function lineChartFn(xDate, legend, series) {
return [x, y];
}
},
grid: {
top: "25%",
right: "2%",
left: "6%",
bottom: "22%"
},
xAxis: [
{
type: "category",
data: xDate,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
},
axisLabel: {
margin: 10,
color: "#e2e9ff",
textStyle: {
fontSize: 14
}
}
}
],
yAxis: [
{
// name: '单位：万元',
axisLabel: {
formatter: "{value}",
color: "#e2e9ff"
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,1)"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
}
}
}
],
grid: gridConfig,
xAxis: [xAxisConfig],
yAxis: [yAxisConfig],
series: series
};
@ -349,7 +378,10 @@ function lineChartFn(xDate, legend, series) {
}
onMounted(() => {
lineChartFn();
// 确保组件挂载后有数据才初始化图表
if (props.data && props.data.list && props.data.list.length > 0) {
handleDate();
}
});
// 组件卸载时清理定时器
@ -368,4 +400,9 @@ onUnmounted(() => {
background: rgba(0,29,75,0.6);
border-radius: 0 0 4px 4px;
}
.bar-hat-chart {
height: 100%;
width: 100%;
}
</style>