美文网首页
Echarts.js 根据数值自定义radar雷达图拐点颜色

Echarts.js 根据数值自定义radar雷达图拐点颜色

作者: 阿鲁提尔 | 来源:发表于2018-07-06 14:15 被阅读0次

    自己把自己坑了

    公司需求的时候，做了一种线形图，根据数值的大小，变换颜色。示例图如下：


    线形图的写法：
color:function(params) {
    let colorList = ['#2CBAFF','#FE7979'];
    if (params.data < 70) {
        return colorList[0];
    } else if (params.data >= 70) {
        return colorList[1];
    }
}

    产品经理问我，可以不可以做出这样的。设计图如下：



    因为才使用这个插件一天，也不是很熟悉，感觉原理应该差不多。就答应了下来。
    (自己挖坑 = =! )
    等真正做的时候，发现事情并没有这么简单。。

    • 首先，线图和雷达图的数据写法不一样
    线图的数据如下：
series : [
  {
    type:'line',   --类型 线
    label: {  
        normal: {   --文字样式
            margin:2,         --距离
            show: true,       --是否展示文字
            position: 'top',  --文字在点的哪个位置
            fontSize:'14'     --文字大小
        }
    },


    -----------------------------数据在这---------------------------------
    data:[86, 78, 65, 52, 51, 49], 
    -----------------------------数据在这---------------------------------


    smooth: true,  --让曲线变平滑的
    symbolSize: 13,  --圆点大小
    color:function(params) {   -- 颜色  颜色写在外面，就是圆点和文字同种颜色
      let colorList = ['#2CBAFF','#FE7979'];
      alert(params.data)    画重点！！！ 循环输出 数据   86   78  65  52  51  49
      if (params.data < 70) {    /
          return colorList[0];
      } else if (params.data >= 70) {
          return colorList[1];
      }
    },
    lineStyle: {   -- 线的样式
      normal: {
        color: '#2CBAFF',
        width: 6,
        shadowColor: 'rgba(0,70,139,0.9)',
        shadowBlur: 50,
        shadowOffsetY: 15
      }
    },
    itemStyle:{  -- 圆点样式
      borderWidth:3
    },
  }
]
线图的数据: data:[xxx,xxx,xxx,xxx,xxx,xxx,xxx]

    雷达图数据如下：
series: [
  {
    type: 'radar',
    radarIndex: 1,
    data: [
        {

  
            -----------------------------数据在这---------------------------------
            value: [100, 60, 50, 80, 50, 90, 80, 50, 80, 40],  -- 数据
            -----------------------------数据在这---------------------------------

 
            symbolSize: 8,  --拐点大小
            lineStyle: {   --线的样式
                width: 4,
                color: '#29B8FF'
        },
        areaStyle: {    --数据圈内样式
            normal: {
                opacity: 0.9,
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                        color: '#27B7FF',
                        offset: 0
                    },
                    {
                        color: '#5AD1FF',
                        offset: .4
                    }
                ])
            }
        }
    }
  ],
  itemStyle: {  --圆点样式
      normal: {
        borderWidth: 0,
        //color: '#2CBAFF',
        color:function(params) {   -- 颜色  颜色写在外面，就是圆点和文字同种颜色
           let colorList = ['#2CBAFF','#FE7979'];
               alert(params.data)    不同点 获取不到数据
           if (params.data < 70) {    /
              return colorList[0];
           }else if (params.data >= 70) {
              return colorList[1];
        }
      }
    }
  },
 }
