Echarts在线免费图表

 
            var names = [], values = [];
for (var a = 0; a < 10; a++) {
   names.push("数据" + a);
   values.push(Math.round(Math.random() * 100));
}

option = {
   backgroundColor: "#041139",
   tooltip: {
      trigger: 'item',
   },
   legend: {
      show: false
   },
   grid: {
      top: 50,
      left: 20,
      right: 20,
      bottom: 80
   },
   xAxis: [{
      data: names,
      axisLabel: {
         textStyle: {
            color: '#fff',
            fontSize: 14
         },
         interval: 0,
         // rotate:30
         margin: 30, //刻度标签与轴线之间的距离。
      },
      axisLine: {
         show: false, //不显示x轴
         lineStyle: {
            color: 'rgba(53,65,95,1)',
         }
      },
      axisTick: {
         show: false //不显示刻度
      },
      boundaryGap: true,
      splitLine: {
         show: false
      }
   }],
   yAxis: [{
      splitLine: {
         show: false,
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false, //不显示x轴
         lineStyle: {
            color: 'rgba(53,65,95,1)',
         }
      },
      axisLabel: {
         show: false,
         textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
         },
      }
   }],
   series: [
      // 柱体
      {
         name: '人数',
         type: 'bar',
         barWidth: 15,
         showBackground: true,
         backgroundStyle: {
            color: "rgba(105,160,231,0.1)"
         },
         itemStyle: {
            color: {
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               type: "linear",
               global: false,
               colorStops: [{//第一节下面
                  offset: 0,
                  color: "#e7ad00"
               }, {
                  offset: 1,
                  color: "#026ee7"
               }]
            },
            borderRadius: 30
         },
         label: {
            show: true,
            formatter: "{c}",
            position: "top",
            color: "#fff",
            fontSize: 14
         },
         data: values
      },
      //柱底圆片
      {
         name: "",
         type: "pictorialBar",
         symbolSize: 25,//调整截面形状
         symbolOffset: [0, 16],
         z: 12,
         itemStyle: {
            normal: {
               color: '#026ee7'
            }
         },
         data: values
      }
   ]
};