前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

echarts 雷达图遇到负值中心点偏移的设置

ECharts 雷达图可以使用series[i]-radar设置 ,雷达图主要用于表现多变量的数据,例如玩”和平精英”战况的各个属性分析,雷达图依赖radar组件。 关于雷达图其他的一些属性自行去查看官网,我们在这里讲的是在遇到负值的时候如何设置雷达图的中心点,通过官网的例子来设置的话,遇到负值无法找到中心位置,使得雷达图的内部图形发生变异。 下面我们就来说说如何设置,想要设置负值还需要从radar组件出发,radar组件下面有一个indicator属性, 它是雷达图的指示器,用来指定雷达图中的多个变量(维度)。 然后我们它的最大值radar.indicator[i].max和最小值radar.indicator[i].min设为统一的值,要注意它的这里的最大值要大于或等于你的数据的最大值,最小值要小于或等于你的数据的最小值 下面是用雷达图表现的示例。

See the Pen echarts 雷达图遇到负值中心点偏移的设置 by w3cbest.com (@w3cbest) on CodePen.

var max = 100, min = -50;
option = {

radar: {

indicator: [{
name: ‘销售’,
max: max,
min: min
},
{
name: ‘管理’,
max: max,
min: min
},
{
name: ‘技术’,
max: max,
min: min
}
],
},
series: [{

data: [{
value: [100, 80, -40]
}]
}]
};

坚持技术创作分享,您的支持将鼓励我继续创作!