在微信小程序中使用 ECharts

關(guān)于微信小程序的項(xiàng)目創(chuàng)建。 創(chuàng)建項(xiàng)目后，可以用新項(xiàng)目完全替換weixin項(xiàng)目下載的電子商務(wù)/圖表，然后修改代碼；或者只需將ec畫(huà)布目錄復(fù)制到新項(xiàng)目，然后進(jìn)行相應(yīng)的調(diào)整。 如果采用完全替換的方法，則project.config json中的appid將替換為公共平臺(tái)上應(yīng)用的項(xiàng)目id。

pages目錄下的每個(gè)文件夾都是一個(gè)頁(yè)面?？梢愿鶕?jù)情況刪除不必要的頁(yè)面，然后單擊應(yīng)用程序刪除json中的相應(yīng)頁(yè)面。 如果只復(fù)制ec畫(huà)布目錄，則可以參考pages/bar目錄中多個(gè)文件的寫(xiě)入方法?，F(xiàn)在，讓我們?cè)敿?xì)解釋一下。

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

首先，在pages/bar目錄中創(chuàng)建以下文件：index.js、index。json、索引。wxml、索引。wxss在應(yīng)用程序中，“pages/bar/index”被添加到j(luò)son頁(yè)面中。 指數(shù)json配置如下：

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

此配置的功能是允許我們選擇在wxml中使用的pages/bar/index組件。請(qǐng)注意，路徑的相對(duì)位置應(yīng)正確寫(xiě)入。如果目錄結(jié)構(gòu)與本例中的目錄結(jié)構(gòu)相同，則應(yīng)按上述方式進(jìn)行配置。 指數(shù)在wxml中，我們創(chuàng)建了一個(gè)＜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
    }
  }
});

目前支持的內(nèi)容： 工具提示 相片 多個(gè)zlevel層 此外，還有一些bug尚未修復(fù)，其中一些需要小程序團(tuán)隊(duì)的在線支持，但不影響基本使用。已知錯(cuò)誤包括： Android平臺(tái)：轉(zhuǎn)換的問(wèn)題（它會(huì)影響關(guān)系圖兩端的標(biāo)記位置和日出圖的文本位置） IOS平臺(tái)：透明度稍深的問(wèn)題 IOS平臺(tái)：漸變顯示在定義區(qū)域之外

三維可視化

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

在介紹了ECharts和ECharts GL之后，我們將首先聲明一個(gè)基本的三維笛卡爾坐標(biāo)系，用于繪制常見(jiàn)的統(tǒng)計(jì)圖，如三維散點(diǎn)圖、直方圖和曲面圖。 在ECharts中，我們有一個(gè)網(wǎng)格組件來(lái)提供一個(gè)矩形區(qū)域來(lái)放置二維笛卡爾坐標(biāo)系，以及笛卡爾坐標(biāo)系上的x軸（xAxis）和y軸（yAxis）。對(duì)于三維笛卡爾坐標(biāo)系，我們?cè)贕L中提供網(wǎng)格3D組件來(lái)劃分三維笛卡爾空間，并將xAxis3D、yAxis3D、zAxis3D放置在網(wǎng)格3D上。

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

需要注意的是我們不能跟 grid 一樣省略 grid3D，默認(rèn)情況下, x, y, z 分別是從 0 到 1 的數(shù)值軸

在聲明了笛卡爾坐標(biāo)系之后，我們嘗試使用程序生成的正態(tài)分布數(shù)據(jù)在這個(gè)三維笛卡爾坐標(biāo)系中繪制散點(diǎn)圖。 以下代碼用于生成正常分布的數(shù)據(jù)。不必關(guān)心這段代碼是如何工作的，只需知道它生成了一個(gè)三維正態(tài)分布數(shù)據(jù)并將其放入數(shù)據(jù)數(shù)組中即可。

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);
}
// 創(chuàng)建一個(gè)高斯分布函數(shù)
var gaussian = makeGaussian(50, 0, 0, 20, 20);
var data = [];
for (var i = 0; i < 1000; i++) {
    // x, y 隨機(jī)分布
    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
    }]
}

得到如下結(jié)果：

默認(rèn)情況下，前三列（即收入、預(yù)期壽命和人口）將分別位于x、y和z軸上。 使用encode屬性，我們還可以將指定列的數(shù)據(jù)映射到指定的坐標(biāo)軸，從而節(jié)省大量繁瑣的數(shù)據(jù)轉(zhuǎn)換代碼。例如，如果我們將x軸替換為國(guó)家，將y軸替換為年份，將z軸替換為收入，我們可以看到不同國(guó)家在不同年份的人均收入分布。

當(dāng)然，除了visualMap組件，還可以使用其他ECharts內(nèi)置組件，并充分利用這些組件的交互效果，例如性別。還可以將此示例與3D散點(diǎn)圖和散點(diǎn)矩陣結(jié)合使用，以實(shí)現(xiàn)一系列2D和3D混搭。 在實(shí)現(xiàn)GL時(shí)，我們盡量減少WebGL和Canvas之間的差異，以便GL的使用更加方便和自然。 在笛卡爾坐標(biāo)系中顯示其他類型的三維圖表 除了散點(diǎn)圖，我們還可以使用GL在三維笛卡爾坐標(biāo)系上繪制其他類型的三維圖表。例如，在前面的示例中，將scatter3D類型更改為bar3D可以將其轉(zhuǎn)換為三維直方圖。

最后，我們經(jīng)常被問(wèn)到如何使用ECharts繪制只有二維數(shù)據(jù)的三維直方圖。總的來(lái)說(shuō)，我們不建議這樣做，因?yàn)檫@種不必要的三維直方圖很容易造成錯(cuò)誤的表達(dá)。有關(guān)詳細(xì)信息，請(qǐng)參閱直方圖指南中的說(shuō)明。 然而，如果有一些其他因素使得有必要繪制三維直方圖，也可以使用GL。

以上就是ECharts的三維可視化及在微信小程序中使用示例的詳細(xì)內(nèi)容，更多關(guān)于ECharts微信小程序三維可視化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論