立体柱状图（echarts 和手绘）

本文链接：https://blog.csdn.net/moxinxueweb/article/details/125631300

手绘柱状图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NNEKtNg-1657042329655)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220706012806127.png)]$

封装的组件

<template>
  <div class="chartwrite">
    <div class="liodBox">
      <div class="liod_ul" v-for="(item, index) in list" :key="index" :style="{width: `${100/list.length}%`}">
        <div class="liodnumber" :style="{bottom: `calc(${(item.num/800)*100}% + 5px)`}">
          {{item.num}}
        </div>
        <div class="liod" v-if=" item.num > 0" :style="{height: `${(item.num/800)*100}%`}">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="bottom_text">{{item.name}}</div>
      </div>
    </div>
    <div class="bottom_bg"></div>
  </div>
</template>

<script>
export default {
  name: "barList",
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      percentage: 50
    };
  }

};
</script>

<style lang='less' scoped>
.chartwrite {
  width: 100%;
  height: 100%;
  position: relative;
  .liodBox {
    width: 94%;
    height: 50%;
    position: absolute;
    left: 3%;
    bottom: 45px;
    display: flex;
    justify-content: space-around;
    z-index: 2;
    .liod_ul {
      position: relative;
      width: 25%;
      height: 100%;
      .liodnumber {
        width: 100%;
        position: absolute;
        text-align: center;
        font-size: 12px;
        color: #000;
        text-indent: 5px;
      }
      .liod {
        width: 30px;
        height: 0;
        margin-left: -15px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transition: 0.5s;
        display: block;
        div:nth-child(1) {
          width: 18px;
          height: 6px;
          position: absolute;
          top: 5px;
          left: 3px;
          color: #000;
          background: #99390c;
          transform: skewX(-45deg);
        }
        div:nth-child(2) {
          width: 6px;
          height: 100%;
          position: absolute;
          top: 8px;
          left: 18px;
          background: #99390c;
          transform: skewY(-45deg);
          filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5));
        }
        div:nth-child(3) {
          width: 18px;
          height: 100%;
          position: absolute;
          top: 10px;
          background: #e67845;
        }
      }
      .bottom_text {
        font-size: 12px;
        width: 100%;
        color: #000;
        text-align: center;
        position: absolute;
        bottom: -40px;
      }
    }
  }
  .bottom_bg {
    width: 100%;
    height: 20px;
    background: #12226e;
    position: absolute;
    left: -1%;
    bottom: 26px;
    transform: skewX(-30deg);
  }
}
</style>

组件使用

<template>
  <div>
    <div class="contant">
    	<bar-list :list="ageList"></bar-list>
    </div>
  </div>
</template>
<script>

export default {
  components: {
    barList: () => import('./barList.vue')
  },
  data() {
    return {
      total: 0,
      list: [1,3,5,6,3,2,1,5,6,7,7,7,9,2,2,3 ],
      ageList: [
        {
          name: '小龙虾',
          num: 888
        },
        {
          name: '蛋挞',
          num: 567
        },
        {
          name: '包子',
          num: 783
        },
        {
          name: '奶茶',
          num: 666
        },
        {
          name: '榴莲披萨',
          num: 666
        },
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style scoped>
.contant {
  margin: 0 auto;
  width: 335px;
  height: 447px;
}
</style>

Echarts柱状图

效果：（可支持左右拖动）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EPjQ9IsJ-1657042329657)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220629171832631.png)]$

<template>
  <div>
    <div id="mainCahrts" style=" width: 500px; height: 400px; margin: 0 auto"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.echart_write()
  },
  methods: {
    echart_write() {
      let myChart = echarts.init(document.getElementById('mainCahrts'));
      const data = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 310, ];
      // 指定图表的配置项和数据
        var option = {
            roam: false, // 禁止滚轮事件
            tooltip: {
                show: false,
            },
            grid: {
                x: '0%', //距离左边
                x2: '0%', //距离右边
                y: '15%', // 上距离
                y2: '15%', // 下距离
            },
            xAxis: {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333333'
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#B6C1C4',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '27日', '28日', '29日', '30日', ]
            },
            yAxis: {
                show: false,
            },

            series: [{
                name: 'a',
                tooltip: {
                    show: false
                },
                data: data,

                type: 'bar',
                barWidth: 10,
                barGap: 200,
                barCategoryGap: 200,
                // 基准线
                markLine: {
                    silent: true, // 不响应鼠标事件
                    symbol: ['none', 'none'],
                    position: 'top',
                    label: {
                        show: false,
                    },
                    lineStyle: {
                        normal: {
                            color: '#D3D3D3' // 这儿设置安全基线颜色
                        }
                    },
                    data: [{
                        name: '平均线',
                        // 支持 'average', 'min', 'max'
                        type: 'average'
                    }, ],
                },
                label: {
                    show: true, // 柱子顶部的数值
                    position: 'top',
                    top: 0,
                    fontSize: 6,
                    offset: [0, -10],
                    formatter: function(params) {
                        let num = params.value;
                        if (num > 1024) {
                            return (num / 1024).toFixed(2) + 'GB'
                        } else if (num < 1024 && num > 0) {
                            return num.toFixed(2) + 'MB'
                        } else {
                            return '';
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#4729FB" // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: "#3077F7" // 50% 处的颜色
                        }, {
                            offset: 1,
                            color: "#1FB0F4" // 100% 处的颜色
                        }], false)
                    }
                },
                // barGap: 0
            }, {
                type: 'bar',
                barWidth: 4,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#235DFF" // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: "#59ACF7" // 50% 处的颜色
                        }, {
                            offset: 1,
                            color: "#71CAFF" // 100% 处的颜色
                        }], false)
                    }
                },
                barGap: 0,
                data: data.map(item => item + 4.5)
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 0,
                    borderColor: '#47A6FF',
                    color: '#1AC0F4',

                },
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['13', '3'],
                symbolOffset: ['-1', '-2'], // 左右 ，上下
                symbolRotate: 0,
                symbolPosition: 'end',
                data: data,
                z: 3
            }],

            // 可左右滑动
            dataZoom: [{
                show: false,
                realtime: true,
                start: 30,
                end: 50
            }, {
                type: 'inside',
                realtime: false,
                start: 30,
                end: 50,
                zoomOnMouseWheel: false, // 禁用滚轮
            }],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  }
}
</script>