echarts.js [series-custom]自定义系列中

官方文档地址：https://echarts.apache.org/zh/option.html#series-custom

源码地址：https://github.com/scrollHeart/echartsDemo

1.renderItem 函数使用：

let option = {
  series: [
    {
      name: 'test',
      type: 'custom',
      renderItem: (params, api) => {
         let categoryIndex = api.value(1);
         let start = api.coord([api.value(0), categoryIndex]);
         let end = api.coord([api.value(2), categoryIndex]);
         let rectShape = echarts.graphic.clipRectByRect(
               {
                  x: start[0],
                  y: start[1] - height/2,
                  width: end[0] - start[0],
                  height: height,
                },
                {
                   x: params.coordSys.x,
                   y: params.coordSys.y - height,
                   width: params.coordSys.width,
                   height: params.coordSys.height + height * 2,
                 }
          );
          if (rectShape) {
             rectShape.r = 10;
               return {
                   type: 'group',
                   children: [
                          {
                              type: 'rect',
                              shape: rectShape,
                              style: {
                                 fill: '#6C55ED',
                                 opacity: 0.5,
                              },
                              emphasis: {
                                  style: {
                                     opacity: 1,
                                  },
                               },
                          },
                      ],
                };
           }
      }
    }
  ],
...
}

2.dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

dataZoom: [
    {
       type: 'inside',
       end: 100,
       minValueSpan: 7,
       filterMode: 'none',
       maxValueSpan: 7,
       labelFormatter: () => '',
       yAxisIndex: [0],
    },
]

效果图：

custom.png