echarts怎么设置双纵坐标并且可以缩放,自适应浏览器
在 ECharts 中设置双纵坐标(双Y轴)并且使其能够缩放,可以通过以下步骤实现:
- 设置双纵坐标:在 ECharts 的
option
配置对象中,使用yAxis
数组定义两个独立的yAxis
配置。 - 使图表支持缩放:启用图表的缩放功能,设置
dataZoom
属性。 - 自适应浏览器:通过监听浏览器窗口的大小变化,使用
resize
方法来更新图表的大小。
以下是一个简单的示例代码:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: [
{
type: 'value',
name: '左侧Y轴'
// 其他Y轴配置...
},
{
type: 'value',
name: '右侧Y轴',
position: 'right',
// 其他Y轴配置...
}
],
series: [
{
data: [120, 200, 150, 80, 70, 110],
type: 'bar',
yAxisIndex: 0
},
{
data: [180, 240, 120, 100, 90, 150],
type: 'line',
yAxisIndex: 1
}
],
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 自适应窗口大小
window.onresize = function() {
myChart.resize();
};
在这个例子中,我们定义了一个双纵坐标图表,其中包含一个条形图和一个线形图。两个Y轴都启用了内置的缩放功能,使图表可以通过鼠标滚轮或触摸屏的缩放手势进行缩放。最后,我们添加了一个监听器来确保图表在浏览器窗口大小改变时自适应显示。
评论已关闭