ECharts雷达图自定义

ECharts雷达图自定义_第1张图片
ECharts雷达图最终效果
ECharts雷达图自定义_第2张图片
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/

你可能感兴趣的:(ECharts雷达图自定义)