效果

echarts 可视化数据展示 雷达图_ci

initChart4() {
// 雷达图
var option = {
tooltip: {
trigger: 'axis'
},
radar: [
{
indicator: [
{text: '居家式', max: 100},
{text: '无终端', max: 100},
{text: '穿戴式', max: 100},
{text: '手机式', max: 100}
],
center: ['50%','50%'],
radius: 80,
shape:'circle',
nameGap:8,
name:{
color:'#fff'
},
axisLine:{
lineStyle:{
color:'black',
width:0
}
},
splitLine:{
lineStyle:{
type:'dashed'
}
},
splitArea:{
areaStyle:{
opacity:0
}
}
}
],
series: [
{
type: 'radar',
symbol:'none', //去掉尖部小圆点
tooltip: {
trigger: 'item'
},
lineStyle:{
color:'rgba(76,253,247)',
width:'2'
},
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(164,48,255)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(42,114,235)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: [
{
value: [86,73,60,30],
name: '设备使用对比'
}
]
}

]
};
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(
document.getElementById("main4"),
"walden"
);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},