ECharts的三維視覺化及在微信小程式中使用範例

2022-12-25 14:02:03

在微信小程式中使用 ECharts

關於微信小程式的專案建立。建立專案後，可以用新專案完全替換weixin專案下載的電子商務/圖表，然後修改程式碼；或者只需將ec畫布目錄複製到新專案，然後進行相應的調整。如果採用完全替換的方法，則project.config json中的appid將替換為公共平臺上應用的專案id。

pages目錄下的每個資料夾都是一個頁面。可以根據情況刪除不必要的頁面，然後單擊應用程式刪除json中的相應頁面。如果只複製ec畫布目錄，則可以參考pages/bar目錄中多個檔案的寫入方法。現在，讓我們詳細解釋一下。

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

首先，在pages/bar目錄中建立以下檔案：index.js、index。json、索引。wxml、索引。wxss在應用程式中，“pages/bar/index”被新增到json頁面中。指數json設定如下：

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

此設定的功能是允許我們選擇在wxml中使用的pages/bar/index元件。請注意，路徑的相對位置應正確寫入。如果目錄結構與本例中的目錄結構相同，則應按上述方式進行設定。指數在wxml中，我們建立了一個＜ec canvas＞元件

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

目前支援的內容：工具提示相片多個zlevel層此外，還有一些bug尚未修復，其中一些需要小程式團隊的線上支援，但不影響基本使用。已知錯誤包括： Android平臺：轉換的問題（它會影響關係圖兩端的標記位置和日出圖的文字位置） IOS平臺：透明度稍深的問題 IOS平臺：漸變顯示在定義區域之外

三維視覺化

<script src="lib/echarts.min.js"></script>
<script src="lib/echarts-gl.min.js"></script>

在介紹了ECharts和ECharts GL之後，我們將首先宣告一個基本的三維笛卡爾座標系，用於繪製常見的統計圖，如三維散點圖、直方圖和曲面圖。在ECharts中，我們有一個網格元件來提供一個矩形區域來放置二維笛卡爾座標系，以及笛卡爾座標系上的x軸（xAxis）和y軸（yAxis）。對於三維笛卡爾座標系，我們在GL中提供網格3D元件來劃分三維笛卡爾空間，並將xAxis3D、yAxis3D、zAxis3D放置在網格3D上。

var option = {
    grid3D: {},
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {}
}

需要注意的是我們不能跟 grid 一樣省略 grid3D，預設情況下, x, y, z 分別是從 0 到 1 的數值軸

在宣告了笛卡爾座標系之後，我們嘗試使用程式生成的正態分佈資料在這個三維笛卡爾座標系中繪製散點圖。以下程式碼用於生成正常分佈的資料。不必關心這段程式碼是如何工作的，只需知道它生成了一個三維正態分佈資料並將其放入資料陣列中即可。

function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
    return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {
        var exponent = -(
                ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))
                + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))
            );
        return amplitude * Math.pow(Math.E, exponent);
    }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);
}
// 建立一個高斯分佈函數
var gaussian = makeGaussian(50, 0, 0, 20, 20);
var data = [];
for (var i = 0; i < 1000; i++) {
    // x, y 隨機分佈
    var x = Math.random() * 100 - 50;
    var y = Math.random() * 100 - 50;
    var z = gaussian(x, y);
    data.push([x, y, z]);
}

option = {
    grid3D: {},
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: { max: 100 },
    series: [{
        type: 'scatter3D',
        data: data
    }]
}

得到如下結果：

預設情況下，前三列（即收入、預期壽命和人口）將分別位於x、y和z軸上。使用encode屬性，我們還可以將指定列的資料對映到指定的座標軸，從而節省大量繁瑣的資料轉換程式碼。例如，如果我們將x軸替換為國家，將y軸替換為年份，將z軸替換為收入，我們可以看到不同國家在不同年份的人均收入分佈。

當然，除了visualMap元件，還可以使用其他ECharts內建元件，並充分利用這些元件的互動效果，例如性別。還可以將此範例與3D散點圖和散點矩陣結合使用，以實現一系列2D和3D混搭。在實現GL時，我們儘量減少WebGL和Canvas之間的差異，以便GL的使用更加方便和自然。在笛卡爾座標系中顯示其他型別的三維圖表除了散點圖，我們還可以使用GL在三維笛卡爾座標系上繪製其他型別的三維圖表。例如，在前面的範例中，將scatter3D型別更改為bar3D可以將其轉換為三維直方圖。

最後，我們經常被問到如何使用ECharts繪製只有二維資料的三維直方圖。總的來說，我們不建議這樣做，因為這種不必要的三維直方圖很容易造成錯誤的表達。有關詳細資訊，請參閱直方圖指南中的說明。然而，如果有一些其他因素使得有必要繪製三維直方圖，也可以使用GL。

以上就是ECharts的三維視覺化及在微信小程式中使用範例的詳細內容，更多關於ECharts微信小程式三維視覺化的資料請關注it145.com其它相關文章！

ECharts的三維視覺化及在微信小程式中使用範例

目錄

在微信小程式中使用 ECharts

三維視覺化

熱門文章