assess-app/pages/statistics/module/stat_industry.vue

<template>
	<view class="page-box-bg-fff m-t20 r-30 p-30">
		<StatisticsTitle :is_right="false" :genre="0" :leftText="'行业占比(金额排行)'" :rightText="''">
		</StatisticsTitle>
		<view class="page-box-bg-fff row-justify-sb center r-30">
			<view class="chart_item column-c m-lr20">
				<RoseChart ref="roseChart"></RoseChart>
			</view>
			<view class="row industry-box m-l30">
				<view class="row-c p-tb10 industry-item m-r30" v-if="index<=5"
					v-for="(item,index) in industryList.titles" :key="index">
					<view class="wh-14 m-r10" :class="'industry-icon-'+index"></view>
					<text class="size-24 text-color-576">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RoseChart from "@/common/chart/rose_chart.vue";
	import StatisticsTitle from "./statistics_title.vue";

	export default {
		name: 'stat-industry',
		components: {
			RoseChart,
			StatisticsTitle
		},
		props: {
			'industryList': {
				default: () => {
					return {
						oneMoney: [],
						oneNum: [],
						roseData: [],
						titles: [],
					}
				}
			}
		},
		data() {
			return {};
		},
		methods: {
			onChange(e) {
				this.current = e
			},
			setData(data) {
				console.log(data)
				this.$refs.roseChart.setServerData(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.industry-box {
		flex-wrap: wrap;

		.industry-item {
			width: 120rpx;

			.industry-icon-0 {
				background-color: #2C7DF9;
			}

			.industry-icon-1 {
				background-color: #00BF8A;
			}

			.industry-icon-2 {
				background-color: #ED9A2C;
			}

			.industry-icon-3 {
				background-color: #EE6666;
			}

			.industry-icon-4 {
				background-color: #73C0DE;
			}

			.industry-icon-5 {
				background-color: #9A60B4;
			}

		}
	}
</style>