3D曲面图 平滑处理

原数据

用一个二维数组表示曲面图数据，每条数据的i、j分别代表x,y,data[i][j]代表z

const data = [
  [0.67, 0.65, 0.69, 0.63, 0.66],
  [0.61, 0.62, 0.70, 0.60, 0.54],
  [0.64, 0.59, 0.56, 0.55, 0.60]
]

绘制效果

使用Echarts-gl绘制效果如下。

分析

可以看出，数据量较少，图形的拐点非常尖锐生硬，如何才能使图形更加的平滑呢？ 可以使用插值的方式，及在每两个数据直接插入n个数。

[
  [0.67, n1, n2,n3...., 0.65, n1, n2,n3...., 0.69, n1, n2,n3...., 0.63, n1, n2,n3...., 0.66],
  [n1,.......],
  [n2,.......],
  [n3,.......],
  ...
  [0.61, n1, n2,n3...., 0.62, n1, n2,n3...., 0.70, n1, n2,n3...., 0.60, n1, n2,n3...., 0.54],
  [n1,.......],
  [n2,.......],
  [n3,.......],
  ...
  [0.64, n1, n2,n3...., 0.59, n1, n2,n3...., 0.56, n1, n2,n3...., 0.55, n1, n2,n3...., 0.60]
]

但是，插入的时候又不能均匀插入，要使数据的变化更平滑，这里使用贝塞尔曲线方程计算插入的值。什么！不会贝塞尔曲线？没关系，直接引入amfe-cubicbezier

安装amfe-cubicbezier

npm i amfe-cubicbezier

使用

import { easeInOut } from 'amfe-cubicbezier'

amfe-cubicbezier提供了 generate, linear, ease, easeIn, easeOut, easeInOut三个方法，其中generate可自定义生成贝塞尔曲线，其他的是常用贝塞尔曲线。这里使用的是easeInOut(必定经过中点)

代码实现

import { easeInOut } from 'amfe-cubicbezier'

// 曲面图平滑处理
export function toSmooth(arr) {
  // 纵向插值
  const res = []
  for (let i = 0; i < arr.length; i++) {
    const row = arr[i]
    res.push(row)
    if (i !== arr.length - 1) {
      res.push(...getVal10Arr(row, arr[i + 1]))
    }
  }
  // 横向插值
  const hArr = []
  for (let i = 0; i < res.length; i++) {
    const row = []
    for (let j = 0; j < res[i].length; j++) {
      row.push(res[i][j])
      if (j !== res[i].length - 1) {
        row.push(...getVal10(res[i][j], res[i][j + 1]))
      }
    }
    hArr.push(row)
  }
  return hArr
}
// 在min,max直接插入9个值
function getVal10(min, max) {
  const step = max - min
  const res = []
  for (let i = 1; i < 10; i++) {
    const v = min + step * easeInOut(i / 10)
    res.push(v)
  }
  return res
}
// 在两个数组直接插入9个数组
function getVal10Arr(minArr, maxArr) {
  const res = []
  for (let i = 0; i < minArr.length; i++) {
    const min = minArr[i]
    const max = maxArr[i]
    console.log(min, max, i)
    res.push(getVal10(min, max))
  }
  // 数组旋转
  return res[0].map((_, i) => res.map(row => row[i]))
}

在vue中使用

// 引入上面的toSmooth方法
import { toSmooth } from './utils'
this.chart = this.$echarts.init(this.$refs.chart, 'light')

// 预览图表 假数据
const data = [
  [0.67, 0.65, 0.69, 0.63, 0.66],
  [0.61, 0.62, 0.70, 0.60, 0.54],
  [0.64, 0.59, 0.56, 0.55, 0.60]
]
const smoothData = toSmooth(data)
this.chart.setOption({
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' },
  grid3D: {},
  series: [
    {
      equation: {
        x: { min: 0, max: 2, step: 0.1 },
        y: { min: 0, max: 4, step: 0.1 },
        z: (x, y) => {
          return smoothData[Math.round(x / 0.1)][Math.round(y / 0.1)]
        }
      },
      type: 'surface'
    }
  ]
})

插值处理后效果

插值后的数据

