echarts仅作个人临时笔记 stack属性防止堆叠颜色 symbol: ‘none‘取消折点圆圈

注意：如果将stack设为一致的名字虽然颜色不会堆叠，但面积会堆叠，例如第一层颜色某x轴点对应的y为10，第二次为20，则第二层面积高度应为10+20=30

option = {
  title: {
    text: 'Rainfall and Flow Relationship',
    left: 'center'
  },
  grid: {
    bottom: 80
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false,
      label: {
        backgroundColor: '#505765'
      }
    }
  },
  legend: {
    data: ['Flow', 'Rainfall'],
    left: 10
  },
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 20,
      end: 100
    }
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: false },
      // prettier-ignore
      data: [
        '2015','2016','2017','2018','2019','2020','2021'
            ].map(function (str) {
                return str.replace(' ', '\n');
            })
    }
  ],
  yAxis: [
    {
      name: 'Flow(m^3/s)',
      type: 'value',
    },
    {
      name: 'Rainfall(mm)',
      type: 'value'
    }
  ],
  series: [
    {
              symbol: 'none',  //取消折点圆圈

      name: 'Flow',
      type: 'line',
      lineStyle: {
        width: 3
      },
      emphasis: {
        focus: 'series'
      },

      // prettier-ignore
      data: [
        1,5,6,9,2,4,3
            ]
    },
    {
              symbol: 'none',  //取消折点圆圈

      name: 'Rainfall',
      type: 'line',
      yAxisIndex: 1,
      lineStyle: {
        width: 3
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: [
          8,2,1,3,5,6,3
            ]
    },
       {
                 symbol: 'none',  //取消折点圆圈
stack:'总量',

      name: 'Rainfall2',
      type: 'line',
      yAxisIndex: 1,
      areaStyle: {},
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: [
          1,1,1,1,1,1,1
            ],
            itemStyle: {
            color: '#3A84FF'
        },
        // 区域填充样式
        areaStyle: {
            color: 'white'
        }
    },
     {
               symbol: 'none',  //取消折点圆圈
               stack:'总量',

      name: 'Rainfall3',
      type: 'line',
      yAxisIndex: 1,
      areaStyle: {},
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: [
          3,3,3,3,3,3,3
            ],
            itemStyle: {
            color: 'green'
        },
        // 区域填充样式
        areaStyle: {
            color: 'blue'
        }
    },
      {
                symbol: 'none',  //取消折点圆圈
stack:'总量',
      name: 'Rainfall4',
      type: 'line',
      yAxisIndex: 1,
      areaStyle: {},
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: [
          5,5,5,5,5,5,5
            ],
            itemStyle: {
            color: 'orange'
        },
        // 区域填充样式
        areaStyle: {
            color: 'yellow'
        }
    },
     {
               symbol: 'none',  //取消折点圆圈
stack:'总量',

      name: 'Rainfall5',
      type: 'line',
      yAxisIndex: 1,
      areaStyle: {},
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: [
7,7,7,7,7,7,7            ],
itemStyle: {
            color: 'red'
        },
        // 区域填充样式
        areaStyle: {
            color: 'red'
        }
    }
  ]
};