Echarts在线免费图表

 
            let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
let VALUE = [40, 60, 80, 70, 50, 60, 40, 60, 80, 70, 50, 60]
let bgData = [];
let max = Math.max(...VALUE);
VALUE.forEach((i) => {
   bgData.push(max);
});
const CubeLeft = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0
   },
   buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - 6, shape.y - 6];
      const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] - 6];
      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] + 12, xAxisPoint[1] - 6];
      const c4 = [shape.x + 12, shape.y - 6];
      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 + 12, shape.y - 6];
      const c3 = [shape.x + 6, shape.y - 12];
      const c4 = [shape.x - 6, shape.y - 6];
      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 option = {
   backgroundColor:'#00266b',
   grid: {
      top: '20%',
      left: '15%',
      right: '7%',
      bottom: '15%'
   },
   xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
         show: true,
         lineStyle: {
            color: '#72a1e5'
         }
      },
      offset: 1,
      axisTick: {
         show: false
      },
      axisLabel: {
         fontSize: 12,
         color: '#ffffff',
         interval: 0
      }
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
      backgroundColor: 'rgba(9, 24, 48, 0.5)',
      borderColor: 'rgba(255,255,255,0.4)',
      textStyle: {
         color: '#fff',
         align: 'left',
         textAlign: 'left'
      },
      borderWidth: 1,
      formatter: function (params) {
         let item = '';
         item += params[0].name;
         $(params[1]).each(function (idx, itm) {
            item += '<span style="margin-left:8px;color:#ffffff ">' + itm.value + '条</span>';
         });
         return item;
      }
   },
   yAxis: [
      {
         name: '(条)',
         nameTextStyle: {
            color: 'white',
            fontSize: 12,
            padding: [0, 0, 0, -30]
         },
         type: 'value',
         min: 0,
         minInterval: 1,
         splitArea: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.15)'
            }
         },
         axisLabel: {
            fontSize: 12,
            color: '#fff'
         }
      }
   ],
   series: [
      {
         type: 'custom',
         renderItem: function (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: '#0f459b'
                     }
                  },
                  {
                     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: '#0f459b'
                     }
                  },
                  {
                     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: '#0f459b'
                     }
                  }
               ]
            };
         },
         data: bgData
      },
      {
         type: 'custom',
         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: '#135df4'
                           },
                           {
                              offset: 1,
                              color: '#54defb'
                           }
                        ])
                     }
                  },
                  {
                     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: '#135df4'
                           },
                           {
                              offset: 1,
                              color: '#54defb'
                           }
                        ])
                     }
                  },
                  {
                     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: '#135df4'
                           },
                           {
                              offset: 1,
                              color: '#135df4'
                           }
                        ])
                     }
                  }
               ]
            };
         },
         data: VALUE
      },
      {
         type: 'bar',
         itemStyle: {
            color: 'transparent'
         },
         data: bgData
      }
   ],
   dataZoom: [
      {
         xAxisIndex: 0, // 这里是从X轴的0刻度开始
         show: false, // 是否显示滑动条，不影响使用
         type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 6 // 展示到第几个。
      }
   ]
};

setInterval(() => {
   if (option.dataZoom[0].endValue >= VALUE.length - 1) {
      option.dataZoom[0].endValue = 3
      option.dataZoom[0].startValue = 0
   } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
   }
   myChart.setOption(option)
}, 4000)