修改样式
This commit is contained in:
parent
391f70825f
commit
cfb9f0ab6c
|
|
@ -136,7 +136,7 @@
|
|||
<div class="header-left">
|
||||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
<span class="header-left-text">乡镇压力【供压、回压】</span>
|
||||
<span class="header-left-text" style="margin-left: 130px;">单位：MPa</span>
|
||||
<span class="header-left-text" style="margin-left: 90px;">单位：MPa</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" area-body"></div>
|
||||
|
|
@ -619,16 +619,16 @@ function updateChartCounty() {
|
|||
if (!chartCounty) return;
|
||||
|
||||
const names = countyList.value.map(i => i.raw?.view028 ?? '未知');
|
||||
const values = countyList.value.map(i => (i.raw?.view035 ? Number(i.raw.view035) : 0));
|
||||
const values1 = countyList.value.map(i => (i.raw?.view035 ? Number(i.raw.view035) : 0));
|
||||
const values2 = countyList.value.map(i => (i.raw?.view036 ? Number(i.raw.view036) : 0));
|
||||
const maxVal = values.length ? Math.max(...values, ...values2) * 1.15 : 100;
|
||||
const maxVal = values1.length ? Math.max(...values1) : 100;
|
||||
|
||||
chartCounty.setOption({
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 120, // 增加右侧空间以容纳两个标签
|
||||
bottom: 14,
|
||||
top: 28,
|
||||
bottom: 8,
|
||||
top: 18,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -664,8 +664,8 @@ function updateChartCounty() {
|
|||
axisLabel: {
|
||||
color: jbztys.value,
|
||||
interval: 0,
|
||||
fontSize: 16, // 稍微减小字体以适应更多内容
|
||||
margin: 2 // 减少边距
|
||||
fontSize: 12, // 稍微减小字体以适应更多内容
|
||||
margin: 0 // 减少边距
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false }
|
||||
|
|
@ -691,9 +691,9 @@ function updateChartCounty() {
|
|||
// 第一个主体条（供水温度）- 左侧柱子
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 10, // 减小宽度
|
||||
barGap: '60%', // 设置柱子间距
|
||||
data: values.map((val, index) => ({
|
||||
barWidth: 8, // 减小宽度
|
||||
barGap: '30%', // 设置柱子间距
|
||||
data: values1.map((val, index) => ({
|
||||
value: val,
|
||||
itemStyle: {
|
||||
color: {
|
||||
|
|
@ -712,8 +712,8 @@ function updateChartCounty() {
|
|||
// 第二个主体条（回水温度）- 右侧柱子
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 10, // 减小宽度
|
||||
barGap: '60%', // 设置柱子间距
|
||||
barWidth: 8, // 减小宽度
|
||||
barGap: '30%', // 设置柱子间距
|
||||
data: values2.map((val, index) => ({
|
||||
value: val,
|
||||
itemStyle: {
|
||||
|
|
@ -730,14 +730,14 @@ function updateChartCounty() {
|
|||
z: 3
|
||||
},
|
||||
|
||||
// 第一个顶部小图片（供水温度）
|
||||
// // 第一个顶部小图片（供水温度）
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbol: `image://${lqImg}`,
|
||||
symbolSize: [25, 25], // 减小图标大小
|
||||
symbolOffset: [13, -7], // 向左偏移，放在左侧柱子顶部
|
||||
symbolOffset: [11, -4], // 向左偏移，放在左侧柱子顶部
|
||||
symbolPosition: 'end',
|
||||
data: values,
|
||||
data: values1,
|
||||
z: 4,
|
||||
silent: true
|
||||
},
|
||||
|
|
@ -747,7 +747,7 @@ function updateChartCounty() {
|
|||
type: 'pictorialBar',
|
||||
symbol: `image://${lqImg}`,
|
||||
symbolSize: [25, 25], // 减小图标大小
|
||||
symbolOffset: [13, 9], // 向右偏移，放在右侧柱子顶部
|
||||
symbolOffset: [13, 6], // 向右偏移，放在右侧柱子顶部
|
||||
symbolPosition: 'end',
|
||||
data: values2,
|
||||
z: 5,
|
||||
|
|
@ -758,20 +758,23 @@ function updateChartCounty() {
|
|||
{
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
data: values.map(() => maxVal),
|
||||
data: values1.map(() => maxVal.toFixed(1)),
|
||||
itemStyle: { color: 'transparent' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
distance: 40,
|
||||
fontSize: 18, // 减小字体大小
|
||||
fontSize: 16, // 减小字体大小
|
||||
offset: [-20, -20], // 添加偏移量
|
||||
align: 'left',
|
||||
color: '#ffffff',
|
||||
formatter: (params) => {
|
||||
const value = values[params.dataIndex];
|
||||
console.log("🚀 ~ updateChartCounty ~ params:", params)
|
||||
const value1 = values1[params.dataIndex];
|
||||
console.log("🚀 ~ updateChartCounty ~ value1:", value1)
|
||||
const value2 = values2[params.dataIndex];
|
||||
return `{icon|} ${value.toFixed(1)} - ${value2.toFixed(2)}`; // 格式化数值
|
||||
console.log("🚀 ~ updateChartCounty ~ value2:", value2)
|
||||
return `{icon|} ${value1.toFixed(1)} - ${value2.toFixed(1)}`; // 格式化数值
|
||||
},
|
||||
rich: {
|
||||
icon: {
|
||||
|
|
@ -784,55 +787,16 @@ function updateChartCounty() {
|
|||
}
|
||||
}
|
||||
},
|
||||
z: 7,
|
||||
z: 6,
|
||||
silent: true
|
||||
},
|
||||
|
||||
// 第二个标签（回水温度）- 右侧标签
|
||||
// {
|
||||
// type: 'bar',
|
||||
// barWidth: 8,
|
||||
// data: values2.map(() => maxVal),
|
||||
// itemStyle: { color: 'transparent' },
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// distance: 40, // 增加距离，放在更右侧
|
||||
// fontSize: 12, // 减小字体大小
|
||||
// offset: [0, -20], // 添加偏移量
|
||||
// align: 'left',
|
||||
// color: '#ffffff',
|
||||
// formatter: (params) => {
|
||||
// const value = values2[params.dataIndex];
|
||||
// return `{icon2|} ${value.toFixed(1)}`; // 格式化数值
|
||||
// },
|
||||
// rich: {
|
||||
// icon2: {
|
||||
// width: 12,
|
||||
// height: 12,
|
||||
// align: 'center',
|
||||
// backgroundColor: {
|
||||
// image: ljt
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// z: 7,
|
||||
// silent: true
|
||||
// }
|
||||
],
|
||||
}, true);
|
||||
|
||||
// 添加点击事件
|
||||
chartCounty.off('click');
|
||||
chartCounty.on('click', function(params) {
|
||||
if (params.seriesIndex === 1 || params.seriesIndex === 2) {
|
||||
const clickedName = params.name;
|
||||
const gsValue = values[params.dataIndex];
|
||||
const hsValue = values2[params.dataIndex];
|
||||
|
||||
// 这里可以添加你的业务逻辑
|
||||
}
|
||||
});
|
||||
}
|
||||
// area-7 的雷达图更新函数
|
||||
|
|
|
|||
Loading…
Reference in New Issue