From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期三, 03 四月 2024 18:44:07 +0800
Subject: [PATCH] 三
---
pages/dataDisplay/dataDisplay.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 96 insertions(+), 21 deletions(-)
diff --git a/pages/dataDisplay/dataDisplay.vue b/pages/dataDisplay/dataDisplay.vue
index f6a1290..f39cd35 100644
--- a/pages/dataDisplay/dataDisplay.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.1