Echarts在线免费图表

 
            const xData = ['1月', '2月', '3月', '4月', '5月']
// 右侧的立体柱子
const bottomValue = [1, 22, 3, 4, 6]
const topValue = [2, 3, 4, 6, 8]
// 顶部的柱子立体面
const topImg = bottomValue
   .reduce((acc, curr, index) => {
      acc.push(curr + topValue[index])
      return acc
   }, [])
   .flat()
// 注意：给series中的data赋值时需要注意参考注释中的内容顺序
//     series[0].data = bottomValue
//     series[1].data = topValue
//     series[3].data = bottomValue
//     series[4].data = topImg
option = {
   backgroundColor: '#192a3d',
   grid: {
      left: '5%',
      right: '4%',
      bottom: '0%',
      top: '15%',
      containLabel: true
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: {
         color: '#fff'
      },
      formatter: function (params, ticket, callback) {
         let text = ''
         params.map(item => {
            if (item.seriesName !== "") {
               text += `${item.seriesName}:${item.value}小时\n`
            }
         })
         return text
      }
   },
   xAxis: [
      {
         type: 'category',
         axisLine: {
            show: true,
            lineStyle: {
               color: '#3d6790',
               width: 1
            }
         },
         axisLabel: {
            interval: 0,
            textStyle: {
               color: 'rgba(255,255,255,0)',
               fontSize: 15
            }
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         data: xData
      }
   ],
   yAxis: {
      type: 'value',
      splitLine: {
         lineStyle: {
            color: '#0f3451'
         }
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: '#87baf8'
         }
      },

      axisTick: {
         show: false
      },
      axisLabel: {
         textStyle: {
            color: '#87baf8'
         },
         fontSize: 18
      }
   },
   series: [
      //   立体效果通过柱状图的线性渐变色来达到 itemStyle
      // 堆叠的下方柱子
      {
         type: 'bar',
         name: '时长',
         barWidth: 40, // 柱状图的宽度
         // z: 11,
         stack: 'zs',
         label: {
            show: false,
            position: 'top',
            color: '#10b3ff',
            fontFamily: 'dsDigital2',
            fontSize: 18,
            distance: 15 //距离头部的距离
         },
         itemStyle: {
            color: {
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               type: 'linear',
               global: false,
               colorStops: [
                  {
                     offset: 0,
                     color: '#1898e2'
                  },
                  {
                     offset: 0.5,
                     color: '#1898e2'
                  },
                  {
                     offset: 0.5,
                     color: '#1285c7'
                  },
                  {
                     offset: 1,
                     color: '#1285c7'
                  }
               ]
            }
         },
         data: bottomValue
      },
      //  堆叠的上方柱子
      {
         type: 'bar',
         stack: 'zs',

         name: '时间',
         // z: 10,
         label: {
            show: false,
            position: 'top',
            color: '#ffa70f',
            fontFamily: 'dsDigital2',
            fontSize: 18,
            distance: 15
         },
         itemStyle: {
            color: {
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               type: 'linear',
               global: false,
               colorStops: [
                  {
                     offset: 0,
                     color: '#f6c95c'
                  },
                  {
                     offset: 0.5,
                     color: '#f6c95c'
                  },
                  {
                     offset: 0.5,
                     color: '#be9d48 '
                  },
                  {
                     offset: 1,
                     color: '#be9d48'
                  }
               ]
            }
         },
         data: topValue
      },
      //  下面的立体面
      {
         name: '',
         type: 'pictorialBar',
         symbol: 'diamond',
         symbolSize: [40, 20],
         symbolOffset: [-0, 10],
         z: 1,
         itemStyle: {
            color: {
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               type: 'linear',
               global: false,
               colorStops: [
                  {
                     offset: 0,
                     color: '#1898e2'
                  },
                  {
                     offset: 0.5,
                     color: '#1898e2'
                  },
                  {
                     offset: 0.5,
                     color: '#1285c7'
                  },
                  {
                     offset: 1,
                     color: '#1285c7'
                  }
               ]
            }
         },
         data: [1, 1, 1, 1, 1, 1, 1]
      },
      //  中间层的立体面,data是下方柱子的data
      {
         name: '',
         type: 'pictorialBar',
         symbol: 'diamond',
         symbolSize: [40, 20],
         symbolOffset: [-0, -10],
         symbolPosition: 'end',
         z: 12,
         itemStyle: {
            color: {
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               type: 'linear',
               global: false,
               colorStops: [
                  {
                     offset: 0,
                     color: '#f6c95c'
                  },
                  {
                     offset: 0.5,
                     color: '#f6c95c'
                  },
                  {
                     offset: 0.5,
                     color: '#be9d48 '
                  },
                  {
                     offset: 1,
                     color: '#be9d48'
                  }
               ]
            }
         },
         data: bottomValue
      },
      //  上方的立体面 data的数据应该是b1和b2的data相加的总和
      {
         name: '',
         type: 'pictorialBar',
         symbol: 'diamond',
         symbolPosition: 'end',
         symbolSize: [40, 20],
         symbolOffset: [-0, -10],
         z: 20,
         // 是否展示总数
         label: {
            normal: {
               show: true,
               position: 'top',
               fontSize: 24,
               color: '#fff',
               // offset: [0, 25],
            },
         },
         itemStyle: {
            opacity: 1,
            color: '#f6c95c'
         },
         data: topImg
      }
   ]
};