ECharts雷达图自定义

ECharts雷达图最终效果 ECharts雷达图官方示例

最终效果和示例之间主要需要修改的两个大的地方：

• 不同颜色的圆弧，指标的值所处的范围是0到1（0%-100%）；50%、70%、80%、100%的地方需要绘制分隔圆弧线；而且颜色并不相同；
• 70%、80%的圆弧为dashed样式， 50%、100%处的圆弧样式为solid样式；
• 指标的文本颜色需要根据值来变化，当值大于80%的时候为绿色，70%-80%之间时为黄色, 70%以下为红色；
• 其他的改变都可以参照官方文档很容易定制出来：

http://echarts.baidu.com/option.html#radar
http://echarts.baidu.com/demo.html#radar-custom

不同颜色和样式的分割圆弧

Echart的雷达图本身有splitLine的设置，但是splitLine只支持设置一种type，[solid,dashed,dotted]；不同的分割线倒可以设置不同的颜色；所以这主要是样式无法设置多种的问题；
此外，Echart雷达图还支持splitArea的设置，因此有一个大胆的想法，用splitArea来绘制分割线，把splitNumber设置大一点，指定值周围的splitArea用指定颜色绘制，其他的splitArea用透明颜色绘制：

var SPLITNUMBER =150;
    splitlinecolors = [];
    var i = 0;
    for(;i < 0.69*SPLITNUMBER;i++){
        splitlinecolors.push('rgba(255, 137, 47, 0)')
    }
    splitlinecolors.push('rgba(255, 137, 47, 1)')
    for(i+=1;i < 0.79*SPLITNUMBER;i++){
        splitlinecolors.push('rgba(255, 137, 47, 0)')
    }
    splitlinecolors.push('rgba(00, 176, 92, 1)')
    for(i+=1;i < SPLITNUMBER;i++){
        splitlinecolors.push('rgba(255, 137, 47, 0)')
    }
    
    splitareacolors = []
    var i = 0;
    for(;i < 0.49*SPLITNUMBER;i++){
        splitareacolors.push('rgba(255, 137, 47, 0)')
    }
    splitareacolors.push('rgba(128, 128, 128, 1)')
    for(i+=1;i < SPLITNUMBER-1;i++){
        splitareacolors.push('rgba(255, 137, 47, 0)')
    }
    splitareacolors.push('rgba(128, 128, 128, 1)')

指标的文本颜色需要根据值来变化

这个从配置没找到解决的办法，radar.name能统一设置indicator text的文本颜色，但是不支持不同indicator设置不同的颜色；没办法只能改源码了。

从https://github.com/ecomfe/echarts fork出来一个源，clone到本地，找radar相关的源码；Echart的源码结构比较清晰，所以即时没有相关的介绍文档，看目录结构熟悉下，也能找到对应的源码；

最终发现在 src/coord/radar/RadarModel.js 里面根据‘indicator’配置，生成了indicatorModels数组，这个数组里面的indicatorOpt.nameTextStyle应该就决定了最终indicator的文本样式；

所以最快速解决的办法是‘indicator’配置数组里面加一项'color'属性，然后在此处根据indicator的每一项是否配置color属性来改变nameTextStyle属性；

var iNameTextStyle = nameTextStyle
if(indicatorOpt.color != null){
    iNameTextStyle = zrUtil.clone(nameTextStyle)
    iNameTextStyle.color = indicatorOpt.color
}

如果indicator需要定义不同的颜色，需要修改配置为:

radar: [
    {
        indicator: [
            {text:'indicator1',color:'rgba(255, 2, 35, 1)',max:100},
            {text:'indicator2',color:'rgba(00, 176, 92, 1)',max:100},
        ],
    }
]

修改后的源码：
https://github.com/sailaway/echarts/