雷达图的数据: data:[ value{xxx,xxx,xxx,xxx,xxx,xxx,xxx} ]  内

    后来的做法：把itemStyle提了出去，与data同级

    series: [
  {
    type: 'radar',
    radarIndex: 1,
    data: [
       { value: [75, 95, 90, 90, 85, 83, 80, 60, 90, 100],
         symbolSize: 7,
         // itemStyle: {
         //     normal: {
         //         borderWidth: 2,
         //         // color:'#2CBAFF'
         //         color:'red',
         //         // color: function (params) {
         //         //     console.log(params);
         //         //     let colorList = ['#2CBAFF', '#FE7979'];
         //         //     alert(params.data[0].value)
         //         //     if (params.data[0] < 70) {
         //         //         return colorList[0];
         //         //     } else if (params.data[0] >= 70) {
         //         //         return colorList[1];
         //         //     }
         //         // },
         //     }
         // }, 删除
         lineStyle: {
             width: 4,
             color: '#29B8FF'
          },
          areaStyle: {
             normal: {
                 opacity: 0.9,
                 color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                 {
                     color: '#27B7FF',
                     offset: 0
                 },
                 {
                     color: '#5AD1FF',
                     offset: .4
                  }
               ])
            }
         }
       }
     ],
     itemStyle: {  -- 放到这里
        normal: {
           borderWidth: 2,
           color: function (params) {
           let colorList = ['#2CBAFF', '#FE7979'];
           for(let i = 0;i<params.value.length;i++){
               alert(params.value[i]);
               if (params.value[i] < 70) {
                     console.log(colorList[0])
               } else if (params.value[i] >= 70) {
                     console.log(colorList[1])
               }
             }
          }
      }
    }
  }
]
这种写法会依次根据在控制台输出符合的颜色
    返回结果
    • 第二，线图可以接受多个颜色，而雷达图radar只能接受一个颜色

    我以为到这里已经结束了。
    BUT。。。
    当我把console.log换成return的时候。遍历数组，总是根据数组第一个值返回对应颜色，下面的不执行了，并把所有的拐点设置为第一个值符合的颜色。
    简单来说，就是雷达图的颜色只接受一个参数。

    换种思维

    既然一组数据只能用一种颜色，我在绘制这个数组的时候，先做个遍历：

    • 大于等于某值，生成一个数组，设置颜色1
    • 小于某值，生成一个数组，设置颜色2

    绘制

    一个图表 设置三层覆盖

    • 把所有数据绘制下来。不要圆点。只要线
    • 把大于某数值的圆点绘制下来，设置蓝色
    • 把小于某数值的圆点绘制下来，设置红色
    #### 绘制了三个图表，有时间再详细解析。可以根据需要删除多余的。

<script>
var myChart1 = echarts.init(document.getElementById('chartsContCanvas1'));
var myChart2 = echarts.init(document.getElementById('chartsContCanvas2'));
var myChart3 = echarts.init(document.getElementById('chartsContCanvas3'));

//数据在这里,分别表示三个图表
var itemArrIntelligence = [86, 84, 91, 77, 82, 70];   //智力
var itemArrBone = [59, 89, 100, 82];  //骨骼发育
var itemArrImmunity = [91, 95, 100, 82, 70];  //免疫力

var intelligenceNormal = itemArrIntelligence.map((item) => { if (item >= 70) { return } else { return item } })
var intelligenceLow = itemArrIntelligence.map((item) => { if (item < 70) { return } else { return item } })

var boneNormal = itemArrBone.map((item) => { if (item >= 70) { return } else { return item } })
var boneLow = itemArrBone.map((item) => { if (item < 70) { return } else { return item } })

var immunityNormal = itemArrImmunity.map((item) => { if (item >= 70) { return } else { return item } })
var immunityLow = itemArrImmunity.map((item) => { if (item < 70) { return } else { return item } })


