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">
				<CircleChart ref="circleChart" :bgColor="'#2B7DFA'"></CircleChart>
			</view>
			<view class="row industry-box m-l30">
				<view class="row-c p-tb10 industry-item" 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 CircleChart from "@/common/chart/circle_chart.vue";
	import StatisticsTitle from "./statistics_title.vue";

	export default {
		name: 'stat-industry',
		components: {
			CircleChart,
			StatisticsTitle
		},
		props: {
			'industryList': {
				default: () => {
					return {
						oneMoney: [],
						oneNum: [],
						roseData: [],
						titles: [],
					}
				}
			}
		},
		data() {
			return {
				list: [{
					name: '电力',
					color: '#2B7DFA'
				}, {
					name: '信息传媒',
					color: '#2B7DFA'
				}, {
					name: '互联网',
					color: '#ED9A2C'
				}, {
					name: '电力',
					color: '#ED9A2C'
				}, {
					name: '信息传媒',
					color: '#00BF8A'
				}, {
					name: '互联网',
					color: '#00BF8A'
				}, ]
			};
		},
		methods: {
			onChange(e) {
				this.current = e
			},
      methods: {
        setData(data){
          console.log(data)

          this.$refs.circleChart.setServerData(data)
        }
      },
		}
	}
</script>

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

		.industry-item {
			width: 180rpx;
      .industry-icon-0{
        background-color: #2C7DF9;
      }
      .industry-icon-1{
        background-color: #2C7DF9;
      }
      .industry-icon-2{
        background-color: #00BF8A;
      }
      .industry-icon-3{
        background-color: #00BF8A;
      }
      .industry-icon-4{
        background-color: #ED9A2C;
      }
      .industry-icon-5{
        background-color: #ED9A2C;
      }

		}
	}
</style>