下面是一些基础配置项以及常用的一些
可以参考官网进行查看 https://echarts.apache.org/zh/api.html#echarts
var option = {
radar: {
shape: \'circle\',//雷达图形状
radius:50,//雷达半径
splitNumber: 3, // 雷达图圈数设置
//雷达图各角的标志名称
indicator: [
{ name: \'销售\', max: 6500},
{ name: \'管理\', max: 16000},
{ name: \'信息技术\', max: 30000},
{ name: \'客服\', max: 38000},
{ name: \'研发\', max: 52000},
{ name: \'市场\', max: 25000}
]，
name: {
show:true,
formatter:function(value){// //雷达图各角的自定义显示数据
let result = \'\';
let index = list.indexOf(value);
result = ${value}：${data[index]};
return result;
},
textStyle: { //雷达图各角的样式
color: \'#595C61\'
}
},
axisLine: {
lineStyle: {
color:\'black\', // 设置雷达图中间射线的颜色
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : \'black\', // 雷达图网格的颜色
}
}，
splitArea : {
show : false,
areaStyle : {
color: \'transparent\', // 雷达图背景的颜色
}
},
},
series: [{
name: \'\',
type: \'radar\',
symbol: \'circle\', // 拐点的样式，还可以取值\'rect\',\'angle\'等
symbolSize: 8, // 拐点的大小，当大小为零时可以表示隐藏
///数据形成的不规则区域的边线样式
itemStyle: {
normal: {
color: \'rgba(255,255,255,0.6);\',
lineStyle: {
width: 2,
color: \'#21CCDF\',
},
},
},
//数据形成的不规则区域的内部样式
areaStyle: {normal: {}},
data : [{
value:_this.radarData,
label: {//各拐点的数值
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
}
}]
}]
};
在vue中简单使用
可以直接通过npm进行下载
直接在页面中引用 import * as echarts from \'echarts\'
下面代码写在挂载之后，可以拿到dom元素进行操作即可
var myChart = echarts.init(document.getElementById(\'setEcharts\'))
// 绘制图表
myChart.setOption({
radar: [{
splitNumber: 4,
tooltip: {
trigger: \'axis\'
},
name: {
formatter: function(value) {
let list = value.split("");
let text = [];
let result= \'\';
for(let i=3;i<=list.length-2;i++) {
text.push(list[i]);
}
if(list[1]\'a\') {
for(let j=1;j<=text.length;j++) {
result +=text[j-1];
}
}
if(list[1]\'b\') {
for(let j=1;j<=text.length;j++) {
if(!(j%3)&&text[j]!=undefined) {
result += text[j-1]+\'\n\';
}else {
result += text[j-1];
}
}
}
if(list[1]==\'c\') {
for(let j=1;j<=text.length;j++) {
if(!(j%4)&&text[j]!=undefined) {
result += text[j-1]+\'\n\';
}else {
result += text[j-1];
}
}
}
return list[0]+list[1]+list[2]+result+list[list.length-1];
},
rich: {
a: { color:\'red\' },
b: {
color: \'#fff\',
align: \'center\',
fontWidth: \'bold\'
},
c: { color:\'black\'}
}
},
splitLine : {
show : true,
lineStyle : {
width : 3,
color : \'#84869f\', // 雷达图网格的颜色
}
},
axisLine: {
lineStyle: {
color:\'rgba(0,0,0,0)\', // 设置雷达图中间射线的颜色
}
},
nameGap: -15,
// 指示器名称和指示器轴的距离。[ default: 15 ]
splitNumber: 4,
indicator: [
{ name: \'{b|28个家长点赞}\', max: 6500 },
{ name: \'{b|66名综合排名}\', max: 6500 },
{ name: \'{b|18名门店排名}\', max: 6500 },
{ name: \'{b|28分技能考核}\', max: 6500 },
{ name: \'{b|28%学习进度}\', max: 6500 },
{ name: \'{b|80%续保率}\', max: 6500 }
]
}],
color: [\'rgba(255,255,255,0)\'],
series: [{
type: \'radar\',
symbol: \'rect\',
symbolSize: 0,
data: [
{
value: [4600, 4500, 4200, 5030, 4930, 6500],
name: null
}
],
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: \'rgba(255, 255, 255, 0.9)\',
offset: 1
}
])
}
}]
})
}