首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >echarts实现多个y轴

echarts实现多个y轴

作者头像
算法与编程之美
发布2022-02-17 14:08:02
发布2022-02-17 14:08:02
2.2K0
举报

1 问题描述

在日常画图,如柱形图、折线图这些图表,需要两组或者两组以上不同的数据,且数据的大小有一定的差异时,通常是需要用两个y轴来体现的。

2 算法描述

若要更改y轴的个数,我们需要用到yAxisIndex,对其进行配置,而在这里的这个默认值为0,就是一条y轴,将yAxisIndex数值更改为1。

const trendChart= echarts.init(document.getElementById("trendChart"), "shine"); const trendChartOpt = { tooltip: { trigger: "axis", axisPointer: { type: "none" } }, legend: { left: "center", bottom: 3, itemWidth: 15, itemHeight: 10, textStyle: { fontSize: 12, color: "#b0c2f9" }, data: ["月人流量"] }, grid: { top: 40, bottom: 50, left: 60, right: 60 }, xAxis: { type: "category", axisLine: { lineStyle: {color: "#b0c2f9"} //x轴颜色 }, axisTick: {show: false}, axisLabel: { fontSize: 12, color: "#b0c2f9" //坐标颜色 } }, yAxis: { name: "人数(万人)", type: "value", splitNumber: 5, maxInterval: 5, minInterval: 5, interval: 5, axisLine: { lineStyle: {color: "#b0c2f9"} }, splitLine: {show: false}, axisTick: {color: "#b0c2f9"}, axisLabel: { fontSize: 12, color: "#b0c2f9" } }, visualMap: { show: false, seriesIndex: 2, dimension: 0, pieces: [{ lte: 9, color: "rgba(176, 58, 91, 1)" }, { gt: 9, lte: 11, color: "rgba(176, 58, 91, 0.5)" }] }, series: [{ name: "月人流量", type: "line", yAxisIndex: 0 //默认为0,给定多个y轴时使用1 }] };

3 结语

在使用echarts进行页面绘制时,可能会有因为一些较小的差异无法达到预想的效果,在制作页面之前,一定要充分了解其用法。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-01-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档