多系列 bar 和 line 的组合 怎么做

Question

例如上图，单个系列，有百分比， 有区分, 尝试解决 发现 line位置一直不准？

const base64Rect = 'data:image/png;base64,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'
const imgDom = new Image();
imgDom.src = base64Rect;



var xAxisData = [
    'category0','category1',
    ];
var customData = [
      [0, 10, 20, 30, 40,
    //   30, 20, 11, 11, 10, 20, 30, 20, 11, 11
      ],
      [1, 10, 20, 30, 40, 
    //   30, 20, 11, 11, 10, 20, 30, 20, 11, 11
      ],
      [2, 10, 20, 30, 40, 
    //   30, 20, 11, 11, 10, 20, 30, 20, 11, 11
      ],
    ];
var legendData = [
     '2010',
     '2011',
     '2012',
     '2013',
     '2014',
    // '2015',
    // '2016',
    // '2017',
    // '2018',
    // '2019',
    // '2020',
    // '2021',
    // '2022',
    // '2023',
    // '2024',
    ];
var dataList = [
      [10, 10, 10],
      [20, 20, 10],
      [30, 30, 10],
      [40, 40, 10],
      [50, 50, 10],
    //   [11, 11],
    //   [11, 11],
    //   [10, 10],
    //   [20, 20],
    //   [30, 30],
    //   [20, 20],
    //   [11, 11],
    //   [11, 11],
    //   [20, 20],
    //   [30, 30],
    //   [20, 20],
    //   [20, 20],
    //   [30, 30],
    ];
var encodeY = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function renderItem(params, api) {
    // console.log('customData', customData)
    var xValue = api.value(0);
    var currentSeriesIndices = api.currentSeriesIndices();
    console.log('currentSeriesIndices', currentSeriesIndices)
    var barLayout = api.barLayout({
        barGap: '30%', 
        barWidth: 16,
        barCategoryGap: '20%',
        count: dataList.length * 2
    });
    // console.log('barLayout', barLayout)

    var points = [];
    for (var i = 0; i < currentSeriesIndices.length; i++) {
        var seriesIndex = currentSeriesIndices[i];
        if (seriesIndex !== params.seriesIndex) {
            // console.log('seriesIndex', seriesIndex)
            var point = api.coord([api.value(seriesIndex), xValue]);
            point[1] += barLayout[i - 1].offsetCenter + (dataList.length / 2.3) * (8 + 16);
            // point[0] += 10;
            points.push(point);
        }
    }
    // console.log('points', points)
    var style = api.style({
        stroke: api.visual('color'),
        fill: null
    });
    return {
        type: 'group',
        children:[
            {
                type: 'polyline',
                shape: {
                    points: points
                },
                itemStyle: {
                   borderCap: 'square'  
                },
                style
            },
        ].concat(points.map((item, index) => {
        return {
                 type: 'text',
                 style: {
                    fill: '#553200',
                    font: '14px',
                    text: `${api.value(index+1)}%`,
                    textAlign: 'right',
                    textVerticalAlign: 'center',
                    x: item[0],
                    y: item[1],
                 }
        }
    })),
    };
}

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: legendData
    },
    yAxis: {
        data: xAxisData
    },
    xAxis: {},
    series: [
        {
        type: 'custom',
        name: 'trend',
        renderItem: renderItem,
        itemStyle: {
            borderWidth: 2,
        },
        encode: {
            x: 0,
            y: encodeY
        },
        barWidth: 16,
        barGap: '30%',
        barCategoryGap: '20%',
        data: customData,
        z: 100
    }
    ].concat(dataList.map(function (data, index) {
        const itemStyle = index === 3 ?  {
              color: {
                image: imgDom,  
                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
              },
              borderColor: '#C29645'
            } :  {
              color: '#C29645',
              borderColor: '#C29645'
            }
        return {
            type: 'bar',
            animation: false,
            name: legendData[index],
            stack: legendData[index],
            itemStyle,
            barWidth: 16,
            barGap: '30%',
            barCategoryGap: '20%',
            data: index === 4 ? ['-', '-'] : data
        };
    })).concat(
        dataList.map(function (data, index) {
        return {
            type: 'bar',
            name: legendData[index],
            stack: legendData[index],
            itemStyle : {
                color: '#fff',
                borderColor: '#C29645'
            },
            label: {
              show: true,
              color: '#C29645',
              fontWeight: 400,
              fontSize: 14,
              formatter: '7%',
              position: 'right'
            },
            barGap: '30%',
            barWidth: 16,
            animation: false,
            data: data
        };
    })
    
    )
};

Answer 1

你可以用下 Charts4 的数据集看下
https://echarts.apache.org/ha...