G2堆叠面积图

先上图

 

 

  secondChartInit() {
      const chart = new Chart({
        container: 'Statistics-chart2',//id值
        autoFit: true,
        padding: [70, 20, 20, 40]
        // height: 500,
      })
      const tooltipHtml =
 9     `<div style='display:flex;justify-content:space-between;align-items:center;width: 170px;height: 21px;'>
10     <div style='background: url(${leftimg});width:23px;height:7px;'>
11      </div><div><span>&nbsp; 累计节水统计</span></div><div style='background: url(${rightimg});width:23px;height:7px;'>
12      </div></div>`
13       chart.annotation().html({
14         html: tooltipHtml,
15         alignY: 'middle',
16         offsetX: 150,
17         offsetY: -170,
18         top: true
19       })//自定义文字
      chart.annotation().text({
        content: "单位：亿立方米",
        isVertical: true,
        position: ['-4%', '-12%']
      })
      chart.data(this.secondChartData)
      chart.scale({
        year: {
          range: [0.02, 0.98],//面积横向范围
        },
        value: {
          nice: true,
        },
      })
      chart.tooltip({
        showCrosshairs: true,
        shared: true,
      })
      chart.legend(false)
      chart
        .line()
        .position('year*value').label('value')
        .color('item')
        .shape('smooth');
      chart
        .point()
        .position('year*value')
        .color('item')
        .shape('smooth');
      chart.theme({ "styleSheet": { "brandColor": "#8052F3", "paletteQualitative10": ["#8052F3"] }});
      chart.render();
    }

补充：
    secondChartData: [
        { item: '累计节水用水量', year: '2019', value: 0.325 },
        { item: '累计节水用水量', year: '2020', value: 0.979 },
        { item: '累计节水用水量', year: '2021', value: 1.272 }
      ]