vue3+echarts 立体柱状效果

最新推荐文章于 2025-04-30 16:51:17 发布

璇璇吴

最新推荐文章于 2025-04-30 16:51:17 发布

阅读量759

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_70027586/article/details/135023343

版权

本文展示了如何在Vue3项目中使用ECharts库创建一个带有立体效果的柱状图，提供了一个详细的代码片段，包括配置选项和在组件中初始化图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3+echarts 立体柱状效果

废话不多说，直接上代码就两步，直接复制粘贴一手

 <div id="main" class="chart" ref="chartDom"></div>

import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('main');
var option: EChartsOption;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['天', '大', '1', '2', '3'],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        color: '#ffffff',
        fontSize: 16
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      interval: 20,
      axisLabel: {
        color: '#ffffff',
        fontSize: 16
      }
    },

  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      data: [20, 42, 36, 50, 53],
      barGap: 0,
      barWidth: 13,
      label: {
        normal: {
          show: false,
          position: "insideRight"
        }
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#8c40dc' },     //柱状图从左向右颜色渐变
              { offset: 1, color: '#1e2a4c' }
            ]
          ),
        }
      },
    },
    {
      name: 'Direct',
      type: 'bar',
      barWidth: 16,
      data: [20, 42, 36, 50, 53],
      tooltip: {
        show: false
      },
      label: {
        normal: {
          show: false,
          position: "insideRight"
        }
      },
      itemStyle: {
        normal: {
          color: "#502f92"
        }
      },
    }, {
      name: 'Direct',
      barWidth: 22,
      data: [20, 42, 36, 50, 53],
      type: "pictorialBar", // 长方体顶部四边形
      symbol: 'diamond',
      symbolRotate: 0,
      symbolSize: ['28', '10'],
      symbolOffset: ['0', '-5'],
      symbolPosition: 'end',
      z: 3, // 顶部四边形
      tooltip: {
        show: false
      },
      label: {
        normal: {
          show: false,
          position: "insideRight"
        }
      },
      itemStyle: {
        normal: {
          color: "#761c9a"
        }
      },
    },

  ]
};
onMounted(() => {
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
})