echarts实现双y轴
我们在一个折线图中展示多个数据的时候,如果两个数据的数量级相差很大,会造成数量级低的数据折线图被压缩成一条很直的线,如下图:
解决办法是使用双y轴:
$scope.echart21 = {legend: {show: 'true',data: ['ns_csiqcs', 'ns_lbi', 'ns_cap', 'ns_spider'],right: 0},title: {// subtext: 'GB/日',left: 'center',top: '10px',text: 'nameSpace Top5',},tooltip: {trigger: 'axis'},xAxis: {axisLabel: {rotate: 45},type: 'category',name: '时间',boundaryGap: false,data: ["2017082812", "2017082813", "2017082814"],},yAxis: [{name: 'GB/日',type: 'value'}, {name: 'GB/日',type: 'value'}],series: [{name: 'ns_csiqcs',type: 'line',yAxisIndex: 1,data: [10, 23, 58],}, {name: 'ns_lbi',type: 'line',data: [644183, 945711, 965962],}, {name: 'ns_cap',type: 'line',data: [55096, 27366, 289103],}, {name: 'ns_spider',type: 'line',data: [153222, 121460, 363895],}],}
注意两个关键点:
yAxis: [{name: 'GB/日',type: 'value'}, {name: 'GB/日',type: 'value'}],
yAxis的值设置为数组,指定两个数轴
series: [{name: 'ns_csiqcs',type: 'line',yAxisIndex: 1,data: [10, 23, 58],}, {name: 'ns_lbi',type: 'line',data: [644183, 945711, 965962],}, {name: 'ns_cap',type: 'line',data: [55096, 27366, 289103],}, {name: 'ns_spider',type: 'line',data: [153222, 121460, 363895],}],
series中通过字段yAxisIndex来指定应用哪个y轴,计数从0开始。代码中ns_csiqcs的yAxisIndex指定了1,所以它应用第二个数轴。
结果如下:
明显可见,图2比图1更能直观地展示数据趋势。
欢迎留言交流,我的github:https://github.com/njueyupeng
echarts实现双y轴相关推荐
- echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示 下载资源: 46 次 ...
- 14. echarts画双y轴
用echarts实现双y轴,并且实现指定数据使用y轴 参考链接:https://blog.csdn.net/qq_44827865/article/details/107000180 在使用echar ...
- ECharts 示例——双Y轴
当前ECharts版本为5.1.2. 概述 按照对ECharts双Y轴图进行如下设置: 两个Y轴共用1个X轴. 数据系列:修改柱子和折线颜色 数据标签:修改字体大小.样式 数据组件:使用dataset ...
- ECharts 示例——双Y轴(一)
在使用echarts中,我们经常会用到双y轴去展示数据,有时候,我们可能需要自己去设置,具体使用某一个y轴去展示某一个具体的数据. 实现代码: option = {legend: {data: ['销 ...
- echarts实现双y轴,并且实现制定数据使用y轴
在使用echarts中,我们经常会用到双y轴去展示数据,有时候,我们可能需要自己去设置,具体使用某一个y轴去展示某一个具体的数据.需要的效果如下: 1.那么需要配置多y轴,如下: 2.然后,在seri ...
- echarts 刻度 双y轴_ECharts 解决双Y轴刻度不一致问题
若最大最小值固定,直接初始化设置option的yAxis的min和max属性值即可: 假设已知固定最大最小值为0和1. var option = { ... yAxis:[ { name: " ...
- echarts实现双Y轴之散点和折线图
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8&q ...
- 用echarts做双y轴折线图柱状图混合实时更新图
先上效果图: 具体细节不在一一道说了请看代码: 主要引了一个echart,.js 插件,剩下的就是前端代码了: 全程就只是纯前端的代码,没有后台服务,有需要的可自行研究: <!DOCTYPE h ...
- echarts中双y轴刻度线对齐的问题
splitNumber设置分割的段数,必须一致 设置的max一定是大于或等于数据最大值,计算找出数据中最大值向上取整 interval强制设置坐标轴分割间隔,控制两边刻度比例一样才能保持刻度线对齐 / ...
最新文章
- android 反编译报错,android反编译
- httpClient3.1 笔记
- C语言字符串左右排序交换
- chroot环境怎么重启linux,linux下简易chroot环境的塔建
- 【java】java 的网络地址类 InetSocketAddress
- 安装scrapy报错
- 映射网络驱动器 net use
- rancher的使用感受以及与k8s的对比
- kvm虚拟化学习笔记(五)之windows虚拟机性能调整
- Siemens M65...
- php爬虫框架使用案例QueryList,将数据爬到mysql数据库
- c语言获取windows路径,获取Windows/System/Temp目录路径
- Aggressive cows 基础二分
- [论文笔记|LIC-Fusion]LIC-Fusion: LiDAR-Inertial-Camera Odometry
- 微信公众号关键词自动回复大全
- 基于Open CV的植物图像分类识别项目
- 网络空间安全要学c语言吗,2019年硕士研究生入学考试网络空间安全学院专业课考研大纲...
- 制作CPA静默安装包和静默包软件捆绑方法
- React新生命周期--getDerivedStateFromProps、getSnapshotBeforeUpdate
- netstat 命令用法详解
热门文章
- Linux下删除文件时出现rm: cannot remove ‘***/.user.ini’: Operation not permitted
- js如何保留两位小数
- -----------------------------------SQL2005的安装问题汇总 --------------------------
- ES6语法——for...in..以及字符串新增操作
- android如何监听应用进入后台,回到前台时做相应逻辑
- 笔试——2019方正FPGA
- AirDisk产品S3和Q3C的区别
- mysql关系运算_数据库关系运算
- LaTeX中的分式及被分式压缩的数学符号
- 3套精品像素字体打包下载