uniapp使用eatchs雷达图

引入插件

<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.name1arr.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>