uni-xiudoyou/src/pages/index/index.vue

<template>
	<view class="rf-index">
		<view class="index">
			<view class="header">
				<view class="header-warp">
					<view class="header-left">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
									</picker>
									<image src="../../static/images/downicon.png" mode="" class="icon"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="header-bar header-center">首页</view>
					<view class="header-right">
						<image src="../../static/images/seticon.png" mode="" class="icon"></image>
					</view>
				</view>
				<view class="user">
					<view class="user-left">
						<image src="" mode="" class="usericon"></image>
						<view class="message">
							<view class="name">猪猪虾</view>
							<view class="tele">151123165441</view>
						</view>
					</view>
					<view class="user-right">
						<image src="../../static/images/scan.png" mode="" class="sacnicon"></image>
						<view class="txt">
							验证码核销
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 100px;"></view>
			<view class="index-content">
				<!-- 关键指数 -->
				<view class="exponent">
					<view class="title-warp">
						<view class="name">
							关键指数
						</view>
						<view class="time">
							数据截至：2020.07.03 <text class="hour">10:10</text>
						</view>
					</view>
					<view class="exponent-list">
						<view class="item seale">
							<view class="left">
								<view class="title">
									销售总额
								</view>
								<view class="num">
									1848,123
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon"> 10% <text class="compare">同比上月</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item order">
							<view class="left">
								<view class="title">
									销售总额
								</view>
								<view class="num">
									1848,123
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon"> 10% <text class="compare">同比上月</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item todayseale">
							<view class="left">
								<view class="title">
									销售总额
								</view>
								<view class="num">
									1848,123
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon"> 10% <text class="compare">同比上月</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
						<view class="item todayorder">
							<view class="left">
								<view class="title">
									销售总额
								</view>
								<view class="num">
									1848,123
								</view>
								<view class="ratio">
									<view class="detail">
										<image src="../../static/images/down.png" class="icon"> 10% <text class="compare">同比上月</text>
									</view>
								</view>
							</view>
							<view class="right">
								<image src="../../static/images/sealenum.png" mode="" class="logoicon"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 待处理事物 -->
				<view class="something">
					<view class="title">
						待处理事物
					</view>
					<view class="todo-list">
						<view class="item">
							<view class="title">
								带发货订单
							</view>
							<view class="num">
								1802
							</view>
						</view>
						<view class="item">
							<view class="title">
								带发货订单
							</view>
							<view class="num">
								1802
							</view>
						</view>
						<view class="item">
							<view class="title">
								带发货订单
							</view>
							<view class="num">
								1802
							</view>
						</view>
					</view>
				</view>

				<!-- 数据概况 -->
				<view class="data">
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
						<view class="qiun-title-dot-light">数据概况</view>
					</view>
					<view class="echarts">
						<view class="title">
							<view class="left">
								<text class="future">未来七天预定：<text class="num">0</text>
									<text class="yesterday">昨日全天：<text class="daynum">0</text></text>
								</text>
							</view>
							<view class="right">
								<view class="today-icon"></view><text class="title">今日</text>
								<view class="yesterday-icon"></view><text class="title">昨日</text>
							</view>
						</view>
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
						</view>
					</view>
				</view>

				<!-- 商品销售占比 -->
				<view class="shop-echarts-warp">
					<view class="title">
						商品销售占比
					</view>
					<view class="shop-echarts">
						<canvas canvas-id="shopecharts" id="shopecharts" class="shopecharts" @touchstart="touchPie"></canvas>
					</view>
				</view>

        <view id="testecharts"></view>

				<view class="" style="height: 40rpx;"></view>
			</view>
		</view>
		<!--页面加载动画-->
		<!-- <rf-loading v-if="loading"></rf-loading> -->
	</view>
