echart，两条折线图，相交的区域显示颜色，实现代码

ECharts是一个流行的JavaScript数据可视化库，用于创建各种图表，包括折线图。要在ECharts中创建两条折线图，并让它们相交的部分显示特定颜色，可以按照以下步骤编写代码：

// 引入ECharts库
import echarts from 'echarts';

// 创建图表实例
const myChart = echarts.init(document.getElementById('main'));

// 给定数据
const data1 = [/* 数据点1... */];
const data2 = [/* 数据点2... */];
const intersectColor = '#ff0000'; // 相交部分的颜色

// 定义两个系列的数据
const seriesOptions = [
  {
    name: 'Series 1',
    type: 'line',
    data: data1,
    lineStyle: { // 设置折线样式
      color: 'blue', // 线条颜色
      areaStyle: { // 区域填充
        normal: { // 普通状态
          fillOpacity: 0.5, // 颜色透明度
        },
        emphasis: { // 加亮状态
          fillOpacity: 1, // 颜色完全填充
        }
      },
    }
  },
  {
    name: 'Series 2',
    type: 'line',
    data: data2,
    lineStyle: {
      color: 'red', // 红色折线
      // 当两条线相交时，覆盖蓝色区域并显示自定义颜色
      onEmphasis: function(params) {
        const x = params.value[0];
        const y1 = data1[x];
        const y2 = data2[x];

        if (y1 > y2) {
          this.parent.normal.areaStyle.fillOpacity = 0; // 关闭默认颜色
          this.style.fillOpacity = 1; // 显示自定义颜色
          this.style.color = intersectColor;
        } else {
          this.style.fillOpacity = 0;
        }
      }
    }
  }
];

// 设置图表配置
const option = {
  tooltip: {},
  legend: {},
  xAxis: {},
  yAxis: {},
  series: seriesOptions,
};

// 渲染图表
myChart.setOption(option);

在这个例子中，我们首先初始化了一个ECharts实例，然后定义了两条折线的数据和相交区域的颜色。`onEmphasis`函数会在红色折线经过蓝色折线区域时更改颜色和填充模式。记住替换`data1`和`data2`为实际的数据点。