用echarts实现双y轴，并且实现指定数据使用y轴

参考链接：https://blog.csdn.net/qq_44827865/article/details/107000180

在使用echarts中，我们经常会用到双y轴去展示数据，有时候，我们可能需要自己去设置，具体使用某一个y轴去展示某一个具体的数据。

一、实现echarts双y轴

1、只有一个y轴时，yAxis为对象

yAxis: {type: 'value',name: 'y轴名称'
},

2、两个y轴时，yAxis为数组

yAxis : [{type: 'value',name:'左侧Y轴名称',min: 0,max: 5,interval: 1,splitNumber: 6, //设置坐标轴的分割段数
},
{type: 'value',name:'右侧Y轴名称',min: 0,max: 125,interval: 25,splitNumber: 6, //设置坐标轴的分割段数
}],

二、echarts双y轴左右刻度线一致

1、获取数据最大值与最小值

// 获取最大值方法
function calmax(arr) {var max = Math.max.apply(null, arr);  // 获取最大值方法var maxint = Math.ceil(max / 5);  // 向上以5的倍数取整var maxval = maxint * 5 + 5;  // 设置最大值return maxval;
}
// 获取最小值的方法
function calMin(arr) {var min = Math.min.apply(null, arr); // 获取最小值方法var minint = Math.floor(min / 1);  // 向下以1的倍数取整var minval = minint * 1 - 5;  // 最终设置的额最小值return minval;  // 输出最小值
}
// 调用方法获取数据的最大值/最小值
......

2、确定两侧坐标轴的分割段数

splitNumber: 6,

3、通过坐标轴的分割段数splitNumber计算坐标轴分割间隔interval

interval: (maxDatal - minDatal) / 6,

4、设置yAxisIndex

yAxisIndex: 1,  // 在单个图表实例中存在多个y轴的时候有用

三、图例分布显示

利用legend组件的top、bottom、left、right属性去配置

legend: [{top: "30%",right: "0%",data: [ {name: "数据1" } ]},{bottom: "20%",left: "0%",data: [ {name: "数据2"} ]}
],

四、坐标轴刻度标签数值取整

利用toFixed()方法，该方法可把 Number 四舍五入为指定小数位数的数字。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20。

axisLabel: {formatter: function(v) {return v.toFixed(2);  // 2表示小数为2位}
}

五、x/y轴名称的分布

根据文档x/y轴名称显示位置 nameLocation的值只能是：'start'、'middle' 或者'center'、'end'，没办法指定到某一位置，可以利用nameLocation.padding。

nameTextStyle: {padding: [上, 右, 下, 左]// 或 padding: [上下，左右]
}

六、坐标轴刻度标签数值以某一值为分界点改变颜色

利用axisLabel.color 属性

axisLabel: {color: function(value, index) {turn value >= 1000 ? "red" : "green";}
}

七、参考一段案例源码

<template><div class="home"><div id="wire"></div></div>
</template><script>
export default {name: "Home",data() {return {data1: [820, 932, 901, 934, 1290, 1330, 1320, 1330, 1340],data2: [134, 133, 132, 133, 129, 93, 90, 93, 82]};},mounted() {this.myChart = this.$echarts.init(document.getElementById("wire"));this.initData();},methods: {initData() {// 获取最大值方法function calMax(arr) {var max = Math.max.apply(null, arr); // 获取最大值方法var maxint = Math.ceil(max / 5); // 向上以5的倍数取整var maxval = maxint * 5 + 5; // 最终设置的最大值return maxval; // 输出最大值}// 获取最小值方法function calMin(arr) {var min = Math.min.apply(null, arr); // 获取最小值方法var minint = Math.floor(min / 1); // 向下以1的倍数取整var minval = minint * 1 - 5; // 最终设置的最小值return minval; // 输出最小值}// 调用方法，获取数据的最大值&最小值var maxData1 = calMax(this.data1);var maxData2 = calMax(this.data2);var minData1 = calMin(this.data1);var minData2 = calMin(this.data2);const option = {// 图例组件legend: [{top: "30%",right: "0%",textStyle: {fontSize: 12, //字体大小color: "#" //字体颜色（图例与图例文字配色保持一致）},data: [{name: "数据1"}]},{bottom: "20%",left: "0%",textStyle: {fontSize: 12, //字体大小color: "#" //字体颜色},data: [{name: "数据2"}]}],// 直角坐标系内绘图网格grid: {show: true,x: 120,y: 50,x2: 120,y2: 50},xAxis: {name: "X轴数据",type: "category",data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],nameTextStyle: {padding: [0, 0, 50, 50]}},yAxis: [{type: "value",name: "左侧",nameTextStyle: {padding: [0, 0, -55, -150]},min: minData1,max: maxData1,splitNumber: 6, //设置坐标轴的分割段数interval: (maxData1 - minData1) / 6, // 标轴分割间隔axisLabel: {formatter: function(v) {return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数},color: function(value, index) {return value >= 1000 ? "red" : "green";}}},{type: "value",name: "右侧",nameTextStyle: {padding: [0, 50, -50, 200]},min: minData2,max: maxData2,splitNumber: 6,interval: (maxData2 - minData2) / 6,axisLabel: {formatter: function(v) {return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数}}}],series: [{name: "数据1",type: "line",color: ["#eb9f0d"],symbol: "none",smooth: true,data: this.data1},{name: "数据2",type: "line",color: ["#969ac7"],symbol: "none",smooth: true,yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用data: this.data2}]};this.myChart.setOption(option);// 自适应布局let _this = this;window.addEventListener("resize", function(event) {_this.myChart.resize();});}}
};
</script><style lang="scss" scoped>
.home {width: 100%;height: 100%;display: flex;justify-content: center;#wire {width: 800px;height: 500px;border: 1px solid;}
}
</style>

14. echarts画双y轴相关推荐

echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示下载资源: 46 次 ...
python画双y轴图像
很多时候可能需要在一个图中画出多条函数图像,但是可能y轴的物理含义不一样,或是数值范围相差较大,此时就需要双y轴. matplotlib和seaborn都可以画双y轴图像.一个例子: import s ...
python画xy轴_python画双y轴图像的示例代码
很多时候可能需要在一个图中画出多条函数图像,但是可能y轴的物理含义不一样,或是数值范围相差较大,此时就需要双y轴. matplotlib和seaborn都可以画双y轴图像. 一个例子: import ...
origin中画双y轴
origin中画双y轴一 .导入数据二.操作步骤 1 选中数据,画图画点状图,连成线出现问题,选择双Y轴 2 设置左右Y轴数据 1. 在图的右侧建立新的Y轴,图 - 新图层(轴)- " ...
origin如何绘制双y轴曲线_origin怎么画双y轴看完恍然大悟
在平时数据处理过程中,常常需要做双Y轴的曲线图.Origin作为一款功能强大的绘图软件,可以轻松地作出漂亮的双y轴曲线图.那么具体的操作是怎样的呢?下面就和大家详细地分享一下利用Origin软件绘制双 ...
origin如何绘制双y轴曲线_origin怎样画双y轴看完恍然大悟
软件安装:装机软件必备包关于电脑装机必须的软件,比如windows office系列办公软件.网页浏览器.杀毒软件.安全防护软件.刻录软件.压缩软件.下载工具.多媒体播放软件.多媒体编辑软件.输入法 ...
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 ...

14. echarts画双y轴