Echarts在线免费图表

 
            const tooltipBg =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAAAdCAYAAACUoyOLAAABd0lEQVRoge2bW27CMBBFZ0xeBlRUCdhNf7qWbqPtBzvoKvtURRWSkDRxdQlIVN1APdwjZwM+Gscfx3p793QjIpsQhvW+Lvu+a0OQIFjkn6NYKpM009zPJ6ruVUTuEwjd17tltX1r63Lbd/smSKDRaFCVNC/UzxeT6WK1zP1sk2BCIfTr/fl7V372XVMNlBoRkFpMXdfUB2lZ4dcJjlxMKIRW24++rashUGo0qKpkfhSaFl79Vdkn+IfiyMWEQmjb7IZL36gYSXOv8AifbrwUjR8nNE5COHMoQRxvucYIIu7S98AilGoQSjUIpRqEUg1CqQahVINQqkEo1SCUahBKNQilGoRSDUKpBqFUg1CqQRwyQ2IIFXF6iEfHDxETiQ/VM4eikiAERjeKzPBUpbFVioexJpw6+INH+ExQdiMEPnWjqNLY/UbEsfudza8PHuEzQaqPsluO3SgL/cj4XejD5xueXTwg1c8Kv0IIzLc0EfH3Lc2LiDz+AN+rpy0EZYVRAAAAAElFTkSuQmCC';
let category = ['久其金建', '久其', '久其数字科技', '久其蜂语网络科技', '小数字']
let mainData = [2000, 5000, 4000, 1000, 100]

const wid = 50
//贝塞尔曲线的y偏移
let cpy = 5;

const CubeFront = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0
   },
   buildPath: function (ctx, shape) {
      let xAxisPoint = shape.xAxisPoint;
      let c0 = [shape.x + wid / 2, shape.y]; //右上
      let c1 = [shape.x - wid / 2, shape.y]; //左上
      let c2 = [shape.x - wid / 2, xAxisPoint[1] - cpy]; //左下
      let c3 = [shape.x + wid / 2, xAxisPoint[1] - cpy]; //右下

      ctx
         .moveTo(c2[0], c2[1])
         .bezierCurveTo(shape.x - wid / 2 + cpy, xAxisPoint[1], shape.x + wid / 2 - cpy, xAxisPoint[1], c3[0], c3[1])
         .lineTo(c0[0], c0[1])
         .lineTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .closePath();
   }
})

const CubeTop = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0
   },
   buildPath: function (ctx, shape) {
      //贝塞尔曲线的y偏移
      let c0 = [shape.x + wid / 2, shape.y]; //右点
      let c1 = [shape.x - wid / 2, shape.y]; //左点

      ctx.moveTo(c1[0], c1[1]).bezierCurveTo(shape.x - wid / 2, shape.y + cpy, shape.x + wid / 2, shape.y + cpy, c0[0], c0[1]);
      ctx.moveTo(c1[0], c1[1]).bezierCurveTo(shape.x - wid / 2, shape.y - cpy, shape.x + wid / 2, shape.y - cpy, c0[0], c0[1]);

   }
})

echarts.graphic.registerShape('CubeFront', CubeFront)
echarts.graphic.registerShape('CubeTop', CubeTop)

let barColor = '#387EE7'
let barGridientColor = '#122A54'
let shadowColor = 'rgba(0,255,248,1)'
let renderItem = (params, api) => {
   const location = api.coord([api.value(0), api.value(1)])
   location[0] = location[0] + wid * 0
   const xlocation = api.coord([api.value(0), 0])
   xlocation[0] = xlocation[0] + wid * 0
   return {
      type: 'group',
      children: [
         {
            type: 'CubeFront',
            shape: {
               x: location[0],
               y: location[1],
               xAxisPoint: xlocation
            },
            style: {
               fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 1,
                     color: barColor
                  },
                  {
                     offset: 0,
                     color: barGridientColor
                  }
               ]),

               stroke: shadowColor,
               lineWidth: 1
            }
         },

         {
            type: 'CubeTop',
            shape: {
               x: location[0],
               y: location[1],
               xAxisPoint: xlocation
            },
            style: {
               fill: shadowColor,
               stroke: shadowColor,
               lineWidth: 1
            }
         }
      ],
   }
}
let shadowBlur = 50
let renderItem1 = (params, api) => {
   const location = api.coord([api.value(0), api.value(1)])
   location[0] = location[0] + wid * 0
   const xlocation = api.coord([api.value(0), 0])
   xlocation[0] = xlocation[0] + wid * 0
   return {
      type: 'group',
      children: [
         {
            type: 'CubeLeft',
            shape: {
               x: location[0],
               y: location[1],
               xAxisPoint: xlocation
            },
            style: {
               fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 1,
                     color: barColor
                  },
                  {
                     offset: 0,
                     color: barGridientColor
                  }
               ]),
               shadowColor,
               shadowBlur,
               shadowOffsetY: 0,
               stroke: shadowColor,
               lineWidth: 1
            }
         },
         {
            type: 'CubeRight',
            shape: {
               x: location[0],
               y: location[1],
               xAxisPoint: xlocation
            },
            style: {
               fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 1,
                     color: barColor
                  },
                  {
                     offset: 0,
                     color: barGridientColor
                  }
               ]),
               shadowColor,
               shadowBlur,
               shadowOffsetX: 0,
               stroke: shadowColor,
               lineWidth: 1
            }
         },
         {
            type: 'CubeTop',
            shape: {
               x: location[0],
               y: location[1],
               xAxisPoint: xlocation
            },
            style: {
               fill: shadowColor,
               shadowColor,
               shadowBlur,
               shadowOffsetY: 0,
               stroke: shadowColor,
               lineWidth: 1
            }
         }
      ],
   }
}
option = {
   backgroundColor: 'rgba(0,0,0,.8)',
   tooltip: {
      show: true,
      padding: [5, 10],
      position: (point, params, dom, rect, size) => {
         let y = size.contentSize[1];
         return [rect.x, rect.y - y - 30];
      },
      formatter: function (params) {
         let returnData = '';
         returnData += '<div style="background:url(' + tooltipBg + ');background-attachment: fixed;background-size: cover;padding:5px 10px;">';
         returnData += `<span style="color: #fff;">${params.name}:</span>`;
         returnData += `<span style="color: #fff;">${params.data}</span>`;
         returnData += '</div>';
         return returnData;
      },
      extraCssText: 'background:transparent;padding:0px;box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);border:none;',
   },
   grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '10%',
      containLabel: true
   },
   xAxis: {
      type: 'category',
      show: false,
      data: category
   },
   yAxis: {
      type: 'value',
      show: false
   },
   series: [
      {
         type: 'custom',
         renderItem,
         data: mainData,
      },
      {
         type: 'bar',
         barWidth: wid + 2,
         itemStyle: {
            color: 'rgba(255,255,255,0.3)',
         },
         data: mainData
      }
   ]
}