echarts折线图双y轴用同一个网格
要在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属性可以设置图表的网格,包括顶部、底部、左侧和右侧的边距。你可以根据需要调整这些数值以满足你的需求
原文地址: https://www.cveoy.top/t/topic/iNJF 著作权归作者所有。请勿转载和采集!