From f961a7e1d262afcc37b0743fcd9cec0f9fc1cbc2 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期五, 26 七月 2024 11:37:06 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary
---
src/pages/academicGenres/index.vue | 310 +++++++++++++++++----------------------------------
1 files changed, 102 insertions(+), 208 deletions(-)
diff --git a/src/pages/academicGenres/index.vue b/src/pages/academicGenres/index.vue
index d2e93ea..ebc146c 100644
--- a/src/pages/academicGenres/index.vue
+++ b/src/pages/academicGenres/index.vue
@@ -1,48 +1,8 @@
<template>
- <view>
+ <view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
<!-- 椤堕儴瀵艰埅 -->
- <headNav :idIndex="idIndex" text="鍘嗕唬瀛︽湳娴佹淳" />
- <!-- 瀛︽淳 -->
- <view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
- <ul class="flex">
- <li style="" v-for="(item, index) in dynasty" :key="item.id">
- <view
- @click="SchoolClick(item.id)"
- class="flex flex-center font-family school"
- :style="{
- marginRight: index === dynasty.length - 1 ? '0' : '0.03rem'
- }"
- style="
- font-weight: 500;
- border-radius: 0.3rem;
- padding: 0.06rem 0.15rem;
- color: #2c2c2c;
- font-size: 0.12rem;
- margin-top: 0.03rem;
- margin-right: 0.1rem;
- background-color: #fff;
- "
- >
- <view
- class=""
- :style="{ background: item.color }"
- style="
- margin-right: 0.07rem;
- width: 0.12rem;
- height: 0.12rem;
- border-radius: 50%;
- "
- ></view>
- <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
- item.name
- }}</view>
- </view>
- </li>
- </ul>
- </view>
- <view class="" style="background-color: #fff">
- <view id="line-chart" style="width: 100vw"></view>
- </view>
+ <headNav :idIndex="idIndex" text="瀛︽湳娴佹淳" />
+ <view id="line-chart" style="flex: 1;overflow: hidden;padding: 50px;"></view>
</view>
</template>
@@ -53,62 +13,10 @@
export default {
data() {
return {
- // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
idIndex: 0,
- // 鏈濅唬
- dynasty: [
- {
- name: "鍖荤粡瀛︽淳",
- color: "#90BBD8",
- id: 1
- },
- {
- name: "缁忔柟瀛︽淳",
- color: "#EDD28B",
- id: 2
- },
- {
- name: "浼ゅ瘨瀛︽淳",
- color: "#CF746D",
- id: 3
- },
- {
- name: "娌抽棿瀛︽淳",
- color: "#9CC27A",
- id: 4
- },
- {
- name: "鏀婚偑瀛︽淳",
- color: "#5B6CB9",
- id: 5
- },
- {
- name: "婊嬮槾瀛︽淳",
- color: "#8860A8",
- id: 6
- },
- {
- name: "鏄撴按瀛︽淳",
- color: "#DE8E66",
- id: 7
- },
- {
- name: "娓╄ˉ瀛︽淳",
- color: "#7FAC8C",
- id: 8
- }
- ],
- chartData: [
- {
- name: "缁忔柟瀛︽淳",
- values: [30, 10, 100, 400, 30, 70]
- },
- {
- name: "浼ゅ瘨瀛︽淳",
- values: [23, 30, 140, 200, 230, 470, 230, 470]
- }
- ],
- xAxisData: []
+ dynastyData: [],
+ xAxisData: [],
+ schoolList: []
};
},
onLoad(options) {
@@ -120,155 +28,141 @@
getDynastyData() {
getDynasty().then((res) => {
res.list.sort((a, b) => a.end - b.end);
- this.xAxisData = res.list.map((item) => item.dynasty);
- console.log(this.xAxisData);
+ this.dynastyData = res.list;
+ this.xAxisData = res.list.map((item) => item.dynastyChs);
this.getData();
});
},
getData() {
getDynastyStatistics().then((res) => {
- console.log(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();
});
- },
- SchoolClick(id) {
- uni.navigateTo({
- url: "/pages/interchannel/interchannel?id=" + this.idIndex
- });
- },
- // 闅忔満鑹�
- getRandomColor() {
- var letters = "0123456789ABCDEF";
- var color = "#";
- for (var i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random() * 16)];
- }
- return color;
},
renderChart() {
const chart = echarts.init(document.getElementById("line-chart"));
- // 鏆傚瓨涓�涓�
- let chartData1 = this.chartData;
- let color = [];
-
- const series = this.chartData.map((item, i) => {
- color.push(this.getRandomColor());
- return {
- name: item.name,
- type: "line",
- data: item.values,
- smooth: 0.5,
- // 璁剧疆绾挎潯鐨勯鑹�
- itemStyle: {
- normal: {
- color: "lineColor", // 鏀瑰彉鎶樼嚎鐐圭殑棰滆壊
- lineStyle: {
- color: color[i], // 鏀瑰彉鎶樼嚎棰滆壊
- width: 3
- }
- }
- },
- // 璁剧疆绾挎潯鍙充晶鐨勫瓧浣撻鑹茬瓑
- label: {
- show: true, // 鏄剧ず鏍囩
- position: "right", // 鏍囩浣嶇疆锛氬彸渚�
- formatter: function (param) {
- if (chartData1[i].values.length - 1 === param.dataIndex) {
- return param.seriesName + " " + param.value;
- } else {
- return "";
- }
- },
- color: color[i]
- }
- };
- });
-
- console.log(series, "series");
-
const option = {
- // legend: {
- // data: this.chartData.map(item => item.name),
- // },
- zoom: 8, // 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒�
-
+ tooltip: {
+ trigger: "axis"
+ },
+ legend: {
+ data: this.schoolList.map((item) => item.name)
+ },
xAxis: {
type: "category",
+ boundaryGap: false,
data: this.xAxisData,
axisLabel: {
- fontSize: 32 // 璁剧疆 x 杞翠笂鏂囧瓧鐨勫瓧浣撳ぇ灏忎负 12 鍍忕礌
+ fontSize: 16 // 璁剧疆 x 杞翠笂鏂囧瓧鐨勫瓧浣撳ぇ灏忎负 12 鍍忕礌
},
axisLine: {
lineStyle: {
- width: 4 // 璁剧疆x杞寸嚎鏉″搴︿负2鍍忕礌
+ width: 2 // 璁剧疆x杞寸嚎鏉″搴︿负2鍍忕礌
}
}
},
yAxis: {
type: "value",
axisLabel: {
- fontSize: 32 // 璁剧疆 x 杞翠笂鏂囧瓧鐨勫瓧浣撳ぇ灏忎负 12 鍍忕礌
+ fontSize: 16 // 璁剧疆 x 杞翠笂鏂囧瓧鐨勫瓧浣撳ぇ灏忎负 12 鍍忕礌
},
axisLine: {
lineStyle: {
- width: 10 // 璁剧疆x杞寸嚎鏉″搴︿负2鍍忕礌
+ width: 2 // 璁剧疆x杞寸嚎鏉″搴︿负2鍍忕礌
}
}
},
- series: series,
- // 鍏朵粬閰嶇疆椤�...
+ series: this.schoolList,
textStyle: {
- fontSize: 30 // 璁剧疆鍏ㄥ眬鏂囧瓧鐨勫瓧浣撳ぇ灏�
+ 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
+ });
+ });
}
- },
- mounted() {
- this.renderChart();
}
};
</script>
<style>
-view {
- color: #fff;
-}
-
-.school {
-}
-
-.bag {
- height: 100vh;
- background-color: #fff;
-}
-
-.NavTop {
- background-color: #0c274c;
- padding: 25rpx;
-
- img {
- width: 30rpx;
- height: 30rpx;
- vertical-align: middle;
- }
-
- .NavTopr {
- img {
- margin-right: 10rpx;
- }
- }
-}
-
-.mImage {
- width: 100%;
- height: 40rpx;
-
- img {
- vertical-align: top;
- }
-}
-
#line-chart {
height: 6rem;
}
--
Gitblit v1.9.1