前端基于Echarts实现3D柱状图

const setZcqChart = () => {
  let xData = [];
  let amountData = [];
  let priceData = [];
  for (let i = 1; i <= 12; i++) {
    xData.push(  i +'月');
    amountData.push(Math.floor(Math.random() * 50))
    priceData.push(Math.floor(Math.random() * 50))
  }
  let option = {
    grid: {
      left: '6%',
      right: '2%',
      bottom: '0%',
      top: '20%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
          backgroundColor: itemColor[1],
        },
      },
      backgroundColor: 'rgba(0,0,0,.5)',
      padding: [5, 10],
      textStyle: {
        color: itemColor[1],
      }

    },
    legend: {
      icon: "rect",
      top: "0%",
      // right: "left",
      left: 'center',
      right: 10,
      itemWidth: 10,
      itemHeight: 4,
      itemGap: 20,
      textStyle: {
        color: itemColor[0],
        fontSize: fontSize(12)
      }
    },
    xAxis: {
      name: '',
      nameTextStyle: {
        color: itemColor[0],
        fontSize: fontSize(12),
      },
      splitLine: {
        show: false,
        interval: 'auto',
        lineStyle: {
          color: ['rgba(22, 51, 85, 0.2)']
        }
      },
      axisTick: {
        show: false,
        interval: 'auto'
      },
      axisLine: {
        lineStyle: {
          color: itemColor[0]
        }
      },
      axisLabel: {
        showLabel: true,
        fontSize: fontSize(12),
        color: itemColor[0],
        // interval: 0, //使x轴文字显示全
      },
      data: xData
    },
    yAxis: [
      {
        name: '亿千瓦时',
        nameTextStyle: {
          color: itemColor[0],
          fontSize: fontSize(12),
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: ['rgba(142,164,207,0.2)']
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: itemColor[0],
          }
        },
        axisLabel: {
          margin: 3,
          fontSize: fontSize(12),
          color: itemColor[0]
        }
      },
      {
        name: '元/MWh',
        nameTextStyle: {
          color: itemColor[0],
          fontSize: fontSize(12),
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: ['rgba(142,164,207,0.2)']
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: itemColor[0],
          }
        },
        axisLabel: {
          margin: 3,
          fontSize: fontSize(12),
          color: itemColor[0]
        }
      },
    ],
    series: [
      {
        name: "中长期电量",
        type: "bar",
        data: amountData,
        barWidth: 10,
        showAllSymbol: true,
        symbolSize: 1,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0FA0FF',
              },
              {
                offset: 1,
                color: '#24F3FF',
              },
            ],
          },
          /* itemStyle: {
          color: new proxy.$echarts.graphic.LinearGradient(
              0, 0, 1, 1,
              [
                {offset: 0, color: colorList[0]},
                {offset: 1, color: 'transparent'}
              ]
          ),
        },*/
        },
      },
      {
        data: amountData,
        type: 'pictorialBar',
        barMaxWidth: '10',
        symbolPosition: 'end',
        symbol: 'diamond',
        symbolOffset: [0, '-50%'],
        symbolSize: [10, 5],
        zlevel: 1,
      },
      {
        name: "中长期电价",
        type: "line",
        yAxisIndex: 1,
        data: priceData,
        showAllSymbol: true,
        symbolSize: 1,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color:colorList[1]
        },
      /*  areaStyle: {
          color: new proxy.$echarts.graphic.LinearGradient(
              0, 0, 1, 1,
              [
                {offset: 0, color: colorList[1]},
                {offset: 1, color: 'transparent'}
              ]
          ),
        },*/
      }
    ]
  };
  zcqOption.value = option;
};