Echarts在线免费图表

 
            function addAlpha(rgb, alpha) {
  // 匹配rgb颜色格式
  const rgbPattern = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
  const match = rgb.match(rgbPattern);

  if (!match) {
    throw new Error('Invalid RGB format');
  }

  // 提取红、绿、蓝值
  const r = match[1];
  const g = match[2];
  const b = match[3];

  // 返回rgba颜色格式
  return `rgba(${r},${g},${b},${alpha})`;
}

let colors = [
  'rgb(150,208,135)',
  'rgb(63,162,246)',
  'rgb(244,162,97)',
  'rgb(145,122,176)'
]

let data = {
  data: [
    [92, 0, 8, 143, 89, 67, 0, 0, 0, 0, 197, 0],
    [12, 0, 8, 14, 23, 44, 0, 0, 0, 0, 19, 0],
    [0, 0, 0, 13, 30, 40, 0, 0, 0, 0, 17, 0],
  ],
  title: "营造林月份统计",
  unit: "亩",
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  legend: ["营造林", "林地转入", "潜力森林转入"],
};

let series = data.data.map((item, index) => {
  return {
    name: data.legend[index],
    type: 'line',
    smooth: true, //是否平滑
    showAllSymbol: true,
    symbol: 'circle',
    symbolSize: 10,
    lineStyle: {
      color: colors[index],
    },
    label: {
      show: false,
      position: 'top',
      textStyle: {
        color: colors[index],
      }
    },
    itemStyle: {
      color: colors[index],
      borderColor: "#fff",
      borderWidth: 2,
      shadowColor: 'rgba(0, 0, 0, .1)',
      shadowBlur: 0,
      shadowOffsetY: 2,
      shadowOffsetX: 2,
    },
    tooltip: {
      show: true
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: addAlpha(colors[index], 0.2)
        },
        {
          offset: 1,
          color: addAlpha(colors[index], 0)
        }
        ], false),
        shadowColor: 'rgba(0,179,244, 0.5)',
        shadowBlur: 20
      }
    },
    data: data.data[index]
  }
})
option = {
  title: {
    show: false,
    text: data.title ?? '',
    textStyle: {
      align: 'center',
      color: 'rgba(0, 0, 0, 0.45)',
      fontSize: 20,
    },
    top: '5%',
    left: 'center',
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true,
      },
    },
  },
  grid: {
    top: '15%',
    left: '5%',
    right: '5%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: true,
    axisLine: {
      show: true
    },
    splitArea: {
      // show: true,
      color: '#f00',
      lineStyle: {
        color: '#f00'
      },
    },
    axisLabel: {
      color: 'rgba(0, 0, 0, 0.45)'
    },
    splitLine: {
      show: false
    },
    data: data.xAxis
  }],
  yAxis: [{
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(0, 0, 0, 0.15)'
      }
    },
    axisLine: {
      show: true,
    },
    axisLabel: {
      show: true,
      margin: 20,
      textStyle: {
        color: 'rgba(0, 0, 0, 0.45)'
      },
    },
    axisTick: {
      show: true,
    },
  }],
  legend: {
    show: true,
  },
  series: series
};