echarts绘制立体柱状图

最新推荐文章于 2024-09-04 19:52:59 发布

揣手手了

最新推荐文章于 2024-09-04 19:52:59 发布

阅读量7k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_43412413/article/details/103718085

版权

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

摘要由CSDN通过智能技术生成

效果图：

立体柱状图

<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' // 默认为直