Echarts在线免费图表

 
            // 如需要调整宽度需要调整三个面的数值
// 左侧面
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 - 9, shape.y - 6]; //左侧面左上角
      const c2 = [xAxisPoint[0] - 9, 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] + 9, xAxisPoint[1] - 6]; //右侧面右下
      const c4 = [shape.x + 9, 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 + 9, shape.y - 6]; // 右
      const c3 = [shape.x, shape.y - 12]; // 上
      const c4 = [shape.x - 9, 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);
const xData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];

option = {
   backgroundColor: '#011d39',
   grid: {
      left: "3%",
      right: "2%",
      bottom: "10",
      top: "10%",
      containLabel: true,
   },
   xAxis: {
      type: "category",
      data: xData, //数据

      minInterval: 1,
      axisLabel: {
         color: "#E6F7FF",
         interval: 0, // 强制显示坐标轴标签
      },
      axisLine: {
         lineStyle: {
            color: "#E6F7FF",
         },
      },
      axisTick: false,
   },
   yAxis: {
      name: '单位：元/MWh',
      nameTextStyle: {
         color: "#E6F7FF",
      },
      type: "value",
      axisLine: {
         //坐标轴样式
         show: false, //不显示
      },
      axisLabel: {
         color: "#E6F7FF",
      },
      splitLine: {
         //分隔辅助线
         lineStyle: {
            type: "dashed", //线的类型 虚线0
            opacity: 0.2, //透明度
         },
      },
   },
   series: [
      {
         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: "rgba(144, 184, 248,0.5)",
                           },
                           {
                              offset: 0.4,
                              color: "rgba(144, 184, 248,0.3)",
                           },
                           {
                              offset: 1,
                              color: "rgba(144, 184, 248,0)",
                           },
                        ]),
                     },
                  },
                  {
                     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(144, 184, 248,1)",
                           },
                           {
                              offset: 0.5,
                              color: "rgba(144, 184, 248,0.5)",
                           },
                           {
                              offset: 1,
                              color: "rgba(144, 184, 248,0)",
                           },
                        ]),
                     },
                  },
                  {
                     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: "rgb(144, 184, 248)",
                     },
                  },
               ],
            };
         },
         data: [115, 135, 125, 135, 185, 165, 175, 165, 145, 115, 105, 175],
      },
   ],
};