2025年01月01日 建站教程
百度 Echarts 中实现雷达图根据分数点显示每个不同颜色,您可以使用 Echarts 的特殊数据项 special 来设置每个维度的数据。首先,您需要为每个分数点设置一个颜色值。这可以通过在 special 中使用 color 数据项来完成。
具体实例如下:
option = { radar: { indicator: [ { name: '维度1', max: 100 }, { name: '维度2', max: 100 }, { name: '维度3', max: 100 }, { name: '维度4', max: 100 }, { name: '维度5', max: 100 }, { name: '维度6', max: 100 } ] }, series: [{ type: 'radar', data: [ { value: [80, 50, 70, 40, 20, 90], name: '分数1', special: { color: '#FF0000' // 设置分数1的颜色为红色 } }, { value: [60, 80, 90, 30, 50, 70], name: '分数2', special: { color: '#00FF00' // 设置分数2的颜色为绿色 } }, { value: [40, 20, 60, 80, 30, 10], name: '分数3', special: { color: '#0000FF' // 设置分数3的颜色为蓝色 } } ] }] };
参考:根据分数自动调整颜色:
special: { color: function(params) { var index = params.dataIndex; var value = params.value; // 根据数据项的值和索引生成颜色 return 'linear-gradient(to right, #FFC107, #FF9800, #FF5722, #795548)'; } }
本文链接:http://so.lmcjl.com/news/20514/