Echart2 雷达图中心显示数据

最近根据需要做了一个雷达图，因为工程里面一起就引入了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来实现优点就是可以设置鼠标移上时强调的样式吧。