</template>
<script>
  import uCharts from '../../js_sdk/u-charts/u-charts/u-charts';
	let _self;
	let canvaLineA = null;
	let canvaPie = null;
	export default {
		name: 'Header',
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1, // 像素比

				// 饼图数据
				bWidth: '',
        bHeight: ''
			};
		},
		// 此处定义传入的数据
		props: {
			shoplist: {
				type: Object,
				value: null,
			},
		},
		// 页面生命周期 监听页面加载
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(690); // upx2px 转换为px
			this.cHeight = uni.upx2px(300);
			this.bWidth = uni.upx2px(690);
			this.bHeight = uni.upx2px(300);
			this.getServerData();
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value;
			},
			getList() {
				console.log(1);
			},

			seting() {
				console.log('设置');
			},
			// 数据处理
			getServerData() {
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data: {},
					success: function(res) {
						console.log(res);
						let LineA = {
							categories: [],
							series: [],
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories = res.data.data.LineA.categories;
						LineA.series = res.data.data.LineA.series;
						_self.showLineA('canvasLineA', LineA);

						let pie = {
							series: [],
						};
						pie.series = res.data.data.Pie.series;
						_self.showPie('shopecharts', pie);
					},
					fail: () => {
						_self.tips = '网络错误，小程序端请检查合法域名';
					},
				});
			},
			// 图表
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 12,
					legend: {
						show: false,
					},
					dataLabel: false, // 图表中是否显示数据
					duration: 500,
					dataPointShape: false, // 折点
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories, // x轴数据
					series: chartData.series, // 值
					animation: true,
					xAxis: {
						type: 'grid',
						disableGrid: true,
					},
					yAxis: {
						gridType: 'solid',
						gridColor: '#CCCCCC',
						min: 0,
						max: 180,
						format: (val) => {
							return val.toFixed(0) + '元';
						},
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'curve', // 平滑曲线； straight直线
						},
					},
				});
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					},
				});
			},

			// 饼图
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						position: 'left',
						margin: 10,
						itemGap: 20,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15,
						},
					},
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data;
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  padding: 0 30rpx;
  background-color: $barColor;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  z-index: 99;

  .header-warp {
    display: flex;
    height: 80rpx;
    color: #231726;
    background-color: #ffcc01;

    .header-left {
      font-size: 28rpx;

      .uni-list-cell-db {
        height: 80rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $barColor;
				border-bottom: transparent;

        .icon {
          width: 17rpx;
          height: 12rpx;
          margin-left: 10rpx;
        }
      }
    }

    .header-center {
      flex: 1;
      font-size: 36rpx;
      font-weight: 700;
      text-align: center;
      line-height: 80rpx;
    }

    .header-right {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .user {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-left {
      display: flex;
      justify-content: center;
      align-items: center;

      .usericon {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #ffffff;
      }

      .message {
        margin-left: 32rpx;
        color: #2c1b0a;

        .name {
          font-size: 30rpx;
          font-weight: 700;
        }

        .tele {
          font-size: 24rpx;
        }
      }
    }

    .user-right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .sacnicon {
        width: 40rpx;
        height: 40rpx;
      }

      .txt {
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }
}

.index {
  background-color: #fafafa;

  .index-content {
    padding: 0 30rpx;

    .exponent {
      margin-top: 20rpx;

      .title-warp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;

        .name {
          font-size: 32rpx;
          font-weight: 700;
        }

        .time {
          font-size: 24rpx;
          color: #191919;

          .hour {
            margin-left: 15rpx;
          }
        }
      }

      .exponent-list {
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 320rpx;
          border-radius: 10rpx;
          color: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 25rpx;
          box-sizing: border-box;
          margin-bottom: 32rpx;

          &:nth-child(odd) {
            margin-right: 44rpx;
          }

          &:nth-child(3),
          &:nth-child(4) {
            margin-bottom: 0;
          }

          .left {
            .title {
              font-size: 24rpx;
            }

            .num {
              font-size: 36rpx;
              font-weight: 700;
              margin-top: 5rpx;
            }

            .ratio {
              margin-top: 10rpx;
              font-size: 20rpx;

              .detail {
                display: flex;
                justify-content: center;
                align-items: center;

                .icon {
                  width: 12rpx;
                  height: 16rpx;
                  margin-right: 5rpx;
                }

                .compare {
                  margin-left: 10rpx;
                  font-size: 20rpx;
                }
              }
            }
          }

          .right {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            background-color: rgba($color: #ffffff, $alpha: 0.2);
            display: flex;
            justify-content: center;
            align-items: center;

            .logoicon {
              width: 44rpx;
              height: 53rpx;
            }
          }
        }

        .seale {
          background-image: linear-gradient(to top right, #e379d0, #f767b1);
        }

        .order {
          background-image: linear-gradient(to top right, #f38867, #fca43d);
        }

        .todayseale {
          background-image: linear-gradient(to top right, #9859fd, #d98afa);
        }

        .todayorder {
          background-image: linear-gradient(to top right, #17c1b1, #40e98f);
        }
      }
    }

    .something {
      margin-top: 30rpx;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        color: $titleColor;
      }

      .todo-list {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 43rpx 30rpx;
        border-radius: 10rpx;

        .item {
          width: 33.33%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .title {
            color: $subheadColor;
            font-size: 30rpx;
          }

          .num {
            color: $titleColor;
          }
        }
      }
    }

    .data {
      margin-top: 40rpx;

      .echarts {
        background-color: #ffffff;
        border-radius: 10rpx;
      }

      .title {
        display: flex;
        justify-content: space-between;
        color: #333333;
        padding-top: 30rpx;
        padding-left: 15rpx;
        padding-bottom: 30rpx;
        box-sizing: border-box;

        .left {
          .future {
            font-size: 26rpx;

            .num {
              font-size: 30rpx;
            }

            .yesterday {
              margin-left: 10rpx;
            }
          }
        }

        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;

          .today-icon {
            width: 20rpx;
            height: 9rpx;
            background-color: #ff9c2f;
            margin-right: 10rpx;
          }

          .title {
            font-size: 20rpx;
            margin-right: 20rpx;
          }

          .yesterday-icon {
            width: 20rpx;
            height: 9rpx;
            background-color: #b15cfa;
            margin-left: 10rpx;
          }

          .title {
            font-size: 20rpx;
          }
        }
      }

      .qiun-title-dot-light {
        color: $titleColor;
        font-size: 32rpx;
        font-weight: 700;
        padding-bottom: 25rpx;
      }

      /* 样式的width和height一定要与定义的cWidth和cHeight相对应 */
      .qiun-charts {
        width: 690rpx;
        height: 300rpx;
      }

      .charts {
        width: 690rpx;
        height: 300rpx;
      }
    }

    .shop-echarts-warp {
      background-color: #ffffff;
      border-radius: 10rpx;
      margin-top: 40rpx;

      .title {
        padding: 40rpx 24rpx 30rpx;
        font-size: 26rpx;
        color: $titleColor;
      }

      .shop-echarts {
        width: 690rpx;
        height: 300rpx;
      }

      .shopecharts {
        width: 690rpx;
        height: 300rpx;
      }
    }
  }
}
</style>