引入插件

<template>
	<view class="page">
		<view class="AllBox">
			<view class="topTit">标题</view>
			<view class="leftTit">对比分析</view>
			<view class="tableBox">
				<view class="leftBox">
					<view class="leftItem" v-for="(im,ii) in leftList" :key="ii">{{im}}</view>
				</view>
				<view class="rightBox">
					<view class="rightItem" v-for="(item,i) in rightList" :key="i">
						<view class="rItemTxt">{{item.name1}}</view>
						<view class="rItemTxt">{{item.name2}}</view>
						<view class="rItemTxt">{{item.name3}}</view>
						<view class="rItemTxt">{{item.name4}}</view>
						<view class="rItemTxt">{{item.name5}}</view>
						<view class="rItemTxt">{{item.name6}}</view>
						<view class="rItemTxt">{{item.name7}}</view>
						<view class="rItemTxt">{{item.name8}}</view>
						<view class="rItemTxt">{{item.name9}}</view>
					</view>
				</view>
			</view>
			<view class="leftTit">雷达图</view>
			<view class="echartsBox">
				<view><l-echart ref="chart" @finished="init"></l-echart></view>
			</view>
		</view>

		<view class="btnBox">
			<view class="button " @click="addBtn()">+ 添加</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

	export default {
		components: {},
		data() {
			return {
				// 列表数据
				rightList: [
					{name1: '张三',name2: 20,name3: 30,name4: 40,name5: 50,name6: 60,name7: 70,name8: 80,name9: 90,},
					{name1: '李四',name2: 12,name3: 13,name4: 14,name5: 15,name6: 16,name7: 17,name8: 18,name9: 19,},
					{name1: '王五',name2: 62,name3: 63,name4: 64,name5: 65,name6: 66,name7: 67,name8: 68,name9: 69,},
					{name1: '赵六',name2: 52,name3: 53,name4: 54,name5: 55,name6: 56,name7: 57,name8: 58,name9: 59,}
				],
				leftList: ['名字', '展示2', '展示3', '展示4', '展示5', '展示6', '展示7', '展示8', '展示9'],
				colorList: ['#1f77b4', '#9467bd', '#2ca02c', '#ff7f0e', '#1882f8', '#f9d158', '#c378ff', '#11BBEC','#fb3b3b', '#78be86'],
			}
		},

		mounted() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.getOption1());
			});
		},
		methods: {
			addBtn() {
				uni.navigateTo({
					url: '/pages/addAnalysis/addAnalysis'
				})
			},

			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart.init(echarts);
			},


			//图表配置
			getOption1() {
				let catNameS = this.rightList.map((item) => {
					return item.name1
				})
				let dataS = this.dataZHfun(this.rightList)
				// console.log(catNameS, dataS);
				// 雷达图
				var option = {
					legend: {
						data: catNameS,
						top: 0,
						x: 'center',
					},
					radar: {
						radius: 85, //雷达图大小缩放
						center: ['50%', '55%'], //位置
						nameGap: 8, // 图中工艺等字距离图的距离
						indicator: [
							{name: '展示2', max: 100,},
							{name: '展示3', max: 100,},
							{name: '展示4', max: 100,},
							{name: '展示5', max: 100,},
							{name: '展示6', max: 100,},
							{name: '展示7', max: 100,},
							{name: '展示8', max: 100,},
							{name: '展示9', max: 100,}
						]
					},
					series: [{type: 'radar',data: dataS,}]
				}
				return option
			},
            // 数据转换
            dataZHfun(list) {
				let newArr = []
				list.forEach((item, i) => {
					const arr = {name:'',value:[], itemStyle:{color:''}}
					arr.name = item.name1
					arr.value.push(item.name2)
					arr.value.push(item.name3)
					arr.value.push(item.name4)
					arr.value.push(item.name5)
					arr.value.push(item.name6)
					arr.value.push(item.name7)
					arr.value.push(item.name8)
					arr.value.push(item.name9)
					arr.itemStyle.color = this.colorList[i]
					// console.log('arr',arr);
					newArr.push(arr)
				})
				return newArr
			},
		},
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		height: calc(100vh - 44px);

		.AllBox {
			height: calc(100vh - 124px) !important;
			flex: 1;
			overflow-y: auto;
			padding: 0 16px;

			.topTit {
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-size: 16px;
				font-weight: 700;
				color: #333436;
			}

			.leftTit {
				margin-top: 16px;
				width: 100%;
				height: 18px;
				text-align: left;
				line-height: 18px;
				font-size: 16px;
				color: #2f3338;
				padding-left: 10px;
				border-left: 2px solid #1756ef;
			}

			.tableBox {
				width: 100%;
				height: 298px;
				margin-top: 12px;
				border-top: 1px solid #dfdfdf;
				border-left: 1px solid #dfdfdf;
				border-right: 1px solid #dfdfdf;
				display: flex;

				.leftBox {
					width: 100px;

					.leftItem {
						width: 100%;
						height: 33px;
						text-align: center;
						line-height: 33px;
						font-size: 13px;
						color: #333436;
						background-color: #f9f9fa;
						border-right: 1px solid #dfdfdf;
						border-bottom: 1px solid #dfdfdf;
					}

				}

				.rightBox {
					width: calc(100% - 100px);
					overflow-x: auto;
					overflow-y: hidden;
					display: flex;
					border-bottom: 1px solid #dfdfdf;

					.rightItem {
						flex: 1;
						min-width: 70px;

						.rItemTxt {
							width: 100%;
							height: 33px;
							text-align: center;
							line-height: 33px;
							font-size: 13px;
							color: #333436;
							border-right: 1px solid #dfdfdf;
							border-bottom: 1px solid #dfdfdf;
						}

						.rItemTxt:last-child {
							border-bottom: none;
						}
					}

					.rightItem:last-child .rItemTxt {
						border-right: none;
					}
				}
			}
		}

		.btnBox {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 70px;
			display: flex;
			justify-content: center;
			align-items: center;

			.button {
				border-radius: 6px;
				height: 44px;
				width: calc(100% - 32px);
				text-align: center;
				line-height: 44px;
				background-color: #1756ef;
				color: #fff;
			}
		}
	}

	.echartsBox {
		margin-top: 20px;
		width: 100%;
		height: 300px;
	}
</style>