最近根据需要做了一个雷达图，因为工程里面一起就引入了echart2，所以直接使用的是这个版本
官网下载了2.2.7，主要是看例子中的代码,doc/example目录下面的html都是，可以把下图的js替换一下，上面的是未压缩的，有兴趣的可以调试运行看看源码
具体实现方式是通过中心坐标添加一个markPoint，选择中心为空的标志图形，然后设置边框为0。
option如下：
var option = {
tooltip : {
trigger: \'item\',
formatter: function (params,ticket,callback) {
console.log(params)
if(params[1]==\'\'||params[1]==\'综合得分\'){
return \'综合得分：0.999\';
}
var res = params[1]+":"+params[2][params[3]];
return res;
}
},
calculable: false,
polar : [
{
indicator : [
{ text: \'销售销售销售\',min:0,max:1,axisLabel: {show: true,interval:0,textStyle: {color: \'#595959\',fontSize:12}}},/*min：最小值;max:最大值，根据分割段数平均分配;axisLabel:坐标轴文本，控制显示的内容及样式*/
{ text: \'管理管理管理\'},
{ text: \'信息技术信息技术\'},
{ text: \'客服客服客服\'},
{ text: \'研发研发研发\'},
{ text: \'市场市场市场\'}
],
axisLine:{show:false},//不显示坐标轴线
splitArea:{show:false},//不显示分隔区域
splitNumber:5,//分割段数
type:\'polygon\',
name : {
formatter:\'【{value}】\',//格式化标签显示内容
textStyle: {color:\'#595959\'}//各项标签颜色
},
splitLine : {
show : true,
lineStyle : {
width : 2,
color : \'#ccc\'//每块区域分隔线颜色
}
}
}
],
series : [
{
name: \'雷达图\',
type: \'radar\',
itemStyle: {//鼠标移上显示样式
emphasis: {
lineStyle: {
width: 4
}
}
},
data : [
{
value : [0.2, 0.4, 0.6,0.9, 1, 1],
name : \'\',
symbol: \'none\',//不显示圆点
itemStyle: {
normal: {
color:\'#5B9BD5\'//雷达图区域线颜色
}
}
}
],
markPoint : {
clickable:false,
symbol: \'emptyCircle\',//使用中间是空的图形类型，设置边框为0后，就不显示了
data : [
{name : \'综合得分\', value : 0.999, x:\'50%\', y:\'50%\', symbolSize:20}
],
itemStyle: {
normal: {
color:\'#595959\',//整体设置颜色
borderWidth:0,/*保证不显示边框*/
label:{textStyle:{fontSize:18}}/*文本字体大小*/
},emphasis: {/*鼠标移上样式*/
borderWidth:0,
label:{textStyle:{fontSize:18}}/*文本字体大小*/
}
}
}
}
]
};
效果图如下：
需要主要的一点是，用来操作的dom元素必须设置高度及宽度。
PS:
网上还看到一种更简单的方式，通过定位title来实现:
title: {
text: \'88\',
x: \'center\',
y: \'center\',
textStyle: {
color: \'#333\',
fontWeight: \'bolder\',
fontSize: 64,
}
}
对比来说，通过markPoint来实现优点就是可以设置鼠标移上时强调的样式吧。