要在Echarts中创建一个折线图,并使用双y轴,需要设置yAxisIndex属性来指定每个系列使用的y轴索引。然后,通过grid属性来设置图表的网格。

下面是一个示例代码:

// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 配置图表
var option = {
    grid: {
        top: 50,
        bottom: 80,
        left: 50,
        right: 50
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    },
    yAxis: [
        {
            type: 'value',
            name: 'y1',
            position: 'left',
        },
        {
            type: 'value',
            name: 'y2',
            position: 'right',
        }
    ],
    series: [
        {
            name: 'Series 1',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60],
            yAxisIndex: 0 // 使用第一个y轴
        },
        {
            name: 'Series 2',
            type: 'line',
            data: [100, 200, 300, 400, 500, 600],
            yAxisIndex: 1 // 使用第二个y轴
        }
    ]
};

// 渲染图表
myChart.setOption(option);

在上面的代码中,通过yAxis数组定义了两个y轴,分别指定了它们的位置和名称。然后,在每个系列的配置中,使用yAxisIndex属性指定该系列使用的y轴索引。

通过grid属性可以设置图表的网格,包括顶部、底部、左侧和右侧的边距。你可以根据需要调整这些数值以满足你的需求

echarts折线图双y轴用同一个网格

原文地址: https://www.cveoy.top/t/topic/iNJF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录