echarts绘制立体柱状图

最新推荐文章于 2025-10-28 16:20:43 发布

原创

最新推荐文章于 2025-10-28 16:20:43 发布 · 7.2k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍如何利用Echarts库绘制出立体感的柱状图，结合提供的效果图，展示了具体实现过程。参考文章详细阐述了相关步骤。

效果图：

立体柱状图

<template>
  <div class="app_rank">
    <div id="echart_box"></div>
  </div>
</template>

<script>
export default {
  name: 'carRank',
  components: {
  },
  data () {
    return {
      img: require('../../assets/zhuzi.png'),
      img_0: require('../../assets/zhuzi_01.png')
    }
  },
  mounted () {
    this.initEchart();
  },
  methods: {
    initEchart () {
      const chartMonth = this.$echarts.init(document.getElementById('echart_box'));
      chartMonth.clear();
      chartMonth.showLoading();

      let option = {
        color: ['#bb0004', '#FFD48A'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return params[0].name

最低0.47元/天解锁文章