支撑矩形图echarts custom配置项内容和展示

虚化底部数据

      let barHeight = 40, barWidth = 40, barRadius = 4
let encode = {
            x: 'product',
            y: '2015'
        }
function renderLine (params, api) {
    console.debug(api.value('2017'))
    var xValue = api.value(encode.x);
    var highPoint = api.coord([xValue, api.value(encode.y)]);
    var lowPoint = api.coord([xValue, 0]);
    var style = api.style({
        stroke: api.visual('color'),
        fill: null
    });

    return {
            type: 'line',
            shape: {
                x1: lowPoint[0], y2: lowPoint[1],
                x2: highPoint[0], y1: highPoint[1] + barHeight
                
            },
            style: style
        };
}

function renderBar (params, api) {
            var yValue = api.value(encode.y);
            var start = api.coord([api.value(encode.x), yValue]);
            var style = api.style();
            return {
                type: 'rect',
                shape: {
                    x: start[0] - barWidth/2,
                    y: start[1],
                    width: barWidth,
                    height: barHeight,
                    r: barRadius
                },
                style: style
            };
        }
option = {
    backgroundColor: '#353236',
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: {
        type: 'category',
        boundaryGap: true
        
    },
    yAxis: {
        
    },
    series: [
        {
        name: 'height',
        type: 'custom',
        renderItem: renderBar,
        label: {
            show: true,
            position: 'top'
        },
        itemStyle: {
            color: '#F15A29'
        },
        encode
    },
        {
            show: false,
            type: 'custom',
            name: 'custom',
            itemStyle: {
                color: '#27AAE1',
                borderType: 'dashed',
                borderWidth: 1.5
            },
            renderItem: renderLine,
            encode,
            z: 100
        }
    ]
};