Echarts在线免费图表

 
            option = {
   //   backgroundColor:"#0F285C",
   grid: {
      containLabel: true,
      top: 30,
      right: 15,
      bottom: 0,
      left: 15
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: 'none'
      },
      formatter: params => {
         console.log(params)
         const {
            name,
            data,
         } = params[0];
         return `
            <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
            <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 次</span>
         `
      },
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   xAxis: {
      // 类目轴
      type: "category",
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLine: {
         lineStyle: {
            color: "#CCCCCC"
         }
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: '#000',
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
         }
      },
   },
   yAxis: {
      type: 'value',
      name: "",
      nameTextStyle: {
         color: 'rgba(0,0,0,0.65)',
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
         align: "left",
         verticalAlign: "center",
      },
      axisLabel: {
         color: 'rgba(0,0,0,0.65)',
         textStyle: {
            fontSize: 14
         },
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
         }
      },
      axisTick: {
         show: false
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
            type: "dashed",
         }
      }
   },
   series: [
      {
         type: "pictorialBar",
         // barWidth: "120%",
         barCategoryGap: "12%",
         label: {
            normal: {
               show: true,
               position: "top",
               textStyle: {
                  color: "#FFFFFF",
                  fontSize: 12
               }
            }
         },
         itemStyle: {
            normal: {
               color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: "rgba(253, 214, 45, 0.5)"  // 0% 处的颜色
                     },
                     {
                        offset: 0.8,
                        color: "rgba(250, 173, 20, 0.5)" // 100% 处的颜色
                     }
                  ],
                  globalCoord: false // 缺省为 false
               } //渐变颜色
            }
         },
         emphasis: {
            itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(253, 214, 45, 1)" },
                  { offset: 1, color: "rgba(250, 173, 20, 1)" }
               ])
            }
         },
         symbol:
            "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

         data: [132, 66, 54, 37, 88, 136, 12]
      }
   ]
}