<template>
<div>
<div class="fxbodyblock4">
<div id="fxmain4">
<div
class="fxplain3"
ref="fxplain_ref3"
:style="{ height: zoomNum * 490 + 'px', zoom: 1 / zoomNum }"
></div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default{
name:'',
data(){
return{
zoomNum: window.screen.width / 1920,
}
},
components:{
},
methods:{
fxplain3() {
let dataMax = [81,91,80,85,84,65,91];
const source = {
data: [43, 10, 28, 35, 50, 19, 13],
indicator: [
{ name: '指标一', max: dataMax[0]},
{ name: '指标二', max: dataMax[1]},
{ name: '指标三', max: dataMax[2]},
{ name: '指标四', max: dataMax[3]},
{ name: '指标五', max: dataMax[4]},
{ name: '指标六', max: dataMax[5]},
{ name: '指标七', max: dataMax[6]},
]
}
const buildSeries = function(data){
const helper = data.map((item, index) => {
const arr = new Array(data.length);
arr.splice(index, 1, item);
return arr;
})
return [data, ...helper].map((item, index) => {
return {
type: 'radar',
itemStyle: {
color: '#FD626C'
},
lineStyle: {
color: index === 0 ? '#FD626C' : 'transparent'
},
areaStyle: {
color: index === 0 ? '#FD626C' : 'transparent',
opacity: 0.3
},
tooltip: {
show: index === 0 ? false : true,
formatter: function() {
return source.indicator[index - 1].name + '不满意度:' + source.data[index - 1]+'%';
}
},
z: index === 0 ? 1 : 2,
data: [item]
}
})
}
let plains = this.$echarts.init(this.$refs.fxplain_ref3);
plains.setOption({
tooltip: {},
radar: {
// shape: 'circle',
center:['50%','50%'],
radius:'55%',
name: {
rich: {
b: {
color: '#FD626C',
fontSize:14,
fontFamily:'SourceHanSansSC-Regular',
padding:[0,0,5,0]
// lineHeight: 20
},
a: {
color: '#ffffff',
align: 'center',
fontSize:14,
fontFamily:'SourceHanSansSC-Regular',
// padding: 2,
// borderRadius: 4
}
},
formatter: (b,a)=>{
return `{a|}\n{b|${b}}`
}
},
splitNumber: 5,
splitArea: {
show: true,
areaStyle: {
color: ['rgba(12,62,129,0)','rgba(12,62,129,0)','rgba(12,62,129,0)','rgba(12,62,129,0)']
// color:'rgba(253,98,108,0.3)'
// color: ['#FD626C','FD626C','FD626C','FD626C']
}
},
splitLine: {
lineStyle: {
color: '#FD626C'
}
},
axisLine: {
lineStyle: {
color: '#FD626C'
}
},
indicator: source.indicator
},
series: buildSeries(source.data)
});
},
},
mounted: function(){
this.fxplain3();
}
}
</script>
<style type="text/css">
.fxgk .fxbodyblock4{
width: 100%;
height: 490px;
}
/* 第一个百分比左右,第二个上下 */
#fxmain4{
width: 100%;
height: 490px;
background: url('./images/leidatubcg.png') no-repeat 62% 100%;
}
.fxgk .fxplain3{
width: 100%;
}
</style>
echarts雷达图
最新推荐文章于 2024-04-28 08:55:06 发布