custom类别的图形 双Y轴位置异常

[EzioReturner]

One-line summary [问题简述]

当使用 type 为 'custom' 类别的图形时，
使用了双Y轴，同时series下有两个custom系列存在的情况下 第两个Y轴会重叠，且无法设置位置

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: v 4.0
• Browser version [浏览器类型和版本]: chrome
• OS Version [操作系统类型和版本]: mac

Expected behaviour [期望结果]

双Y轴一左一右显示

ECharts option [ECharts配置项]

var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];
var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];

data = echarts.util.map(data, function (item, index) {
    return {
        value: item,
        itemStyle: {
            normal: {
                color: colorList[index]
            }
        }
    };
});

function renderItem(params, api) {
    var yValue = api.value(2);
    var start = api.coord([api.value(0), yValue]);
    var size = api.size([api.value(1) - api.value(0), yValue]);
    var style = api.style();

    return {
        type: 'rect',
        shape: {
            x: start[0],
            y: start[1],
            width: size[0],
            height: size[1]
        },
        style: style
    };
}

option = {
    title: {
        text: 'Profit',
        left: 'center'
    },
    tooltip: {
    },
    xAxis: {
        scale: true
    },
    yAxis: [{
        name:'第一Y轴'
    },{name:'第二Y轴'}],
    series: [{
        type: 'custom',
        renderItem: renderItem,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        dimensions: ['from', 'to', 'profit'],
        encode: {
            x: [0, 1],
            y: 2,
            tooltip: [0, 1, 2],
            itemName: 3
        },
        data: data
    },{
        yAxisIndex: 1,
        type: 'custom',
        data: [1],
    }]
};

Other comments [其他信息]

[Ovilia]

你自己检查一下哪里写错了吧，下面的代码可以实现自定义系列双 Y 轴：

var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];
var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];

data = echarts.util.map(data, function (item, index) {
    return {
        value: item,
        itemStyle: {
            normal: {
                color: colorList[index]
            }
        }
    };
});

function renderItem(params, api) {
    var yValue = api.value(2);
    var start = api.coord([api.value(0), yValue]);
    var size = api.size([api.value(1) - api.value(0), yValue]);
    var style = api.style();

    return {
        type: 'rect',
        shape: {
            x: start[0],
            y: start[1],
            width: size[0],
            height: size[1]
        },
        style: style
    };
}

option = {
    title: {
        text: 'Profit',
        left: 'center'
    },
    tooltip: {
    },
    xAxis: {
        scale: true
    },
    yAxis: [{
        name: '1'
    }, {
        name: '2'
    }],
    series: [{
        type: 'custom',
        renderItem: renderItem,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        dimensions: ['from', 'to', 'profit'],
        encode: {
            x: [0, 1],
            y: 2,
            tooltip: [0, 1, 2],
            itemName: 3
        },
        data: data
    }, {
        type: 'custom',
        renderItem: renderItem,
        yAxisIndex: 1,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        dimensions: ['from', 'to', 'profit'],
        encode: {
            x: [0, 1],
            y: 2,
            tooltip: [0, 1, 2],
            itemName: 3
        },
        data: data
    }]
};

[EzioReturner]

font{ line-height: 1.6; } ul,ol{ padding-left: 20px; list-style-position: inside; } 您好，您给的代码中双Y轴必须在xAxis中配置了scale为true才能实现，但如果用户场景需要显示0刻度时不能配置scale:true，那么双Y轴无法正常显示，参考如下代码var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];data = echarts.util.map(data, function (item, index) {    return {        value: item,        itemStyle: {            normal: {                color: colorList[index]            }        }    };});function renderItem(params, api) {    var yValue = api.value(2);    var start = api.coord([api.value(0), yValue]);    var size = api.size([api.value(1) - api.value(0), yValue]);    var style = api.style();    return {        type: 'rect',        shape: {            x: start[0],            y: start[1],            width: size[0],            height: size[1]        },        style: style    };}option = {    title: {        text: 'Profit',        left: 'center'    },    tooltip: {    },    xAxis: {    },    yAxis: [{        name: '1'    }, {        name: '2'    }],    series: [{        type: 'custom',        renderItem: renderItem,        label: {            normal: {                show: true,                position: 'top'            }        },        dimensions: ['from', 'to', 'profit'],        encode: {            x: [0, 1],            y: 2,            tooltip: [0, 1, 2],            itemName: 3        },        data: data    }, {        type: 'custom',        renderItem: renderItem,        yAxisIndex: 1,        label: {            normal: {                show: true,                position: 'top'            }        },        dimensions: ['from', 'to', 'profit'],        encode: {            x: [0, 1],            y: 2,            tooltip: [0, 1, 2],            itemName: 3        },        data: data    }]}; a#ntes-pcmail-signature-default:hover { text-decoration: underline; color: #3593db; cursor: pointer; } ezioreturner [email protected] 签名由 网易邮箱大师 定制 在2018年08月30日 21:35，Wenli Zhang<[email protected]> 写道： 你自己检查一下哪里写错了吧，下面的代码可以实现自定义系列双 Y 轴： var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']]; var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b']; data = echarts.util.map(data, function (item, index) { return { value: item, itemStyle: { normal: { color: colorList[index] } } }; }); function renderItem(params, api) { var yValue = api.value(2); var start = api.coord([api.value(0), yValue]); var size = api.size([api.value(1) - api.value(0), yValue]); var style = api.style(); return { type: 'rect', shape: { x: start[0], y: start[1], width: size[0], height: size[1] }, style: style }; } option = { title: { text: 'Profit', left: 'center' }, tooltip: { }, xAxis: { scale: true }, yAxis: [{ name: '1' }, { name: '2' }], series: [{ type: 'custom', renderItem: renderItem, label: { normal: { show: true, position: 'top' } }, dimensions: ['from', 'to', 'profit'], encode: { x: [0, 1], y: 2, tooltip: [0, 1, 2], itemName: 3 }, data: data }, { type: 'custom', renderItem: renderItem, yAxisIndex: 1, label: { normal: { show: true, position: 'top' } }, dimensions: ['from', 'to', 'profit'], encode: { x: [0, 1], y: 2, tooltip: [0, 1, 2], itemName: 3 }, data: data }] }; —You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or mute the thread.