//渲染图标样式
option1 = {
    radar: [
        {
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.9)'
                }
            }
        },
        {
            indicator: [  //这里设置ID是每一项名称，及百分制
                { text: 'DHA', max: 100 }, { text: 'γ-氨基丁酸', max: 100 }, { text: '铁', max: 100 }, { text: '维生素B12', max: 100 }, { text: '锌', max: 100 }, { text: '叶酸', max: 100 }
            ],
            nameGap: 6,
            center: ['50%', '50%'],
            radius: 105,
            name: {
                textStyle: {
                    color: '#AAB8C6',
                    fontSize: 11,
                    fontWeight: 300,
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['none',
                        'none', 'none',
                        'none', 'none'],
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cde6f5'
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#cde6f5'
                },
            }
        }
    ],
    series: [
        {
            type: 'radar',
            radarIndex: 1,
            legend: {
                orient: 'vertical',
                selectedMode: false,
            },
            data: [
                {
                    value: itemArrIntelligence,
                    symbolSize: 7,
                    lineStyle: {
                        width: 2,
                        color: '#29B8FF'
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.75,
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                {
                                    color: '#27B7FF',
                                    offset: 0
                                },
                                {
                                    color: '#5AD1FF',
                                    offset: .4
                                }
                            ])
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: '#2CBAFF',
                    // show:false
                }
            },
            silent: true,
            z: 1
        },
        {
            type: 'radar',
            radarIndex: 1,
            data: [
                {
                    value: intelligenceNormal,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FE7979'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            silent: true,
            z: intelligenceLow[0] ? 2 : 3,
        },
        {
            type: 'radar',
            radarIndex: 1,
            z: intelligenceLow[0] ? 3 : 2,
            data: [
                {
                    value: intelligenceLow,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#2CBAFF'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            silent: true
        },
    ]
}

option2 = {
    radar: [
        {
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.9)'
                }
            }
        },
        {
            indicator: [  //这里设置ID是每一项名称，及百分制
                { text: '钙', max: 100 }, { text: '磷', max: 100 }, { text: '维生素D', max: 100 }, { text: '锌', max: 100 }
            ],
            nameGap: 6,
            center: ['50%', '50%'],
            radius: 105,
            name: {
                textStyle: {
                    color: '#AAB8C6',
                    fontSize: 11,
                    fontWeight: 300,
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['none',
                        'none', 'none',
                        'none', 'none'],
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cde6f5'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#cde6f5'
                }
            }
        }
    ],
    series: [
        {
            type: 'radar',
            radarIndex: 1,
            nodeClick: false,
            legend: {
                orient: 'vertical',
                selectedMode: false,
            },
            data: [
                {
                    value: itemArrBone,
                    symbolSize: 7,
                    lineStyle: {
                        width: 2,
                        color: '#29B8FF'
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.75,
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                {
                                    color: '#27B7FF',
                                    offset: 0
                                },
                                {
                                    color: '#5AD1FF',
                                    offset: .4
                                }
                            ])
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    // color: '#2CBAFF',
                    show: false
                }
            },
            silent: true,
            z: 1

        },
        {
            type: 'radar',
            radarIndex: 1,
            data: [
                {
                    value: boneNormal,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FE7979'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            silent: true,
            z: boneLow[0] ? 2 : 3,
        },
        {
            type: 'radar',
            radarIndex: 1,
            z: boneLow[0] ? 3 : 2,
            data: [
                {
                    value: boneLow,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#2CBAFF'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            silent: true
        },
    ]
}

option3 = {
    radar: [
        {
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.9)'
                }
            }
        },
        {
            indicator: [  //这里设置ID是每一项名称，及百分制
                { text: '铁', max: 100 }, { text: '维生素A', max: 100 }, { text: '维生素D', max: 100 }, { text: '锌', max: 100 }, { text: '叶酸', max: 100 }
            ],
            nameGap: 6,
            center: ['50%', '50%'],
            radius: 105,
            name: {
                textStyle: {
                    color: '#AAB8C6',
                    fontSize: 11,
                    fontWeight: 300
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['none',
                        'none', 'none',
                        'none', 'none'],
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cde6f5'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#cde6f5'
                }
            }
        }
    ],
    series: [
        {
            type: 'radar',
            radarIndex: 1,
            nodeClick: false,
            legend: {
                orient: 'vertical',
                selectedMode: false,
            },
            data: [
                {
                    value: itemArrImmunity,
                    symbolSize: 7,
                    lineStyle: {
                        width: 2,
                        color: '#29B8FF'
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.75,
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                {
                                    color: '#27B7FF',
                                    offset: 0
                                },
                                {
                                    color: '#5AD1FF',
                                    offset: .4
                                }
                            ])
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    show: false
                }
            },
            silent: true,
            z: 1

        },
        {
            type: 'radar',
            radarIndex: 1,
            data: [
                {
                    value: immunityNormal,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FE7979'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            silent: true,
            z: immunityLow[0] ? 2 : 3,
        },
        {
            type: 'radar',
            radarIndex: 1,
            z: immunityLow[0] ? 3 : 2,
            data: [
                {
                    value: immunityLow,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#2CBAFF'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            silent: true
        },
    ]
}
//渲染图表
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);

</script>

    预览地址

    相关文章

      网友评论

          本文标题：Echarts.js 根据数值自定义radar雷达图拐点颜色

          本文链接：https://www.haomeiwen.com/subject/uuvwjftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Echarts.js 根据数值自定义radar雷达图拐点颜色|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！