Echarts可视化 之custom自定义系列

 renderItem函数

开发者使用自定义的图形元素渲染，是通过 renderItem函数实现的。

series: [{
        type: 'custom',
        renderItem: function (params, api) {
            // ...
        },
        data: data
    }]

渲染data数组中的每一项数据时都会调用renderItem函数，而后函数就返回一个（或者一组）图形元素定义，echarts会根据这些图形元素定义渲染出图形元素。

若想要使用该函数直接绘制图形，则在函数内return 构建dataItem的图形元素定义。例如：

            // 这里返回为这个 dataItem 构建的图形元素定义。
            return rectShape && {
                // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                type: 'rect',
                shape: rectShape,
                // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了
                // option 中 itemStyle 的配置和视觉映射得到的颜色。
                style: api.style()
            };

但是,自定义还用echarts内置的属性还是有些限制啊！需要实现的效果并不是很随心(→_→)。

所以我们可以利用 renderItem 提供的参数api 获取到dataItem要显示的位置(及坐标[x，y]),将自定好的效果直接定位上，岂不是效果更随心些(←_→)

下面我们来看看renderItem为我们提供的两个参数：params、api

  params

该参数包含了当前数据信息和坐标系的信息。

actionType: null
context: {}
coordSys: {type: 'geo', x: 126, y: 18.35, width: 15038655.192776125, height: 7087856.39616931, …}
dataIndex: 0
dataIndexInside: 0
dataInsideLength: 1
encode: {lng: Array(1), lat: Array(1)}
seriesId: "\u0000自定义\u00000"
seriesIndex: 2  //在series数组内的索引
seriesName: "自定义"

api

是一些开发者可调用的方法集合。

 value ：得到给定维度的数据值。

coord:将数据值映射到坐标系上。

renderItem: (params, api) => {
            if (!this.customApi) {
              this.customApi = api
            }
          },
var coord = this.customApi.coord([dataItem.value, index])

（可通过全局属性将api方法集 提取出来，再自定义时调用获取坐标即可） 

获取到位置信息，即可将自定义效果定位到需求位置实现Echarts组件之外的效果。