Echarts在线免费图表

 
            let yMax = 5;
option = {
   dataset: {
      source: [
         ["数据1", 2],
         ["数据2", 2],
         ["数据3", 5],
         ["数据4", 2],
      ],
   },
   backgroundColor: "#fff",
   tooltip: {
      trigger: "axis",
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
   },
   title: {
      text: "渐变柱状图",
      top: 0,
      right: "4%",
      textStyle: {
         fontWeight: "bold",
         fontSize: 14,
         color: "#666666",
      },
   },
   grid: {
      left: "8%",
      right: "4%",
      bottom: "15%",
      top: "15%",
   },
   xAxis: {
      type: "category",
      axisLine: {
         lineStyle: {
            color: "#dddddd",
         },
      },
      axisTick: {
         show: false,
         alignWithLabel: true,
         lineStyle: {
            color: "#f3f3f3",
         },
      },
      axisLabel: {
         fontSize: 14,
         textStyle: {
            color: "#666666",
            fontFamily: "Microsoft YaHei",
         },
      },
   },

   yAxis: {
      type: "value",
      min: 0,
      max: yMax,
      axisLine: {
         show: false,
         lineStyle: {
            color: "#dddddd",
         },
      },
      data: [1, 2, 3],
      axisTick: {
         show: true,
         alignWithLabel: true,
         lineStyle: {
            color: "#dddddd",
         },
      },
      splitLine: {
         show: true,
         lineStyle: {
            type: "dotted",
            color: "#dddddd",
            type: [6, 3],
            dashOffset: 2,
         },
      },
      axisLabel: {
         padding: [0, 5, 0, 0],
         fontSize: 14,
         textStyle: {
            color: "#666666",
            fontFamily: "Microsoft YaHei",
         },
      },
   },
   series: [
      {
         type: "bar",
         barWidth: 30,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "#00e7e0",
                  },
                  {
                     offset: 1,
                     color: "#00d0c2",
                  },
               ]),
               barBorderRadius: [4, 4, 0, 0],
            },
         },
      },
   ],
};