Echarts在线免费图表

 
            echarts.graphic.registerShape('CubeLeft', echarts.graphic.extendShape({
   shape: { x: 0, y: 0 },
   buildPath: function (ctx, shape) {
      let xAxisPoint = shape.xAxisPoint;
      let c0 = [shape.x, shape.y];
      let c1 = [shape.x - 9, shape.y - 7]; //左上角
      let c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 10]; //右上角
      let c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
   }
}));
echarts.graphic.registerShape('CubeRight', echarts.graphic.extendShape({
   shape: { x: 0, y: 0 },
   buildPath: function (ctx, shape) {
      let xAxisPoint = shape.xAxisPoint;
      let c1 = [shape.x, shape.y];
      let c2 = [xAxisPoint[0], xAxisPoint[1]];
      let c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 2]; //右下
      let c4 = [shape.x + 18, shape.y - 1];
      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('CubeTop', echarts.graphic.extendShape({
   shape: { x: 0, y: 0 },
   buildPath: function (ctx, shape) {
      let c1 = [shape.x, shape.y];
      let c2 = [shape.x + 18, shape.y - 1]; //右下
      let c3 = [shape.x + 9, shape.y - 8]; //右上
      let c4 = [shape.x - 9, shape.y - 7];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
   }
}));

option = {
   backgroundColor: "#041139",
   grid: {
      left: '5%',
      right: 0,
      bottom: '3%',
      top: '10%',
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      data: ['数据1', '数据2', '数据3', '数据4'], //数据
      axisLabel: {
         color: "#fff",
         fontSize: 14
      },
      axisLine: {
         show: true,
         lineStyle: {
            type: 'dashed', //线的类型 虚线
         }
      },
      axisTick: false
   },
   yAxis: {
      // name: '人', //名称
      // min: 0, //最小
      // max: 1600, //最大
      // interval: 200, //相差
      type: 'value',
      axisLine: { //坐标轴样式
         show: false, //不显示
      },
      axisLabel: {
         color: "#fff"
      },
      splitLine: { //分隔辅助线
         lineStyle: {
            type: 'dashed', //线的类型 虚线0
            opacity: 1,//透明度
            color: '#2E3A49'
         }
      }
   },
   series: [
      {
         type: 'custom',
         label: {
            show: true,
            color: '#0799ff',
            position: 'top'
         },
         renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
               type: 'group',
               children: [{
                  type: 'CubeLeft',
                  shape: {
                     api,
                     xValue: api.value(0),
                     yValue: api.value(1),
                     x: location[0],
                     y: location[1],
                     xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //左侧面
                        offset: 0,
                        color: 'rgba(103, 214, 255,1)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(7, 153, 255,1)',
                     }
                     ])
                  }
               },
               {
                  type: 'CubeRight',
                  shape: {
                     api,
                     xValue: api.value(0),
                     yValue: api.value(1),
                     x: location[0],
                     y: location[1],
                     xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(22, 179, 255,1)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(11, 94, 255,1)',
                     }
                     ])
                  }
               },
               {
                  type: 'CubeTop',
                  shape: {
                     api,
                     xValue: api.value(0),
                     yValue: api.value(1),
                     x: location[0],
                     y: location[1],
                     xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 109, 171,0.5)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(0, 109, 171,0.5)',
                     }
                     ])
                  }
               }
               ]
            };
         },
         data: [180, 380, 780, 780]
      }
   ]
}