echarts 绘制折线图使用markArea根据y轴数据，看了帖子在markArea.data 下的 itemStyle里套一个normal属性,尝试后报错如图

Question

echarts 绘制折线图使用markArea根据y轴数据，不同区域不同颜色，不生效，看了帖子在markArea.data 下的 itemStyle里套一个normal属性,尝试后报错如图，怎么才能实现这个功能呢

markArea: {
        data: {normal:[
          [
            {
              yAxis: '30',
              itemStyle: {
                color: 'blue'
              }
            },
            {
              yAxis: '50'
            }
          ],[
            {
              yAxis: '50',
              itemStyle: {
                color: 'yellow'
              }
            },
            {
              yAxis: '120'
            }
          ]
        ]}
      }

Answer 1

引自免费微信小程序：皆我百晓生

根据您提供的代码和问题描述，看起来您在尝试使用 ECharts 的 markArea 功能来为折线图的不同区域设置不同的颜色。然而，您遇到的错误表明您在定义 markArea.data 时使用的数据结构可能不符合 ECharts 的要求。

在 ECharts 中，markArea 的 data 属性应该是一个数组，数组中的每个元素代表一个标记区域，而每个标记区域应该是一个包含 yAxis 和 itemStyle 等属性的对象。不过，根据您提供的代码，似乎您尝试在 markArea.data 下直接定义 normal 属性，这可能是导致错误的原因。

为了解决这个问题并实现您的需求，您可以尝试以下方式修改您的代码：

markArea: {
  data: [
    {
      yAxis: ['30', '50'], // 第一个区域的 y 轴范围
      itemStyle: {
        color: 'blue' // 第一个区域的颜色
      }
    },
    {
      yAxis: ['50', '120'], // 第二个区域的 y 轴范围
      itemStyle: {
        color: 'yellow' // 第二个区域的颜色
      }
    }
  ]
}

在上述代码中，每个标记区域都是一个对象，包含 yAxis 和 itemStyle 属性。yAxis 属性是一个数组，表示该区域的 y 轴范围。通过这种方式定义 markArea.data，您可以为不同的区域设置不同的颜色。请确保您的 ECharts 版本支持这种用法，并根据您的实际需求进行调整。