<template>
<view class="radoContent">
<!-- #ifdef APP-PLUS || H5 -->
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="custRadoChart" class="echarts"></view>
<!-- #endif -->
</view>
</template>
<script>
import echarts from '../../static/echarts.js'
import icons from '../uni-icons/icons.js'
export default {
props: {
chartId: String,
dataInfo: null,
isShowIcon: {
type: Boolean,
default: () => {
return false
}
},
themeColor: {
type: String,
default: '#3CD9D9'
},
themeColor50: {
type: String,
default: '#AAEFEF'
},
themeColor25: {
type: String,
default: '#D4F7F7'
},
fuzhuColor: {
type: String,
default: '#FEC350'
},
fuzhuColor50: {
type: String,
default: '#FEE1A7'
},
fuzhuColor15: {
type: String,
default: '#FFF6E4'
}
},
data() {
return {
option: {
radar: [{
indicator: [{
name: '关注意愿',
max: 100,
min: 0
},
{
name: '浏览意愿',
max: 100,
min: 0
},
{
name: '分享意愿',
max: 100,
min: 0
}
],
center: ['50%', '65%'],
radius: 90,
startAngle: 90,
splitNumber: 2,
shape: 'polygon',
name: {
formatter: '{value}',
textStyle: {
color: '#333',
opacity: 0.7
}
},
splitArea: {
areaStyle: {
// color: ['rgba(114, 172, 209, 0.2)',
// 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
// 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
color: [
// '#333'
'rgba(115,227,227,0.3)'
// '#88F4F4'
// 'rgba(254,195,80,0.5)',
// 'rgba(254,195,80,0.4)',
// 'rgba(254,195,80,0.3)',
// 'rgba(254,195,80,0.2)',
// 'rgba(254,195,80,0.1)'
],
shadowColor: 'rgba(0, 0, 0, 0)',
// shadowBlur: 10
}
},
axisLine: {
lineStyle: {
// color: 'rgba(255, 255, 255, 0.5)'
color: 'rgba(84,222,222,1)'
}
},
splitLine: {
lineStyle: {
// color: 'rgba(255, 255, 255, 0.5)'
color: 'rgba(84,222,222,1)'
}
}
}],
series: [{
name: '雷达图',
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [{
value: [],
name: '图一',
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: '#fff',
borderWidth: 2,
// borderColor: '#202638'
borderColor: 'rgba(118,228,228,0.7)'
},
lineStyle: {
type: 'solid',
borderWidth: 4,
// color: '#202638'
color: 'rgba(118,228,228,1)'
},
areaStyle: {
// color: 'rgba(255, 255, 255, 0.7)'
color: 'rgba(118,228,228,0.6)'
}
}]
}]
}
}
},
mounted() {
this.getDataAction()
},
filters: {
userLevelFilter(val) {
if (val) {
switch (val){
case 1:
return 'A'
break;
case 2:
return 'B'
break;
default:
return 'C'
break;
}
}
return '-'
}
},
methods: {
getDataAction() {
this.option.radar[0].splitArea.areaStyle.color = [this.themeColor25]
this.option.radar[0].axisLine.lineStyle.color = this.themeColor
this.option.radar[0].splitLine.lineStyle.color = this.themeColor
this.option.series[0].data[0].itemStyle.borderColor = this.themeColor
this.option.series[0].data[0].lineStyle.color = this.themeColor
this.option.series[0].data[0].areaStyle.color = this.themeColor
// 关注意愿、浏览意愿、分享意愿
this.option.series[0].data[0].value = [this.dataFilter(this.dataInfo.followIntention), this.dataFilter(this.dataInfo.scanIntention), this.dataFilter(this.dataInfo.shareIntention)]
this.option.radar[0].indicator[0].name = '关注意愿' + '：' + this.levelFilter(this.dataInfo.followIntention)
this.option.radar[0].indicator[1].name = '浏览意愿' + '：' + this.levelFilter(this.dataInfo.scanIntention)
this.option.radar[0].indicator[2].name = '分享意愿' + '：' + this.levelFilter(this.dataInfo.shareIntention)
},
dataFilter(val) {
if (val) {
switch (val){
case 'A':
return 100
break;
case 'B':
return 50
break;
default:
return 10
break;
}
}
return 10
},
levelFilter(val) {
if (val) {
switch (val){
case 'A':
return '高'
break;
case 'B':
return '中'
break;
default:
return '低'
break;
}
}
return '-'
},
onViewClick(options) {
// console.log(options)
}
},
watch: {
dataInfo: {
handler(e) {
this.getDataAction()
},
deep: true
},
fuzhuColor15: {
handler(e) {
this.getDataAction()
},
immediate: true
}
},
components: {
icons
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
this.initAction()
},
methods: {
initAction() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
initEcharts() {
myChart = echarts.init(document.getElementById('custRadoChart'))
// 观测更新的数据在 view 层可以直接访问到
if (myChart) {
myChart.setOption(this.option)
}
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
if (myChart) {
myChart.setOption(newValue)
}
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
<style scoped lang="scss">
.radoContent {
width: 100%;
height: 100%;
position: relative;
font-size: 60rpx;
font-family: DIN Alternate;
font-weight: bold;
background-color: #4CD964;
.echarts {
width: 100%;
margin-top: 0rpx;
height: 100%;
}
.topSection {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 50rpx 48rpx;
box-sizing: border-box;
.leftDiv {
display: flex;
flex-direction: column;
.levelDiv {
display: flex;
align-items: center;
.des {
margin-top: 10rpx;
font-size: 12rpx;
font-family: Verdana, Verdana-Regular;
font-weight: 400;
color: #999999;
}
.levelImg {
width: 144rpx;
height: 22rpx;
margin-top: 20rpx;
}
}
}
.level {
font-size: 60rpx;
font-family: DIN Alternate, DIN Alternate-Bold;
font-weight: 700;
text-align: center;
}
.levelDes {
font-size: 20rpx;
font-family: Verdana, Verdana-Regular;
font-weight: 400;
color: #999999;
}
}
}
</style>