echarts的多个y轴(echarts右侧y轴)

echarts的多个y轴

推荐整理分享echarts的多个y轴(echarts右侧y轴)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts设置y轴数值,echarts两个y轴,echart 多y轴,echarts三个y轴,echarts怎么设置y轴单位,echarts三个y轴,echart 多y轴,echart 多y轴,内容如对您有帮助，希望把文章链接给更多的朋友！

1.在 ECharts 的 option 中设置多个 Y 轴

在 ECharts 的 option 中，可以通过 yAxis 属性定义多个 Y 轴。需要为每个 Y 轴设置不同的名称、位置和相关样式等属性。例如：

在该代码中，我们定义了2个 Y 轴，其中“销售额”是左侧的 Y 轴，而“利润率”是右侧的 Y 轴。它们分别展示了销售额和利润率两个不同的数据指标，并可以使用 formatter 属性设置 Y 轴标签的格式化方式。

option = { yAxis: [ { name: "销售额", type: "value", position: "left", axisLabel: { formatter: "{value} 元" } }, { name: "利润率", type: "value", position: "right", axisLabel: { formatter: "{value}" } } ], ...}2.为不同的数据系列指定 Y 轴

在数据系列中，可以通过 yAxisIndex 属性将不同的数据系列与指定的 Y 轴关联起来。例如：

在该代码中，我们将“销售额”系列与左侧的 Y 轴（即第1个 Y 轴）关联起来，并将“利润率”系列与右侧的 Y 轴（即第2个 Y 轴）关联起来。因此，这两个系列将分别显示在不同的 Y 轴上，方便进行比较。

series: [ { name: "销售额", type: "line", yAxisIndex: 0, data: [20, 40, 60, 80, 100] }, { name: "利润率", type: "line", yAxisIndex: 1, data: [10, 20, 30, 40, 50] } ...]3.展示图表并调整样式

最后，需要将图表展示在页面上，并根据实际需求调整相关样式，如 Y 轴的颜色、粗细、网格线等等。例子代码如下：

在该代码中，我们为 Y 轴和网格线设置了样式，以及调整了左侧 Y 轴的位置和样式。可以根据实际需求进行调整。

option = { yAxis: [ { name: "销售额", type: "value", position: "left", axisLine: { lineStyle: { color: "#ccc", width: 2 } }, splitLine: { lineStyle: { color: "#f5f5f5" } } }, { name: "利润率", type: "value", position: "right", axisLine: { lineStyle: { color: "#ccc", width: 2 } }, splitLine: { lineStyle: { color: "#f5f5f5" } } } ], series: [ { name: "销售额", type: "line", yAxisIndex: 0, data: [20, 40, 60, 80, 100] }, { name: "利润率", type: "line", yAxisIndex: 1, data: [10, 20, 30, 40, 50] } ]};const chart = echarts.init(document.getElementById("chart-container"));chart.setOption(option);