三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/dataDisplay/dataDisplay.vue

@@ -1,21 +1,22 @@
<template>
   <view>
      <view class="NavTop flex">
         <view class=""><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
         <view class="">历代学术流派</view>
         <view class="NavTopr">
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
         </view>
<template >
   <view >
      <!-- 顶部导航 -->
      <headNav :idIndex="idIndex" text="历代学术流派"/>
   <!-- 学派 -->
      <view class="flex flex-center" style="width: 100%; margin: .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: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
                  <view class="" :style="{background:item.color}" style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
                  <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
               </view>
            </li>
         </ul>
      </view>
      <view class="mImage">
         <img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5"
            alt="" />
      </view>

      <view class="">
         <view id="line-chart" style="width: 100vw;height: 500px;"></view>
      <view class="" style="background-color: #fff;">
         <view id="line-chart" style="width: 100vw;"></view>
      </view>
   </view>
</template>
@@ -26,6 +27,42 @@
   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]
@@ -35,7 +72,18 @@
            }]
         }
      }, 
      onLoad(options) {
         this.idIndex = options.id
         console.log('optionsoptionsoptions',options.id);
      },
      methods: {
         // 
         SchoolClick(id){
            console.log(id);
            uni.navigateTo({
               url:'/pages/interchannel/interchannel?id='+this.idIndex
            })
         },
         renderChart() {
            const chart = echarts.init(document.getElementById('line-chart'));
            const xAxisData = ['1950', '1955', '1960', '1965', '1970', '1975', '123'];
@@ -65,17 +113,39 @@
            });

            const option = {
               legend: {
                  data: this.chartData.map(item => item.name),
               },
               // legend: {
               //    data: this.chartData.map(item => item.name),
               // },
               zoom: 8,// 这里可以根据需要调整缩放级别
					
               xAxis: {
                  type: 'category',
                  data: xAxisData,
                  axisLabel: {
                        fontSize: 32 // 设置 x 轴上文字的字体大小为 12 像素
                      },
                      axisLine: {
                           lineStyle: {
                             width: 4 // 设置x轴线条宽度为2像素
                           }
                         }
               },
               yAxis: {
                  type: 'value',
                  axisLabel: {
                        fontSize: 32 // 设置 x 轴上文字的字体大小为 12 像素
                      },
                      axisLine: {
                           lineStyle: {
                             width: 10 // 设置x轴线条宽度为2像素
                           }
                         }
               },
               series: series,
                // 其他配置项...
                 textStyle: {
                   fontSize: 30 // 设置全局文字的字体大小
                 },
            };

            chart.setOption(option);
@@ -91,7 +161,9 @@
   view {
      color: #fff;
   }

   .school{
		
   }
   .bag {
      height: 100vh;
      background-color: #fff;
@@ -122,4 +194,7 @@
         vertical-align: top;
      }
   }
   #line-chart{
      height: 6rem;
   }
</style>