3D圆柱 柱状图

<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.6)"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div id="botRight" style="height: 250px; width: 100%"></div>
  </div>
</template>

<script>
// import { modelCount } from '@/api/gangtieApi/home.js';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      loading: false
    };
  },
  mounted() {
    this.botRightOption();
  },
  methods: {
    botRightOption() {
      let botRight = echarts.init(document.getElementById('botRight'));
      let option = {
        grid: {
          top: '25%',
          left: '8%',
          right: '4%',
          bottom: '6%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        animation: false,
        xAxis: {
          type: 'category',
          data: ['长期预测模型', '短期预测模型'],
          axisLine: {
            show: false
          },
          axisTick: {
            // 轴刻度
            show: false
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：(Kw.h)',
          nameTextStyle: {
            color: '#bbbbbb',
            fontSize: 12,
            padding: [0, 0, 10, 10] //name文字位置 对应 上右下左
          },
          splitLine: {
            // 网格线
            show: false
          },
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: '#073d56'
            }
          },
          axisLabel: {
            color: '#bbbbbb'
          }
        },
        series: [
          {
            name: '上部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [26, 10],
            symbolOffset: [0, -5],
            symbolPosition: 'end',
            z: 14,
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              fontWeight: 'bold',
              color: '#fff'
            },
            color: '#21F3FF',
            data: [100, 170, 192] //三个data都要赋值
          },
          {
            name: '底部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [26, 10],
            symbolOffset: [0, 5],
            z: 12,
            color: 'rgba(34,68,172,0.7)',
            data: [100, 170, 192]
          },

          {
            name: '数量',
            type: 'bar',
            barWidth: '26',
            barGap: '10%',
            barCateGoryGap: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#00B7FF '
                },
                {
                  offset: 1,
                  color: 'rgba(34,68,172,0.5)'
                }
              ]),
              opacity: 0.9
            },
            data: [100, 170, 192]
          }
        ]
      };
      option && botRight.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
#botRight {
  background-image: url('~@/assets/67.png'); //柱子底图
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-position-y: 180px;
  background-position-x: 44px;
}
</style>