[
  [0.67,0.669605551054723,0.6683668035590168,0.6662520821768418,0.6633623226055922,0.66,0.6566376773944078,0.6537479178231582,0.6516331964409833,0.6503944489452771,0.65,0.6507888978905543,0.6532663928819665,0.6574958356463164,0.6632753547888157,0.6699999999999999,0.6767246452111843,0.6825041643536836,0.6867336071180334,0.6892111021094457,0.69,0.6888166531641686,0.6851004106770502,0.6787562465305254,0.6700869678167765,0.6599999999999999,0.6499130321832235,0.6412437534694746,0.6348995893229498,0.6311833468358313,0.63,0.6305916734179157,0.6324497946614749,0.6356218767347372,0.6399565160916117,0.645,0.6500434839083883,0.6543781232652628,0.6575502053385252,0.6594083265820844,0.66], 
  [0.6688166531641687,0.6684338734666738,0.6672317726692036,0.6651796125084353,0.6623753426333094,0.6591124898731265,0.6558496371129436,0.6530453672378178,0.6509932070770494,0.6497911062795793,0.6494083265820844,0.6502127834696816,0.6527391407254085,0.6570519984516338,0.6629455038556314,0.6698027755273614,0.6766600471990915,0.6825535526030891,0.6868664103293144,0.6893927675850413,0.6901972244726385,0.6889983186397641,0.6852332138883311,0.6788056347799309,0.6700223698046837,0.6598027755273614,0.6495831812500392,0.6407999162747919,0.6343723371663917,0.6306072324149588,0.6294083265820843,0.6299649922566533,0.6317131734055046,0.6346975718145473,0.6387757420830504,0.6435208164552109,0.6482658908273713,0.6523440610958744,0.6553284595049171,0.6570766406537685,0.6576333063283374],
  [0.6651004106770502,0.6647542776777913,0.6636672640321799,0.6618115743076329,0.659275780614913,0.6563253080077877,0.6533748354006623,0.6508390417079424,0.6489833519833954,0.647896338337784,0.6475502053385251,0.648403524490437,0.6510833312819757,0.6556581495898295,0.661909623237035,0.6691834017795084,0.6764571803219818,0.6827086539691872,0.687283472277041,0.6899632790685797,0.6908165982204916,0.6895688301233026,0.6856502758360578,0.678960736146029,0.6698195029275739,0.6591834017795084,0.6485473006314428,0.6394060674129877,0.6327165277229589,0.6287979734357141,0.6275502053385251,0.6279969309183862,0.6293998506116609,0.6317948377120395,0.6350675794333249,0.6388755133463128,0.6426834472593006,0.645956188980586,0.6483511760809646,0.6497540957742394,0.6502008213541004],
  [0.6587562465305254,0.6584726747526731,0.6575821315432832,0.6560618453080532,0.6539843793419333,0.6515671848978941,0.6491499904538549,0.6470725244877349,0.6455522382525051,0.6446616950431151,0.6443781232652628,0.64531485737905,0.6482566247522172,0.6532786477124938,0.6601412249951659,0.6681260410884209,0.6761108571816759,0.682973434464348,0.6879954574246245,0.6909372247977917,0.691873958911579,0.6905427758525147,0.6863622609836412,0.6792255166411898,0.669473179787268,0.6581260410884209,0.6467789023895738,0.637026565535652,0.6298898211932005,0.6257093063243271,0.6243781232652628,0.6246371651809042,0.6254506735655148,0.6268394501979421,0.6287372087394276,0.6309453081631569,0.6331534075868861,0.6350511661283716,0.636439942760799,0.6372534511454095,0.637512493061051],
  [0.6500869678167766,0.649888885735048,0.6492668187080639,0.648204860199434,0.6467536975117861,0.6450652258625824,0.6433767542133787,0.6419255915257308,0.6408636330171009,0.6402415659901168,0.6400434839083883,0.6410942042836739,0.644393939900049,0.6500270664957921,0.6577247148164272,0.6666811613027961,0.6756376077891649,0.6833352561098001,0.6889683827055432,0.6922681183219183,0.6933188386972039,0.6918736693766412,0.6873351862645599,0.6795873382866419,0.6689999303947571,0.6566811613027961,0.644362392210835,0.6337749843189503,0.6260271363410322,0.621488653228951,0.6200434839083883,0.6200460567356583,0.6200541365730512,0.6200679300256786,0.6200867787317477,0.6201087097709707,0.6201306408101936,0.6201494895162627,0.6201632829688901,0.620171362806283,0.620173935633553],
  [0.64,0.6399013877636808,0.6395917008897541,0.6390630205442105,0.6383405806513981,0.6375,0.6366594193486019,0.6359369794557895,0.6354082991102459,0.6350986122363192,0.635,0.6361833468358313,0.6398995893229498,0.6462437534694746,0.6549130321832235,0.665,0.6750869678167765,0.6837562465305254,0.6901004106770502,0.6938166531641686,0.695,0.6934222042188914,0.6884672142360668,0.6800083287073673,0.6684492904223686,0.655,0.6415507095776314,0.6299916712926328,0.621532785763933,0.6165777957811084,0.615,0.6147041632910422,0.6137751026692625,0.6121890616326313,0.6100217419541941,0.6075,0.604978258045806,0.6028109383673688,0.6012248973307376,0.6002958367089579,0.6000000000000001],
  [0.6299130321832235,0.6299138897923134,0.6299165830714445,0.629921180888987,0.62992746379101,0.6299347741374176,0.6299420844838253,0.6299483673858483,0.6299529652033907,0.6299556584825218,0.6299565160916117,0.6312724893879887,0.6354052387458506,0.642460440443157,0.6521013495500197,0.6633188386972039,0.674536327844388,0.6841772369512508,0.6912324386485571,0.695365188006419,0.696681161302796,0.6949707390611418,0.6895992422075738,0.6804293191280926,0.6678986504499801,0.6533188386972039,0.6387390269444276,0.6262083582663152,0.6170384351868339,0.6116669383332659,0.6099565160916117,0.609362269846426,0.6074960687654739,0.6043101932395841,0.5999567051766406,0.5948912902290293,0.5898258752814182,0.5854723872184746,0.5822865116925848,0.5804203106116327,0.579826064366447],
  [0.6212437534694746,0.6213301007746884,0.6216012702362252,0.6220641957803676,0.6226967819608629,0.6234328151021059,0.624168848243349,0.6248014344238442,0.6252643599679866,0.6255355294295234,0.6256218767347372,0.6270518362926126,0.6315425538936823,0.6392088592264553,0.6496848393712811,0.6618739589115791,0.6740630784518771,0.6845390585967028,0.6922053639294758,0.6966960815305455,0.6981260410884209,0.6963016325852683,0.6905721674884925,0.6807911407735446,0.6674254010574693,0.6518739589115791,0.6363225167656889,0.6229567770496135,0.6131757503346655,0.6074462852378898,0.6056218767347372,0.6047711614011801,0.6020995317730103,0.5975386730673207,0.5913062751689606,0.5840546918368432,0.5768031085047256,0.5705707106063657,0.566009851900676,0.5633382222725062,0.5624875069389491],
  [0.6148995893229497,0.61504849784957,0.6155161377473284,0.6163144667807878,0.617405380687883,0.6186746919922124,0.6199440032965416,0.6210349172036368,0.6218332462370962,0.6223008861348546,0.6224497946614749,0.6239631691812257,0.6287158473639239,0.6368293573491196,0.647916441129412,0.6608165982204917,0.6737167553115712,0.6848038390918636,0.6929173490770593,0.6976700272597575,0.6991834017795083,0.6972755783144804,0.691284152636076,0.6810559212687054,0.6670790779171634,0.6508165982204916,0.6345541185238198,0.6205772751722778,0.6103490438049072,0.6043576181265028,0.6024497946614749,0.6014113956636982,0.5981503547268642,0.5925832855532233,0.5849759044750633,0.5761244866536872,0.5672730688323112,0.5596656877541513,0.5540986185805103,0.5508375776436764,0.5497991786458997],
  [0.6111833468358313,0.6113689020606876,0.6119516291103048,0.6129464285799856,0.6143058186694866,0.6158875101268735,0.6174692015842603,0.6188285916737614,0.6198233911434422,0.6204061181930594,0.6205916734179157,0.6221539102019811,0.6270600379204911,0.6354355084873153,0.6468805605108155,0.6601972244726385,0.6735138884344615,0.6849589404579617,0.6933344110247859,0.698240538743296,0.6998027755273614,0.6978460897980189,0.6917012145838026,0.6812110226348035,0.6668762110400536,0.6501972244726385,0.6335182379052234,0.6191834263104735,0.6086932343614744,0.6025483591472581,0.6005916734179156,0.5994433343254311,0.5958370319330205,0.5896805514507153,0.5812677418253378,0.5714791835447892,0.5616906252642405,0.5532778156388629,0.5471213351565578,0.5435150327641473,0.5423666936716627],
  [0.61,0.6101972244726386,0.6108165982204916,0.611873958911579,0.6133188386972039,0.615,0.616681161302796,0.618126041088421,0.6191834017795084,0.6198027755273614,0.62,0.6215777957811085,0.6265327857639331,0.6349916712926327,0.6465507095776314,0.6599999999999999,0.6734492904223686,0.6850083287073672,0.6934672142360669,0.6984222042188916,0.7,0.6980277552736144,0.6918340177950836,0.6812604108842091,0.6668116130279608,0.6499999999999999,0.6331883869720392,0.6187395891157909,0.6081659822049164,0.6019722447263856,0.6,0.5988166531641687,0.5951004106770502,0.5887562465305254,0.5800869678167765,0.5700000000000001,0.5599130321832235,0.5512437534694746,0.5448995893229498,0.5411833468358314,0.54],
  [0.6105916734179156,0.6107655593949897,0.6113116397463708,0.6122438779946452,0.6135177783880225,0.615,0.6164822216119775,0.6177561220053548,0.6186883602536292,0.6192344406050103,0.6194083265820843,0.6209433351213245,0.625763953877284,0.6339934482608263,0.6452390243267043,0.6583235919825723,0.6714081596384401,0.6826537357043182,0.6908832300878606,0.69570384884382,0.6972388573830601,0.6953016204000214,0.6892178230161984,0.6788318997695435,0.6646395710016666,0.6481263675099337,0.6316131640182008,0.6174208352503239,0.6070349120036689,0.600951114619846,0.5990138776368072,0.5978733180428443,0.5942914467825909,0.5881766737812234,0.579820857286595,0.5700986122363193,0.5603763671860436,0.5520205506914152,0.5459057776900477,0.5423239064297943,0.5411833468358314],
  [0.6124497946614749,0.612550387242077,0.6128662932897404,0.613405590665572,0.6141425386941375,0.615,0.6158574613058625,0.616594409334428,0.6171337067102596,0.617449612757923,0.6175502053385251,0.6189508426509002,0.623349475183377,0.6308585779674409,0.6411197413644975,0.653058915125821,0.6649980888871447,0.6752592522842013,0.6827683550682652,0.687166987600742,0.6885676249131171,0.6867403280247861,0.6810017920965398,0.6712052801585491,0.6578183799378898,0.6422423169053295,0.6266662538727691,0.6132793536521098,0.603482841714119,0.5977443057858728,0.5959170088975418,0.594910820530444,0.5917509354936732,0.5863565540917842,0.5789851502659774,0.5704082991102458,0.5618314479545142,0.5544600441287074,0.5490656627268184,0.5459057776900477,0.5448995893229498],
  [0.6156218767347372,0.6155973468725263,0.6155203120477469,0.6153888024449443,0.6152090950203098,0.615,0.6147909049796901,0.6146111975550557,0.614479687952253,0.6144026531274737,0.6143781232652628,0.6155493694324804,0.6192276103654789,0.6255069003553801,0.6340875287549034,0.6440713492515777,0.6540551697482521,0.6626357981477753,0.6689150881376765,0.672593329070675,0.6737645752378927,0.6721249620137814,0.6669758373941993,0.6581855359241597,0.6461736188833005,0.6321973903399987,0.6182211617966967,0.6062092447558374,0.5974189432857979,0.5922698186662159,0.5906302054421045,0.589853408220164,0.5874139147828716,0.5832493461751453,0.5775584773468717,0.5709369794557896,0.5643154815647075,0.5586246127364338,0.5544600441287075,0.5520205506914152,0.5512437534694746],
  [0.6199565160916117,0.6197610068371532,0.619147019647562,0.6180988545915596,0.6166665406099807,0.615,0.6133334593900193,0.6119011454084404,0.610852980352438,0.6102389931628468,0.6100434839083883,0.6109012678564854,0.6135950961206623,0.6181938511130303,0.6244780341581555,0.6317898710737666,0.6391017079893778,0.6453858910345031,0.649984646026871,0.652678474291048,0.6535362582391451,0.6521531141034052,0.6478094180310406,0.6403940997408011,0.6302610925353583,0.6184710323765628,0.6066809722177672,0.5965479650123244,0.5891326467220848,0.5847889506497204,0.5834058065139804,0.5829424715111604,0.5814873907426896,0.5790033571324966,0.575608933658621,0.571659419348602,0.567709905038583,0.5643154815647073,0.5618314479545143,0.5603763671860436,0.5599130321832235],
  [0.625,0.6246055510547229,0.6233668035590167,0.6212520821768418,0.6183623226055922,0.615,0.6116376773944078,0.6087479178231582,0.6066331964409832,0.605394448945277,0.605,0.6054930611815964,0.6070414955512291,0.6096848972789477,0.6132970967430098,0.6174999999999999,0.6217029032569902,0.6253151027210523,0.6279585044487709,0.6295069388184036,0.63,0.6289152654004879,0.625508709787296,0.6196932259863149,0.6117463871653784,0.6025,0.5932536128346215,0.585306774013685,0.579491290212704,0.576084734599512,0.575,0.5749013877636807,0.5745917008897542,0.5740630205442104,0.573340580651398,0.5725,0.571659419348602,0.5709369794557896,0.5704082991102458,0.5700986122363193,0.5700000000000001],
  [0.6300434839083883,0.6294500952722926,0.6275865874704714,0.624405309762124,0.6200581046012036,0.615,0.6099418953987964,0.6055946902378759,0.6024134125295286,0.6005499047277074,0.5999565160916117,0.6000848545067073,0.6004878949817959,0.6011759434448651,0.602116159327864,0.6032101289262333,0.6043040985246027,0.6052443144076015,0.6059323628706708,0.6063354033457593,0.6064637417608549,0.6056774166975708,0.6032080015435514,0.5989923522318289,0.5932316817953986,0.5865289676234373,0.5798262534514759,0.5740655830150456,0.5698499337033232,0.5673805185493037,0.5665941934860196,0.566860304016201,0.5676960110368187,0.5691226839559244,0.5710722276441752,0.573340580651398,0.5756089336586209,0.5775584773468717,0.5789851502659774,0.579820857286595,0.5800869678167765],
  [0.6343781232652628,0.6336137552369195,0.6312132950702866,0.6271153619087393,0.6215155501908745,0.615,0.6084844498091255,0.6028846380912607,0.5987867049297134,0.5963862447630804,0.5956218767347372,0.5954367529307123,0.5948553807369792,0.5938628942025154,0.5925066647311162,0.5909286507484223,0.5893506367657283,0.5879944072943292,0.5870019207598653,0.5864205485661322,0.5862354247621073,0.5857055687871945,0.5840415821803927,0.5812009160484702,0.5773191554474565,0.5728026096600014,0.5682860638725463,0.5644043032715326,0.56156363713961,0.5598996505328083,0.5593697945578955,0.5599493673071975,0.5617694869966368,0.5648766949132755,0.5691226839559244,0.5740630205442104,0.5790033571324965,0.5832493461751453,0.5863565540917841,0.5881766737812234,0.5887562465305254],
  [0.6375502053385251,0.6366607148673687,0.633867313828293,0.6290985736881116,0.6225821065170468,0.615,0.6074178934829532,0.6009014263118884,0.596132686171707,0.5933392851326312,0.5924497946614748,0.5920352797122926,0.5907335159190811,0.5885112165904545,0.5854744521215222,0.5819410848741788,0.5784077176268356,0.5753709531579033,0.5731486538292767,0.5718468900360651,0.5714323750868829,0.5710902027761897,0.5700156274780522,0.5681811718140809,0.565674394392867,0.5627576830946706,0.5598409717964741,0.5573341943752602,0.5554997387112889,0.5544251634131514,0.5540829911024582,0.5548919549969175,0.5574324662858352,0.5617694869966368,0.5676960110368188,0.5745917008897542,0.5814873907426896,0.5874139147828716,0.5917509354936732,0.5942914467825909,0.5951004106770502],
  [0.6394083265820844,0.6384455427144561,0.6354219673716626,0.6302602863590384,0.6232068668231618,0.615,0.6067931331768381,0.5997397136409616,0.5945780326283374,0.5915544572855439,0.5905916734179156,0.5900427872418683,0.5883190372251742,0.5853763462970691,0.5813551691593153,0.5766764080174278,0.5719976468755402,0.5679764697377864,0.5650337788096813,0.5633100287929872,0.5627611426169399,0.5625289104009545,0.5617995965583936,0.5605545522030865,0.5588532033290903,0.5568736324900663,0.5548940616510424,0.5531927127770462,0.551947668421739,0.5512183545791781,0.5509861223631928,0.5519294574845173,0.5548919549969175,0.5599493673071975,0.566860304016201,0.5749013877636807,0.5829424715111604,0.589853408220164,0.594910820530444,0.5978733180428442,0.5988166531641687],
  [0.64,0.6390138776368073,0.6359170088975419,0.6306302054421046,0.6234058065139804,0.615,0.6065941934860196,0.5993697945578954,0.5940829911024581,0.5909861223631927,0.59,0.5894083265820843,0.5875502053385251,0.5843781232652627,0.5800434839083882,0.575,0.5699565160916118,0.5656218767347373,0.5624497946614749,0.5605916734179157,0.56,0.5598027755273615,0.5591834017795084,0.558126041088421,0.5566811613027961,0.555,0.553318838697204,0.5518739589115791,0.5508165982204917,0.5501972244726386,0.55,0.5509861223631928,0.5540829911024582,0.5593697945578955,0.5665941934860196,0.575,0.5834058065139804,0.5906302054421045,0.5959170088975418,0.5990138776368072,0.6]
]