Echarts在线免费图表

 
            function random(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
}
function registerShapeFun() {
   const offsetX = 12
   const offsetY = 6
   // 绘制左侧面
   const CubeLeft = echarts.graphic.extendShape({
      shape: {
         x: 0,
         y: 0
      },
      buildPath: function (ctx, shape) {
         // 会canvas的应该都能看得懂，shape是从custom传入的
         const xAxisPoint = shape.xAxisPoint
         // console.log(shape);
         const c0 = [shape.x, shape.y]
         const c1 = [shape.x - offsetX, shape.y - offsetY]
         const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
         const 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()
      }
   })
   // 绘制右侧面
   const CubeRight = echarts.graphic.extendShape({
      shape: {
         x: 0,
         y: 0
      },
      buildPath: function (ctx, shape) {
         const xAxisPoint = shape.xAxisPoint
         const c1 = [shape.x, shape.y]
         const c2 = [xAxisPoint[0], xAxisPoint[1]]
         const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
         const c4 = [shape.x + offsetX, shape.y - offsetY]
         ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
      }
   })
   // 绘制顶面
   const CubeTop = echarts.graphic.extendShape({
      shape: {
         x: 0,
         y: 0
      },
      buildPath: function (ctx, shape) {
         const c1 = [shape.x, shape.y]
         const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
         const c3 = [shape.x, shape.y - offsetX]
         const c4 = [shape.x - offsetX, shape.y - offsetY]
         ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
      }
   })

   return [CubeLeft, CubeRight, CubeTop]
}
const [CubeLeft, CubeRight, CubeTop] = registerShapeFun()
this.echarts.graphic.registerShape('CubeLeft', CubeLeft)
this.echarts.graphic.registerShape('CubeRight', CubeRight)
this.echarts.graphic.registerShape('CubeTop', CubeTop)

const colorArr = [
   ['#4187A5', '#51AAD1', '#B6E9FF'],
   ['#4A9880', '#70D6B5', '#A7FFDF']
]
const seriesArr = []
const xAxisData = []
const seriesData = []

for (let d = 0; d < 10; d++) {
   xAxisData.push(d + 1 + '月')
}

for (let i = 0; i < 2; i++) {
   seriesArr[i] = []
   for (let x = 0; x < 10; x++) {
      seriesArr[i].push(random(10, 80))
   }
}

for (let index = 0; index < 2; index++) {
   seriesData.push({
      type: 'custom',
      renderItem: (params, api) => {
         const location = api.coord([api.value(0), api.value(1)])
         return {
            type: 'group',
            x: index === 1 ? 18 : -12,
            label: {
               show: true
            },
            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 this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                           offset: 0,
                           color: colorArr[index][0]
                        },
                        {
                           offset: 1,
                           color: colorArr[index][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 this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                           offset: 0,
                           color: colorArr[index][0]
                        },
                        {
                           offset: 1,
                           color: colorArr[index][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: colorArr[index][2]
                  }
               }
            ]
         }
      },
      data: seriesArr[index]
   })
}


option = {
   backgroundColor: '#1d3e71',
   tooltip: {
      show: false
   },
   grid: {
      top: 160,
      left: 60,
      right: 100,
      bottom: 20,
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         axisLine: {
            lineStyle: {
               color: '#fff'
            }
         },
         boundaryGap: true,
         axisTick: {
            show: false
         },
         splitArea: {
            show: false
         },
         axisLabel: {
            inside: false,
            interval: 0,
            rotate: 0,
            textStyle: {
               color: '#fff',
               fontWeight: 400,
               fontSize: 24
            },
            margin: 15
         },
         data: xAxisData
      }
   ],
   yAxis: {
      type: 'value',
      name: '单位:人次',
      nameTextStyle: {
         color: '#fff',
         fontSize: 24
      },
      nameGap: 40,
      axisTick: {
         show: false
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: '#fff'
         }
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.18)'
         }
      },
      axisLabel: {
         textStyle: {
            color: '#fff',
            fontWeight: 400,
            fontSize: 24
         },
         formatter: '{value}',
         margin: 15
      }
   },
   series: [
      ...seriesData,
      {
         type: 'bar',
         label: {
            normal: {
               show: true,
               position: 'top',
               fontSize: 18,
               color: '#fff',
               offset: [0, -10]
            }
         },
         itemStyle: {
            color: 'transparent'
         },
         tooltip: {
            show: false
         },
         data: seriesArr[0]
      },
      {
         type: 'bar',
         label: {
            normal: {
               show: true,
               position: 'top',
               fontSize: 18,
               color: '#fff',
               offset: [0, -10]
            }
         },
         itemStyle: {
            color: 'transparent'
         },
         tooltip: {
            show: false
         },
         data: seriesArr[1]
      }
   ]
};