美文网首页什锦
echart画三维散点图根据范围给点设置不同颜色

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

作者: 为什么划船不靠桨 | 来源:发表于2023-07-14 13:56 被阅读0次

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

第一种方式是使用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)';
        }
    }
},

相关文章

  • Echart例子-笔录

    横向术状图(颜色根据条件) 横向柱状图(指定数据到坐标轴的映射) 多条数据散点图 Echart多饼图例子 1、先看...

  • R绘图基础指南 | 3. 散点图(合集)

    3. 散点图 目录 3. 散点图3.1 绘制基本散点图3.2 使用点形和颜色属性进行分组3.3 使用不同于默认设置...

  • echart 学习记录

    echart 学习记录 注意:echart的颜色 格式应为 '#xxx',不要设置‘rgb(x,x,x)’,应为r...

  • 代码库4-ggplot2代码

    将“ excel式”数据转换为“ggplot2式”数据 对UMAP横纵坐标进行简化 散点图设置图例颜色和大小范围 ...

  • Echarts地图自定义颜色

    通过visualMap设置,设置visualMap中的min最小值、max最大值、color颜色值,echart会...

  • webpack+echart某折点变色

    webpack+echart某折点变色 一、echart折线图某折点变色 二、现在我们已经成功设置了异常拐点的颜色...

  • R语言\Matlab\Mathematic三维图像

    R语言lattice包三维散点图 实现效果:不同starRating水平下,数据在log(reviewCount)...

  • 全网最深入 Android Style/Theme/Attr/S

    前言 回顾一下:自定义View的时候,根据不同条件设置不同颜色,那么需要提供对外的方法设置颜色。而View可以在x...

  • 全网最深入 Android Style/Theme/Attr/S

    前言 回顾一下:自定义View的时候,根据不同条件设置不同颜色,那么需要提供对外的方法设置颜色。而View可以在x...

  • MapBox加载自定义矢量切片

    加载底图 添加矢量切片数据源 添加图层 根据字段的不同设置不同的颜色

网友评论

    本文标题:echart画三维散点图根据范围给点设置不同颜色

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