调整echarts
This commit is contained in:
parent
67ab505da5
commit
f32e8f5a5f
File diff suppressed because it is too large
Load Diff
@ -37,7 +37,11 @@
|
|||||||
<CjBjTjGl :tjgl-data="tjglData" />
|
<CjBjTjGl :tjgl-data="tjglData" />
|
||||||
|
|
||||||
<!-- 6. 本班与年级平均分对比分析图表 -->
|
<!-- 6. 本班与年级平均分对比分析图表 -->
|
||||||
<CjBjNjPjf v-model:selected-km-id="xzkmId" :bj-pj-list="bjPjList" />
|
<CjBjNjPjf
|
||||||
|
v-model:selected-km-id="xzkmId"
|
||||||
|
:bj-pj-list="bjPjList"
|
||||||
|
:current-bj-id="xzbjId"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- 7. 总分分数段图表 -->
|
<!-- 7. 总分分数段图表 -->
|
||||||
<CjZfFs :dj-rs-list="djRsList" />
|
<CjZfFs :dj-rs-list="djRsList" />
|
||||||
|
|||||||
@ -35,10 +35,12 @@ interface BjPjInfo {
|
|||||||
// --- Props ---
|
// --- Props ---
|
||||||
interface Props {
|
interface Props {
|
||||||
bjPjList?: BjPjInfo[];
|
bjPjList?: BjPjInfo[];
|
||||||
|
currentBjId?: string | number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
bjPjList: () => [],
|
bjPjList: () => [],
|
||||||
|
currentBjId: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- Emits ---
|
// --- Emits ---
|
||||||
@ -73,13 +75,22 @@ const drawLineChart = () => {
|
|||||||
|
|
||||||
// 使用后端返回的班级平均分数据
|
// 使用后端返回的班级平均分数据
|
||||||
const lineData = {
|
const lineData = {
|
||||||
categories: props.bjPjList.map(
|
categories: props.bjPjList.map((bj) => {
|
||||||
(bj) => bj.bjmc || bj.njmc + bj.bjmc
|
const label = bj.bjmc || bj.njmc + bj.bjmc;
|
||||||
),
|
return label;
|
||||||
|
}),
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "班级平均分",
|
name: "班级平均分",
|
||||||
data: props.bjPjList.map((bj) => bj.fs),
|
data: props.bjPjList.map((bj) => bj.fs),
|
||||||
|
color: ["#ea7ccc"],
|
||||||
|
textColorFormatter: (item: any, index: number, opts: any) => {
|
||||||
|
const bj = props.bjPjList[index];
|
||||||
|
if (bj && bj.bjId === props.currentBjId) {
|
||||||
|
return "#1890ff"; // 当前班级标签使用蓝色
|
||||||
|
}
|
||||||
|
return "#666666"; // 其他班级标签使用灰色
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@ -118,6 +129,35 @@ const drawLineChart = () => {
|
|||||||
newOption.categories = lineData.categories;
|
newOption.categories = lineData.categories;
|
||||||
newOption.series = lineData.series;
|
newOption.series = lineData.series;
|
||||||
|
|
||||||
|
// 设置x轴标签颜色格式化函数
|
||||||
|
newOption.xAxis.labelColorFormatter = (
|
||||||
|
item: string,
|
||||||
|
index: number,
|
||||||
|
opts: any
|
||||||
|
) => {
|
||||||
|
const bj = props.bjPjList[index];
|
||||||
|
if (bj && bj.bjId === props.currentBjId) {
|
||||||
|
return "#1890ff"; // 当前班级标签使用蓝色
|
||||||
|
}
|
||||||
|
return "#666666"; // 其他班级标签使用灰色
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置数据标签颜色格式化函数,与x轴标签颜色保持一致
|
||||||
|
newOption.dataLabelColorFormatter = (
|
||||||
|
item: any,
|
||||||
|
index: number,
|
||||||
|
opts: any
|
||||||
|
) => {
|
||||||
|
const bj = props.bjPjList[index];
|
||||||
|
if (bj && bj.bjId === props.currentBjId) {
|
||||||
|
return "#1890ff"; // 当前班级数据标签使用蓝色
|
||||||
|
}
|
||||||
|
return "#666666"; // 其他班级数据标签使用灰色
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置全局颜色数组
|
||||||
|
newOption.color = ["#000000"]; // 线条颜色为黑色
|
||||||
|
|
||||||
const options = new uCharts(newOption);
|
const options = new uCharts(newOption);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -250,14 +250,14 @@ export const lineOption = {
|
|||||||
rotateLock: false,
|
rotateLock: false,
|
||||||
background: "#FFFFFF",
|
background: "#FFFFFF",
|
||||||
color: [
|
color: [
|
||||||
"#1890FF",
|
// "#1890FF",
|
||||||
"#91CB74",
|
// "#91CB74",
|
||||||
"#FAC858",
|
// "#FAC858",
|
||||||
"#EE6666",
|
// "#EE6666",
|
||||||
"#73C0DE",
|
// "#73C0DE",
|
||||||
"#3CA272",
|
// "#3CA272",
|
||||||
"#FC8452",
|
// "#FC8452",
|
||||||
"#9A60B4",
|
// "#9A60B4",
|
||||||
"#ea7ccc",
|
"#ea7ccc",
|
||||||
],
|
],
|
||||||
padding: [15, 10, 0, 15],
|
padding: [15, 10, 0, 15],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user