echart画三维散点图根据范围给点设置不同颜色

这里有两种方式可供选择使用

第一种方式是使用visualMap视觉映射组件

let series = [];
let visualMap = [];
let pieces = [];
 
//可以添加多个对比范围
pieces.push({
    min: Number(-30),
    max: Number(30),
    color:'red'
});
pieces.push({
    min: Number(-30000),
    max: Number(-30),
    color:'orange'
});
 
visualMap.push({
    type: 'piecewise',
    show: false,
    // 设置的特定点颜色
    pieces: pieces
});
series.push({
    type: 'scatter3D',
    dimensions: ['x', 'y', 'z'], //悬浮到点时弹出的显示框信息
    data: this.all_points,
    symbolSize: 3, //点的大小
    itemStyle: {
        //点的默认颜色
        color: "#87f0e5",
   }
});
 
然后将 ``series`` 和 ``visualMap``这两个参数赋值给``option``就可以了
let option = {
   ......
 
   series: series,
   visualMap: visualMap,
}

第二种方式是通过itemStylecolor属性进行方法回调

itemStyle: {
    //点的颜色
    color: (params) =>{
        if (params.value[2] > -30 && params.value[2] < 30) {
            return 'green';
        } else {
            return 'rgb(255, 50, 50)';
        }
    }
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容