示例-风廓线echarts custom配置项内容和展示

配置项如下
      function getRandom (min, max, isInt) {
  isInt = isInt === false ? 0 : 1
  min = Math.random() * ( max - min + isInt) + min; // 节省一个变量
  return isInt ? Math.floor(min) : min
}




var dataByMonth = [
    // 第一列
    [0, 0],
    [0, 1],
    [0, 2],
    [0, 3],
    
    // 第二列
    [1, 0],
    [1, 0.5],
    [1, 1],
    [1, 1.5],
    [1, 2],
];

// x轴
var months = ['张三', '李四'];


function renderTrendItem(params, api) {
    const point = api.coord([api.value(0), api.value(1)]);
    point[0] -= 15 // x轴偏移量,根据svg宽度的一半调整
    point[1] -= 15 // y轴偏移量,根据svg高度的一半调整
    return {
        type: 'path',
        position: point,
        shape: {
            pathData: 'M377.80484 890.404372c-10.491803 0-18.985168-8.493365-18.985168-18.985168V330.441842L635.303669 136.893052c8.593286-5.995316 20.384075-3.896956 26.479313 4.696331s3.896956 20.384075-4.696331 26.479313L396.790008 350.226386v521.192818c0 10.491803-8.493365 18.985168-18.985168 18.985168z M391.993755 483.322404c-5.995316 0-11.790788-2.797814-15.4879-8.093676-5.995316-8.593286-3.996877-20.384075 4.596409-26.479313L522.591725 349.027322c8.593286-5.995316 20.384075-3.996877 26.479313 4.596409 5.995316 8.593286 3.996877 20.384075-4.596409 26.479313l-141.489461 99.722093c-3.397346 2.398126-7.294301 3.497268-10.991413 3.497267z',
            width: 30,
            height: 30
        },
        originX: 15, // X旋转中心点(宽度的一半)
        originY: 15, // Y旋转中心点(高度的一半)
        rotation: Math.PI / 180 * getRandom(0, 180), // 旋转角度,这里取的随机值
        style: {
            fill: 'red' // svg颜色
        }
    };
}



option = {
    tooltip: {
    },
    xAxis: {
        data: months
    },
    yAxis: {
        
    },
    series: [ {
        type: 'custom',
        name: '风廓线',
        renderItem: renderTrendItem,
        data: dataByMonth
    }]
};
    
截图如下