3D柱状图

直接上代码

/*
 * @Autor: 一个帅小伙
 * @Version: 1.0
 * @Date: 2019-10-08 09:27:17
 * @LastEditors: 一个帅小伙
 * @LastEditTime: 2019-10-11 18:07:52
 * @Description: 图表组件
 */
<template>
  <div id="outputValueChart" class="subChart">
    <Charts class="charts-detail" ref="Charts" :option="options"></Charts>
    <div class="remarks x-border">
      <p>计划产值</p>
      <p>实际产值</p>
      <p>实际成本</p>
    </div>
    <div class="explain">
      <dl>
        <dd>
          <span class="number number1">105.17</span>
          亿
        </dd>
        <dt>收入</dt>
      </dl>
      <dl>
        <dd>
          <span class="number number2">9.22</span>          亿
        </dd>
        <dt>经营性净现金流</dt>
      </dl>
      <dl>
        <dd>
          <span class="number number3">4.84</span>          亿
        </dd>
        <dt>利润总额</dt>
      </dl>
    </div>
    <!-- <div
      v-if="!this.subChartData.length"
      class="flex align-center justify-center"
      style="margin-top:200px;color: #fff;"
    >暂无数据</div>-->
  </div>
</template>

<script>
import Charts from "#/assets/js/Charts";
export default {
  name: "outputValueChart",
  components: {
    Charts
  },
  props: {},
  data() {
    return {
      $echart: null,
      subChartData: [160, 102.13, 98.79],
      options: {},
      barStyle: {
        width: 40,
        shadowWidth: 80,
        inclination: 20, //横截面的倾斜度
        color: ["#59cb42", "#3cefff", "#FFE362"]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    initCharts(options) {
      this.$echart = this.$refs["Charts"].getECharts();
      let data = [
        {
          value: this.subChartData[0],
          itemStyle: {
            color: this.barStyle.color[0]
          }
        },
        {
          value: this.subChartData[1],
          itemStyle: {
            color: this.barStyle.color[1]
          }
        },
        {
          value: this.subChartData[2],
          itemStyle: {
            color: this.barStyle.color[2]
          }
        }
      ];
      let symbolSize = [this.barStyle.width, this.barStyle.inclination];
      this.options = {
        grid: {
          top: "35%",
          left: "-9%",
          bottom: "15%",
          right: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["累计", "当月", "哪个"],
            nameTextStyle: {
              color: "#82b0ec"
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#6995aa"
              },
              onZero: true
            },
            axisLabel: {
              show: false,
              fontSize: 14,
              color: "#fff"
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dotted",
                color: "#1978D9"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            show: false,
            axisLabel: {
              textStyle: {
                color: "#82b0ec"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#0c2c5a"
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            //柱子上边的横截面
            name: "",
            type: "pictorialBar",
            symbolSize: symbolSize,
            symbolOffset: [0, -10],
            symbolPosition: "end",
            z: 12,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}亿"
              }
            },
            data: data
          },
          {
            //柱子下边的横截面
            name: "",
            type: "pictorialBar",
            symbolSize: [this.barStyle.width, this.barStyle.inclination],
            symbolOffset: [0, 10],
            z: 12,
            data: data
          },
          {
            //下面的花瓣
            name: "",
            type: "pictorialBar",
            symbolSize: [this.barStyle.shadowWidth, this.barStyle.inclination],
            symbolOffset: [0, this.barStyle.inclination],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#14b1eb",
                borderType: "dashed",
                borderWidth: 0
              }
            },
            data: this.subChartData
          },
          {
            //柱体透明度
            type: "bar",
            itemStyle: {
              normal: {
                //color: '#14b1eb',
                opacity: 0.85
              }
            },
            //silent: true,
            barWidth: this.barStyle.width,
            //barGap: '-100%', // Make series be overlap
            data: data
          }
        ]
      };
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#outputValueChart {
  .x-border {
    width: calc(100% - 0px);
    margin: 2 0px;
    padding-top: 2px;
    border-top: 1px solid rgba(149, 165, 221, 0.6);
    display: flex;
    p {
      flex: 1;
      font-size: 10px;
      text-align: center;
    }
  }
  .explain {
    display: flex;
    margin-top: 10px;
    dl {
      flex: 1;

      text-align: center;
      dd {
        font-size: 13px;
      }
      dt {
        font-size: 11px;
      }
    }
    span.number {
      font-weight: bold;
      font-size: 16px;
    }
    span.number1 {
      color: rgba(106, 208, 254, 1);
    }
    span.number2 {
      color: #ffe362;
    }
    span.number3 {
      color: #76d0df;
    }
  }
}
</style>