Echarts在线免费图表

 
            let myData3 = [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月 ",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月"
];
let seriesData = [
  {
    name:'2021',
    data:[30, 10, 32, 22, 16, 10, 16, 20, 25, 28,3,22],
    colors:['#32FDE8','rgba(50, 253, 232, 0)']
  },
   {
    name:'2022',
    data:[16, 30, 28, 18, 30, 24, 12, 34, 20, 25,18,22],
    colors:['rgba(50, 180, 254, 1)','rgba(50, 180, 254, 0)']
  },
   {
    name:'2023',
    data:[20, 34, 32, 22, 36, 20, 16, 0, 0, 0,0,0],
    colors:['rgba(32, 110, 255, 1)','rgba(32, 110, 255, 0)']
  }
]

let series = seriesData.map(item =>{
  return {
      data: item.data,
      name: item.name,
      type: "bar",
      barWidth: "10px",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: item.colors[0],
            },

            {
              offset: 1,
              color: item.colors[1],
            },
          ]),
        },
      },
      label: {
        show: false,
        position: "top",
        fontSize: 12,
        color: "#F5F5F5",
        offset: [0, -5],
        formatter: "{c}",
      },
    }
})

let option = {
  backgroundColor: "#071B3D",
  legend: {
    icon: "rect",
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 20,
    textStyle: {
      fontSize: 14,
      color: "#fff",
    },
    data: seriesData.map(item => {return item.name}),
    selectedMode: false,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      textStyle: {
        color: "#fff",
      },
    },
    textStyle: {
      color: "#fff",
    },
    backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
    formatter: function (x, y, z, k) {
      console.log(x, y, z, k)
    },
  },
  grid: {
    left: "3%",
    right: "3%",
    bottom: "1%",
    top: "18%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: myData3,
    axisPointer: {
      type: "shadow",
    },
    axisLabel: {
      color: "rgba(255, 255, 255, .8)",
      interval: 0,
      margin: 15,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(45, 67, 119, 0.8)",
      },
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    name: "断面数",
    nameTextStyle: {
      color: "#fff",
      fontSize: 14,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(45, 67, 119, 0.8)",
      },
    },
    min: 0,
    axisLabel: {
      show: true,
      color: "#fff",
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 0.5,
        color: "rgba(45, 67, 119, .5)",
        type: "dashed",
      },
    },
  },
  series: series
};