echart图表折线图

var cdata=[
    2000.56,
    1800,
    2239.56,
    3239.56,
    2239.56
]

let lineColor=['#C5E879', '#2DF0DB']

let cxdata=[2021,2022,2023,2024,2025]


// 增长率数据，正数为增长（↑），负数为下降（↓），实际根据计算得到
        // var growthRates = [12.35, -12.29, 12.35, 12.35, 12.35];
        var growthRates =  [12.35, -12.29, 12.35, 12.35, 12.35];
        // 处理数据，用于标注显示（拼接数值和增长率）
        var labelData = cdata.map((val, index) => {
          let growthSymbol = growthRates[index] >= 0 ? '↑' : '↓';
          let str = "";
          if (growthRates[index] >= 0) { // 增长
            str = `{value1|${val}人/km²}\n{value2|${Math.abs(growthRates[index])}% ${growthSymbol}}`
          } else {
            str = `{value1|${val}人/km²}\n{value3|${Math.abs(growthRates[index])}% ${growthSymbol}}`
          }
          return str;
        });
        // 颜色渐变
        const createGradient = (color1, color2) => {
          return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: color1 },
            { offset: 1, color: color2 }
          ]);
        };

        // 处理最后一个数据显示圆圈
        const processData = (data, markerImage, length) => {
          return data.map((value, index) => {
            // 检查是否为最后一个数据点
            if (index === length - 1) {
              return {
                value: value,
                symbol: `image://${markerImage}`,
                symbolSize: [47, 38],
                symbolOffset: [0, 0]
              };
            }
            return value;
          });
        };
        const processDataFormat = processData(cdata, '', cdata.length)

        option = {
           backgroundColor: '#0c2d55',
          title: {
            // text: '', // 可根据需求设置标题
            // left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            },
            backgroundColor: 'rgba(18, 28, 40, 0.9)',
            borderColor: 'rgba(255, 255, 255, 0.1)',
            borderWidth: 1,
            textStyle: {
              color: '#E4F3FF'
            },
            // formatter: function (params) {
            //     let item = params[0];
            //     let growthSymbol = growthRates[item.dataIndex] >= 0 ? '↑' : '↓';
            //     return `${this.cxdata[item.dataIndex]}<br/>${item.seriesName}: ${item.value}人/㎡<br/>增长率: ${Math.abs(growthRates[item.dataIndex])}% ${growthSymbol}`;
            // }
          },
          xAxis: {
            type: 'category',
            data: cxdata,
            axisLabel: {
              fontSize: 18,
              fontFamily: "Source Han Sans",
              color: '#E4F3FF' // 可选：设置字体颜色
            }
          },
          yAxis: {
            type: 'value',
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              fontSize: 16,
              fontFamily: "Source Han Sans",
              color: '#BCC8D4' // 可选：设置字体颜色
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: '青年人口密度',
              type: 'line',
              data: processDataFormat,
              lineStyle: {
                color: createGradient(lineColor[0], lineColor[1]), // 折线颜色，类似示例中的红色
              },
              symbol: 'circle',  // 隐藏拐点圆
              smooth: false,
              // symbolSize: 6, // 必须设置大小，确保标签有定位基准
              itemStyle: {
                color: 'rgba(76, 175, 80, 0)', // 拐点颜色
                borderWidth: 0
              },
              label: {
                show: true,
                ignore: true,
                position: 'top', // 标注位置，可根据需求调整为 'bottom' 等
                formatter: function (params) {
                  return labelData[params.dataIndex];
                },
                rich: { // 定义文本颜色
                  value1: {
                    color: '#fff',
                    fontSize: 16,
                    // marginBottom: 5
                  },
                  value2: {
                    color: '#43CF7C',
                    fontSize: 16
                  },
                  value3: {
                    color: '#FF5733',
                    fontSize: 16
                  },
                },
                lineHeight: 30
              },

            }
          ],
        };

效果图：