Echarts在线免费图表

 
            var data = [20, 40, 30, 50, 70];
option = {
    backgroundColor: "#0f375f",
      grid: {
        // 让图表占满容器
        top: "12%",
        left: "10%",
        right: "10%",
        bottom: "12%",
      },
      xAxis: {
        data: ["一月", "二月", "三月", "四月", "五月"],
        axisLabel: {
          show: true,
          color: "#ffff",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(95, 180, 237, 0.32)",
          },
        },
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(95, 180, 237, 0.32)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#ffff",
        },
      },
      series: [
        {
          // 顶部圆片
          type: "pictorialBar",
          animation: false,
          itemStyle: {
            color: "rgba(115, 240, 252, 1)",
          },
          symbolRepeat: false,
          symbolSize: [15, 8],
          symbolMargin: 1,
          z: 10,
          data: data,
          symbolPosition: "end",
          symbolOffset: [0, -4],
        },
        {
          // 底部圆片
          type: "pictorialBar",
          animation: false,

          itemStyle: {
            color: "rgba(50, 96, 225, 0.8)",
          },
          symbolRepeat: false,
          symbolSize: [15, 8],
          symbolMargin: 1,
          z: 10,
          data: data,
          symbolPosition: "start",
          symbolOffset: [0, 3],
        },
        {
          barWidth: 15,
          animation: false,

          type: "bar",
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#ffff",
            },
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
              { offset: 0, color: "rgba(82, 180, 249, 1)" },
            ]),
          },
          data: data,
        },
      ],
};