位置: IT常识 - 正文

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

编辑:rootadmin
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的多个y轴(echarts右侧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);
本文链接地址:https://www.jiuchutong.com/zhishi/287079.html 转载请保留说明!

上一篇:腾达路由器桥接其他品牌路由器不兼容解决方法(腾达路由器桥接的方法)

下一篇:一头公牛站在皮库山前的田野中,亚速尔群岛皮科岛 (© Atmo-Sphere/Getty Images)(一头公牛和一头母牛,答五个字)

  • 残保金季报要填上年职工人数
  • 对公账户取现金怎么取
  • 销售农产品是否可以抵税
  • 5000以下固定资产怎么做账
  • 医院收费单能当凭证用吗
  • 支付宝公户可以转私户吗
  • 固定资产出售损失属于广义费用吗
  • 超市销售购物卡怎么开票
  • 供应商租赁企业资质要求
  • 企业如何运用内部招募
  • 城市维护建设税税率
  • 退休人员返聘工资交个人所得税标准
  • 商贸企业加工费票计入什么科目
  • 交强险和车船税必须一起交吗
  • 快递费税率为什么是9
  • 虚开增值税发票不能忽略的三个点!
  • 发放职工福利的会计科目
  • 预缴和实际应付的区别
  • 重分类不成功
  • 金蝶是先过账还是先审核
  • 库存商品出口退税的账务处理?
  • 房租税收怎么算?
  • 国内企业给国外企业开发票
  • 收到退回增值税和附加税怎么处理
  • 政府补贴专项资金使用要求
  • 学php的书
  • word无法创建工作环境
  • 商业企业低值易耗品科目核算的内容
  • 税务发票上的账户是对公账户吗
  • 我辞职了公积金怎么交
  • 世界上最早的数码相机
  • 进项税额准予抵扣的有哪些
  • 个人代开普票的个人经营所得税如何计算
  • 以前年度损益调整会计分录
  • thinkphp addons
  • 3d representation
  • 出口销售折扣怎么处理
  • 政府购买服务交几险
  • 超过离线开票限定时间怎么办
  • python中htmlparser解析html
  • vue+elementui
  • 应交增值税的计算要加已交税金还是扣除
  • 企业所得税会计利润总额计算公式
  • 新会计准则里的机械作业是什么
  • 所得税交多了怎么留抵
  • 注册资本在十年后怎么办
  • 公司支付款项制度
  • 红字更正法适用于更正什么样的错误
  • 发行股票会计怎么做分录
  • 增值税销项税额抵减账务处理
  • 什么是现金什么是现金流
  • 二手车没有发票能上牌吗
  • 个体户也需要纳税吗
  • 土地成本如何分摊
  • 公司增资怎么处理
  • 小规模纳税人每个季度超过了30万怎么办
  • 工人的工资占企业的比例
  • 报销需要发票吗?
  • 企业应如何正确经营
  • mysql安装配置教程5.7.25
  • linux 切文件
  • Win7如何取消电脑的屏幕保护
  • macbook取消弹出框阻止
  • win10系统设备管理器没有蓝牙
  • linux oracle 01034
  • win10红石版
  • win xp 内存
  • linux投屏快捷键
  • linux系统的服务器,重启之后运算速度变慢
  • Linux安装anaconda
  • 刨根问底造句
  • 浅谈自己对教育的理解
  • jquery操作表单
  • python中循环
  • jquery获取多个元素
  • 疯狂android讲义和第一行代码
  • javascript教程
  • 自然人扣缴端重置密码操作流程
  • 银行关联方认定标准是什么
  • 长沙市各个区的县市排名
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设