<template>
|
<view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
|
<!-- 顶部导航 -->
|
<headNav :idIndex="idIndex" text="学术图谱" />
|
<view id="line-chart" style="flex: 1;overflow: hidden;padding: 50px;"></view>
|
</view>
|
</template>
|
|
<script>
|
import { getDynasty, getDynastyStatistics } from "@/api/index.js";
|
import * as echarts from "echarts";
|
import axios from "axios";
|
export default {
|
data() {
|
return {
|
idIndex: 0,
|
dynastyData: [],
|
xAxisData: [],
|
schoolList: []
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
// 获取朝代
|
this.getDynastyData();
|
},
|
methods: {
|
getDynastyData() {
|
getDynasty().then((res) => {
|
res.list.sort((a, b) => a.end - b.end);
|
this.dynastyData = res.list;
|
this.xAxisData = res.list.map((item) => item.dynastyChs);
|
this.getData();
|
});
|
},
|
getData() {
|
getDynastyStatistics().then((res) => {
|
this.schoolList = [];
|
const schoolMap = {};
|
for (let i = 0; i < res.list.length; i++) {
|
const item = res.list[i];
|
// 数据合并
|
if (schoolMap[item.schoolId]) {
|
schoolMap[item.schoolId].data.push({
|
dynastyCode: item.dynastyCode,
|
personNumber: item.personNumber
|
});
|
} else {
|
schoolMap[item.schoolId] = {
|
name: item.schoolName,
|
data: [
|
{
|
dynastyCode: item.dynastyCode,
|
personNumber: item.personNumber
|
}
|
]
|
};
|
}
|
}
|
|
for (const key in schoolMap) {
|
// 处理数量
|
const personNumbers = [];
|
for (let z = 0; z < this.dynastyData.length; z++) {
|
const dynastyItem = this.dynastyData[z];
|
const returnData = schoolMap[key].data.find(
|
(item) => item.dynastyCode == dynastyItem.id
|
);
|
if (returnData) {
|
personNumbers.push(returnData.personNumber);
|
} else {
|
personNumbers.push(0);
|
}
|
}
|
// 处理学派
|
this.schoolList.push({
|
id: key,
|
name: schoolMap[key].name,
|
type: "line",
|
data: personNumbers,
|
smooth: 0.5,
|
// 设置线条的颜色
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
width: 2
|
}
|
}
|
},
|
// 设置线条右侧的字体颜色等
|
label: {
|
show: true, // 显示标签
|
position: "right", // 标签位置：右侧
|
fontSize: 18,
|
color: "inherit",
|
formatter: (param) => {
|
if (param.dataIndex == this.dynastyData.length - 1) {
|
const data = this.schoolList.find(
|
(item) => item.name == param.seriesName
|
).data;
|
return param.seriesName + " （" + eval(data.join("+")) + "）";
|
} else {
|
return "";
|
}
|
}
|
}
|
});
|
}
|
|
this.renderChart();
|
});
|
},
|
renderChart() {
|
const chart = echarts.init(document.getElementById("line-chart"));
|
const option = {
|
tooltip: {
|
trigger: "axis"
|
},
|
legend: {
|
data: this.schoolList.map((item) => item.name)
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: this.xAxisData,
|
axisLabel: {
|
fontSize: 16 // 设置 x 轴上文字的字体大小为 12 像素
|
},
|
axisLine: {
|
lineStyle: {
|
width: 2 // 设置x轴线条宽度为2像素
|
}
|
}
|
},
|
yAxis: {
|
type: "value",
|
axisLabel: {
|
fontSize: 16 // 设置 x 轴上文字的字体大小为 12 像素
|
},
|
axisLine: {
|
lineStyle: {
|
width: 2 // 设置x轴线条宽度为2像素
|
}
|
}
|
},
|
series: this.schoolList,
|
textStyle: {
|
fontSize: 16 // 设置全局文字的字体大小
|
}
|
};
|
chart.setOption(option);
|
chart.on("click", (params) => {
|
const data = this.schoolList.find(
|
(item) => item.name == params.seriesName
|
);
|
uni.navigateTo({
|
url: "/pages/academicGenres/detail?id=" + data.id
|
});
|
});
|
}
|
}
|
};
|
</script>
|
|
<style>
|
#line-chart {
|
height: 6rem;
|
}
|
</style>
|
