ECharts 自定义系列 profile 坐标转置
最新回答
山城夏秋
2024-11-28 09:56:04
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轴一个单位的长度。
热门标签
