调整

YM

2024-04-26 3af382c2b9ddf2a8210b6477bb46b0945ce26a64

 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>
    <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;
}