最近因为项目需要，用到了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>
这就是个人总结的，有什么不对的，大家可以提意见！(*￣︶￣)
注：之前版面查看不明显，程序员强迫症，修改版面重新发一版与大家分享！(▽)