Echarts在线免费图表

 
            let option = {
   backgroundColor: "#000",
    grid: {
      left: 40,
      top: 40,
      right: 10,
      bottom: 50,
      contentLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      },
      axisLabel: {
        color: "#D6F5FF"
      },
      axisTick: {
        show: true
      },
      data: ["苹果","香蕉","菠萝","西瓜","草莓"]
    },
    yAxis: {
      type: "value",
      splitNumber: 5,
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255, 255, 255, 0.80)",
          fontSize: 16
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.60)",
          type: "dashed",
        },
      },
    },
    visualMap: [
      {
        show: false,
        dimension: 1,
        seriesIndex: 0, // 第一部分数据
        pieces: [
          { min: 5, max: 10, color: "#00bfff" },
          { min: 10, max: 20, color: "yellow" },
          { min: 20, max: 30, color: "orange" },
          { min: 30, color: "red" }
        ],
        outOfRange: {  // 不再范围内的
          color: "#00FFAA"
        }
      }
    ],
    series: [
      {
        data: [6,17,2,48,25],
        type: "line",
        symbolSize: 6,
        itemStyle: {
          borderWidth: 2,
          borderColor: "RGB(113, 255, 241)"
        }
      }
    ]
};