echarts实现立体柱状图效果代码-html代码-BFW代码库

echarts实现立体柱状图效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现立体柱状图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>

  <style>
    #chart {
      width: 1000px;
      height: 600px;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    const myEcharts = echarts.init(document.getElementById('chart'));
    var xData = ["2020", "2021"];
    let colorData = [
      ['#87C53E', '#97D44F'],
      ['#40CDB9', '#2EAE9C'],
      ['#2CB8E6', '#0096C7'],
      ['#2C8CE6', '#1949BF'],
      ['#1949BF', '#2C61E6'],
      ['#341EA9', '#4829E4'],
      ['#6942B0', '#9162DE'],
      ['#9B40CA', '#BE5CDE'],
      ['#E18439', '#FFA127'],
      ['#DF9A37', '#FFC946'],
      ['#D2CB04', '#FFF95A'],
      ['#9FE04B', '#CAFF86']
    ]
    let obj = {
      '1月': [10, 11],
      '2月': [12, 13],
      '3月': [8, 10],
      '4月': [9, 14],
      '5月': [10, 17],
      '6月': [9, 13],
      '7月': [5, 12],
      '8月': [5, 12],
      '9月': [5, 12],
      '10月': [5, 12],
      '11月': [5, 12],
      '12月': [5, 12],
    }
    let testData = [];
    let seriesArr = [];
    for (let item in obj) {
      testData.push(item)
      seriesArr.push(obj[item])
    }
    let lastYear=0;
    let thisYear=0;
    seriesArr.map((i)=>{
        lastYear += parseInt(i[0]);
        thisYear += parseInt(i[1]);
    })
    let sumValue = [lastYear,thisYear];
    let option = {
      backgroundColor: "#1a2439", //背景色
      tooltip: {
        show: false,
      },
      textStyle: {
        color: "#C9C9C9",
      },
      color: ["#74AF2E", "#74AF2E", "#2EAE9C", "#0096C7", "#0279CD", "#1949BF", "#1949BF", '#6942B0', '#9B40CA',
        '#E18439', '#DF9A37', '#D2CB04', '#9FE04B', '#9FE04B'
      ],
      legend: {
        type: "scroll",
        orient: 'vertical',
        selectedMode: false, //图例点击失效
        right: "10%",
        top: "15%",
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
      },
      grid: {
        containLabel: true,
        left: "10%",
        top: "20%",
        bottom: "10%",
        right: "30%",
      },
      xAxis: {
        type: "category",
        data: xData,
        axisLine: {
          show: false,
          lineStyle: {
            color: "#B5B5B5",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 20, //刻度标签与轴线之间的距离。
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#18BBFF",
          },
          fontSize: 16,
          font.........完整代码请登录后点击上方下载按钮下载查看