总结整理Echarts双y轴曲线图（全）
最近因为项目需要，用到了Echarts，自己学习了相关东西，也参考了一些文件，最终把双y轴曲线图实现了，跟大家分享一下。下面是最终需要的效果图：
不多说了，直接上代码！O(∩_∩)O哈哈~
-------------------------------------------------------------- HTML部分 ----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts双y轴图</title>
<script src="echarts.min.js"></script>
<style>
#chart{
width: 800px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="chart"></div>
</body>
</html>
-------------------------------------------------------------- JavaScript部分 ----------------------------------------------------------
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
let option = {
color : ['#28BBF4','#F89B73','#7778EF','#69C8C7'], //修改曲线颜色
title : {
x: 'center', //标题居中
text: '温压双y轴曲线图'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer: {
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
y: 'bottom', //图例说明(属性)在底部显示，不写默认在顶部显示
type: 'scroll', //图例说明(属性)过多时，设置为scroll，加上滚动翻页
data: ['温度','压力'], //属性类别
selectedMode:'multiple', //选中模式
// selectedMode: true/single/multiple, // 选中模式
selected:{ //初始默认后面一条数据不显示
'压力':false
}
},
toolbox: {
show : true,
orient: 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid:{
left: '8%', //y轴离左侧边框边距
right: '6%', //y轴离右侧边框边距
bottom: '12%', //x轴离底部边框边距
containLabel: true
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
type: 'slider', // slider表示有滑动块的，inside表示内置的
bottom:"5%",
start: 20, // 初始x轴位置在最右边
end: 60, // 初始x轴位置在最右边
borderColor:"transparent", // 滚动条边框颜色
height: 20
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2019-01-' + i);
}
return list;
}()
}
],
yAxis : [
{
type: 'value',
name:"温度 ℃",
// nameLocation:"center", //设置左右两侧y轴名称位置
// nameGap:35,
// nameRotate:0,
// nameTextStyle:{
// fontSize: 16,
// },
//默认以千分位显示，不想用的可以在这加一段
axisLabel : { //调整左侧Y轴刻度， 直接按对应数据显示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
},
{
type: 'value',
name:"压力 Mpa",
//默认以千分位显示，不想用的可以在这加一段
axisLabel : { //调整左侧Y轴刻度， 直接按对应数据显示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
}
],
series : [
{
name:'温度',
type:'line',
smooth: true,
yAxisIndex: 0, //属性，归属左侧y轴
data:function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 30));
}
return list;
}()
},
{
name:'压力',
type:'line',
smooth: true,
yAxisIndex: 1, //属性，归属右侧y轴
data:function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 10));
}
return list;
}()
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option, true); // 重新渲染曲线图
window.onresize = myChart.resize; // 图表随浏览器拉伸自动变化
</script>
这就是个人总结的，有什么不对的，大家可以提意见！(*￣︶￣)
总结整理Echarts双y轴曲线图（全）相关推荐
- echarts折线图y轴根据数值自动_Python matplotlib 绘制双Y轴曲线图的示例代码
双X轴的 可以理解为共享y轴 ax1=ax.twiny() ax1=plt.twiny() 双Y轴的 可以理解为共享x轴 ax1=ax.twinx() ax1=plt.twinx() 自动生成一个例子 ...
- origin如何绘制双y轴曲线_使用Origin软件绘制双y轴曲线图的过程
在平时数据处理过程中,常常需要做双Y轴的曲线图.Origin作为一款功能强大的绘图软件,可以轻松地作出漂亮的双y轴曲线图.那么具体的操作是怎样的呢?下面就和大家详细地分享一下利用Origin软件绘制双 ...
- 【科研绘图Origin】制作一个双Y轴曲线图
制作双Y轴曲线图 2022/04/29更新 最终效果图 1.导入数据 2.设置上轴 3.设置右轴 4.将曲线对应两个图层 5.修改图例 6.美化 坐标轴 曲线 图例 最终结果 2022/04/29更新 ...
- 实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致 原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
- echarts双Y轴（简单明了）
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致 图例分布显示 坐标轴刻度标签数值取整 X/Y轴名称的分布 坐标轴刻度标签数值以某一值 ...
- python绘制多条不同x轴曲线_Python matplotlib 绘制双Y轴曲线图的示例代码
Matplotlib简介 Matplotlib是非常强大的python画图工具 Matplotlib可以画图线图.散点图.等高线图.条形图.柱形图.3D图形.图形动画等. Matplotlib安装 p ...
- echarts双y轴实现（解决刻度线不对齐）
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
- ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
- Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) # ...
最新文章
- 带闰年判断的正则表达式
- 【单调栈 前缀和 异或】7.21序列求和
- R语言入门——ggplot2
- kotlin集合操作符——顺序操作符
- 构建强化学习_如何构建强化学习项目（第1部分）
- NTT Docomo研究主管Kazuaki OBANA：NTT DOCOMO NFV案例解析
- 超级终端软件测试工程师,超级终端是否可用来测试 RS485?
- Android功耗（8）---Camera功耗分析和拆解
- QT清空文件夹内所有文件
- centos6.5搭建vsftp服务器
- Python 获取父级文件夹的名字
- Grafana教程(prometheus 基本查询语法，alerting报警)
- linux系统交换分区的文件格式是,【简答题】Red Hat Linux中,交换分区的文件系统类型是什么,光盘文件的文件系统类型是什么?...
- c语言串口通信实验报告,单片机串口通信实验报告总结
- 植物大战僵尸辅助C/C++版
- 快速导出PDF文件中所有图片（使用Adobe Acrobat 10 ）
- java的枚举类型是什么_什么是枚举(java枚举类型enum用法)
- 跨部门的高效沟通与协作
- CSS 颜色与度量单位
- 嵌入式从业者应知应会知识点 - 索引