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
const offsetY = Math.tan(Math.PI / 9) * (wid / 2)
const CubeLeft = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0
   },
   buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint
      const c0 = [shape.x, shape.y + offsetY - 1]
      const c1 = [shape.x - wid / 2, shape.y]
      const c2 = [shape.x - wid / 2, xAxisPoint[1] - offsetY]
      const c3 = [shape.x, xAxisPoint[1] - 1]
      ctx
         .moveTo(c0[0], c0[1])
         .lineTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .closePath()
   }
})
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0
   },
   buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint
      const c0 = [shape.x, shape.y + offsetY - 1]
      const c1 = [shape.x, xAxisPoint[1] - 1]
      const c2 = [shape.x + wid / 2, xAxisPoint[1] - offsetY]
      const c3 = [shape.x + wid / 2, shape.y]
      ctx
         .moveTo(c0[0], c0[1])
         .lineTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .closePath()
   }
})
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0
   },
   buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y + offsetY - 1]
      const c2 = [shape.x + wid / 2, shape.y]
      const c3 = [shape.x, shape.y - offsetY + 1]
      const c4 = [shape.x - wid / 2, shape.y]
      ctx
         .moveTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .lineTo(c4[0], c4[1])
         .closePath()
   }
})

// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

let barColor = '#387EE7'
let barGridientColor = '#122A54'
let shadowColor = 'rgba(0,255,248,1)'
let shadowBlur = 50

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: '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
                  }
               ]),

               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
                  }
               ]),

               stroke: shadowColor,
               lineWidth: 1
            }
         },
         {
            type: 'CubeTop',
            shape: {
               x: location[0],
               y: location[1],
               xAxisPoint: xlocation
            },
            style: {
               fill: shadowColor,
               stroke: shadowColor,
               lineWidth: 1
            }
         }
      ],
   }
}

option = {
   backgroundColor: 'rgba(0,0,0,.8)',
   grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '10%',
      containLabel: true
   },
   xAxis: {
      type: 'category',
      show: false,
      data: category
   },
   yAxis: {
      type: 'value',
      show: false
   },
   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 = '<div style="background:url(' + tooltipBg + ');background-attachment: fixed;background-size: cover;padding:5px 10px;">';
         returnData += `<span style="`;
         returnData += `color: #fff;`;
         returnData += `">${params.name}:</span>`;
         returnData += `<span style="`;
         returnData += `color: #fff;`;
         returnData += `">${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;',

   },
   series: [
      {
         type: 'custom',
         renderItem: renderItem,
         data: mainData,
      },
      {
         type: 'bar',
         barWidth: wid + 2,
         itemStyle: {
            color: 'rgba(255,255,255,0.3)',
         },
         data: mainData
      }
   ]
}