ECharts 自定义系列 profile 坐标转置

Posted 2023-04-20

参考技术A [TOC]

ECharts 自定义系列 profile - ECharts

希望将 ECharts 自定义系列官方提供的 profile 图表，横纵坐标进行转换。

encode 的作用是 映射 。

简单的说，就是从一个二维数组中，选择需要映射那几列数据到图表中。本例中，encode 从 data.value 中映射数据。

数据映射，有两层意思。

画布的尺寸是有限的，也是是随界面布局的变化，时时相对发生变化。

图形（柱状图，折线图，饼图等等）在画布上的比例（相对尺寸）是一定的，那么一个具体的数值，在展现在图形上时，就需要按照一定的比例进行映射。

以本例为例，

画布大概只有 400*600 px

x 轴，只有3个数据 （0，1，2）
y 轴，上的数据很多，是基于时间戳用随机数计算出来的(例如：1510975537362），科学计数法基本上都在 10e12 这个范围。

显然，不可能直接把数值 转化为像素，因此就需要知道 x 和 y 轴的 最大值 和
最小值 然后把每一个具体的值映射为屏幕中的像素值。

上面 encode 中，x 只选择 data.value 中的第一列，也就是范围 0-2；y 轴选择 data.value 中的第二、三列（即开始时间和结束时间范围）

在数值到画布坐标映射时，调用 api.coord([x, y]) 这个方法实现。本例中详见 series-custom.renderItem 的说明

本例中，data 是由 echarts.util.each(categories, function (category, index) 生成的。data 的完整结构如下：

xAxis 和 yAxis 的作用是绘制坐标轴。

在转置的时候，坐标轴需要配套转置。

renderItem 是数据映射过程中的关键，其作用好比 excel 中的数据透视表。不同的是，renderItem 需要把图形是什么样子的，定义清楚。

在本例中，我们需要对坐标轴进行转置，因此，在一开始的时候，修改了 series-custom.encode 中的映射行为。坐标轴对应的数据发生了修改，因此，在映射具体图形坐标的时候，需要配套修改。

这个方法用来获取一组坐标在画布中的坐标轴上对应的长度。这就好比获取地图比例尺的长度。返回值为一个数组，第一个元素对应x轴，第二个元素对应y轴

本例中，我们想知道转置以后，x轴一个单位的长度。

echarts自定义提示框数据

　　tooltip: {
　　　　trigger: "axis",
　　　　axisPointer: {
　　　　// 坐标轴指示器，坐标轴触发有效
　　　　type: "line" // 默认为直线，可选为：‘line‘ | ‘shadow‘
　　　　},
　　　　formatter: function(params) {
　　　　var texts = "";
　　　　for (var i = 0; i < params.length; i++) {
　　　　　　if (i == 0) {
　　　　　　　　texts += params[i].name + "<br>";
　　　　　　　　}
　　　　texts +=
　　　　params[i].seriesName + ": " + params[i].value + "<br>";
　　　　}
　　return texts;
　　}
}