前言

Echarts是一款基于JavaScript的数据可视化库，支持各种图表类型，包括折线图（line chart）。要在Echarts中创建一个带有双Y轴的折线图，可以按照以下步骤进行操作：

效果图

一、引入Echarts库

引入Echarts库。在HTML文件中，使用<script>标签引入Echarts库的CDN链接或本地文件。例如：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>

二、创建一个实例

创建一个具有双Y轴的Echarts实例。在JavaScript文件中，使用echarts.init方法创建一个容器，并指定其宽度和高度。

var myChart = echarts.init(document.getElementById('chart-container'));

三、配置图表

配置图表的数据和样式。使用Echarts的配置项来定义图表的属性，包括图表类型、数据、轴等。对于双Y轴，需要定义两个Y轴，分别对应左侧和右侧。

var option = {
  xAxis: {
    type: 'category',
    data: ['数据点1', '数据点2', '数据点3', '数据点4', '数据点5']
  },
  yAxis: [
    {
      type: 'value',
      name: '左侧Y轴',
      position: 'left',
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '右侧Y轴',
      position: 'right',
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  series: [
    {
      name: '左侧Y轴数据',
      type: 'line',
      yAxisIndex: 0, // 使用第一个Y轴
      data: [10, 20, 30, 40, 50]
    },
    {
      name: '右侧Y轴数据',
      type: 'line',
      yAxisIndex: 1, // 使用第二个Y轴
      data: [100, 200, 300, 400, 10000]
    }
  ]
};

在这个配置项中，yAxis数组中定义了两个Y轴对象，分别对应左侧和右侧。series数组中定义了两个线图系列，通过yAxisIndex属性指定每个系列使用的Y轴。

四、渲染图表

渲染图表。通过调用Echarts实例的setOption方法，将配置项应用于图表，并渲染到页面上。

myChart.setOption(option);

这样就创建了一个带有双Y轴的折线图。你可以根据自己的需求，调整配置项中的数据和样式，以适应你的实际情况。记得在HTML文件中创建一个具有对应ID的容器，例如：

<div id="chart-container" style="width: 100%; height: 400px;"></div>

这个容器将用于显示Echarts图表。