代码：
 
%绘制双y图;
x=0:0.001:5;
figure('color',[1 1 1]);    %将背景设置为白色
[hAx,hLine1,hLine2]=plotyy(x,SRFlateral,x,Dy); %这里的SRFlateral,Dy是从simulink导出到workspace的变量
title('The numerical changes of SRFlateral and Dy','Fontsize',30,'Fontname', 'Times New Rome')
xlabel('Time unit: s','Fontsize', 30,'Fontname', 'Times New Rome');
ylabel(hAx(1),'SRFlateral','Fontsize',30, 'Fontname', 'Times New Rome');
ylabel(hAx(2),'Dy unit:m','Fontsize',30,'Fontname', 'Times New Rome');
box off;
set(hLine1,'linewidth',2);%设置第一条线的线宽
set(hLine2,'linewidth',2);
set(hAx,'FontName','Times New Roman')%设置x轴、左y轴、右y轴、标题的刻度字号和字型
 
绘制的图形如下：
 

本文主要实现echarts双Y轴，并在此过程中解决：
 
实现echarts双Y轴
echarts双Y轴左右刻度线一致
图例分布显示
坐标轴刻度标签数值取整
X/Y轴名称的分布
坐标轴刻度标签数值以某一值为分界点改变颜色
 
等问题
 
下方有源码！注意查收！
 
 
1、 实现echarts双Y轴
 
就一个Y轴时yAxis为对象
 
yAxis: {
  type: 'value',
  name:'Y轴名称'
 },
 
两个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, //设置坐标轴的分割段数
}],
 
2、 echarts双Y轴左右刻度线一致
 
参考文档：
 https://blog.csdn.net/qq_40845885/article/details/82108525
 https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7
 
2.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.2 确定两侧坐标轴的分割段数
 
splitNumber: 6,
 
2.3 通过坐标轴的分割段数 splitNumber 计算坐标轴分割间隔 interval
 
interval: (maxData1 - minData1) / 6,
 
2.4 设置yAxisIndex
 
yAxisIndex: 1,    //在单个图表实例中存在多个y轴的时候有用
 
3、图例分布显示
 
利用 legend 组件的top、bottom、left、right属性去配置
 
legend: [
  {
    top: "30%",
    right: "0%",
    data: [ {name: "数据1" } ]
  },
  {
    bottom: "20%",
    left: "0%",
    data: [ {name: "数据2"} ]
  }
],
 
4、坐标轴刻度标签数值取整
 
利用toFixed()方法，该方法可把 Number 四舍五入为指定小数位数的数字。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20。
 
axisLabel: {
   formatter: function(v) {
        return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
   }
 }
 
5、X/Y轴名称的分布
 
根据文档X/Y轴名称显示位置 nameLocation的值只能是：'start'、'middle' 或者'center'、'end'，没办法指定到某一位置，所以本人想到的方法就是利用nameLocation.padding。
 
nameTextStyle: {
  padding: [上, 右, 下, 左]
   // 或 padding: [上下，左右]
}
 
6、坐标轴刻度标签数值以某一值为分界点改变颜色
 
利用 axisLabel.color 属性
 
axisLabel: {
  color: function(value, index) {
      turn value >= 1000 ? "red" : "green";
  }
}
 
value >= 1000 ? "red" : "green";为三目运算符，意思是：如果数值大于等于 1000 那么数值颜色为红色，否则为绿色。如果将不想显示的数值改成同背景色一样的颜色，就可以实现隐藏（或空缺）的效果！！！
 
7、案例源码
 
<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>

Echarts 双y轴双折线图
 
js code
 
option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['温度', '湿度']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ['周一', '周二', '周三', '周四', '周五']
    },
      yAxis: [
                    {
                        type: 'value',
                        name: '℃',
                       //坐标轴最大值、最小值、强制设置数据的步长间隔
                        interval: 5,
                        axisLabel: {
                            //y轴上带的单位
                            formatter: '{value}'
                        },
                        //轴线
                        axisLine: {
                            show: true
                        },
                        //分割线
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: 'RH%',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        //轴线
                        axisLine: {
                            show: true
                        },
                        //分割线
                        splitLine: {
                            show: false
                        }
 
                    }
                ],
    series: [
       {
            name: '温度',
            type: 'line',
            yAxisIndex: 0,
            data: [10,23,30,50,50],
        }, {
            name: '湿度',
            type: 'line',
            yAxisIndex: 1,
            data: [15,10,20,25,30],
        }
    ]
};
 
结果
 

 
 
 
双y轴并列柱状图+折线图+数据表结合
 
 

  
1. 论文原图
  
2 数据准备
  
3 代码实现步骤拆解
  

   

    
3.1 导入第三方库
    
3.2 数据赋值
    
3.3 数据绘图
   
 
  
4 函数封装
 
 
 

 手动反爬虫： 
原博地址 https://blog.csdn.net/lys_828/article/details/114360425 
 
 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息
 
本文为付费内容，禁止转载
 
1. 论文原图
 

 这种图形研究了事故特征随着时间的变化，包含了数据的对比