ECharts的三维可视化及在微信小程序中使用示例

在微信小程序中使用 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。