在vue项目中使用echarts制作3D效果柱状图

最新推荐文章于 2025-11-04 10:04:16 发布

原创

最新推荐文章于 2025-11-04 10:04:16 发布 · 3.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts #3d

在vue项目中使用echarts制作3D效果柱状图

1、第一步安装echarts组件。
npm install echarts
2、第二步安装好echarts后，安装echarts3d图形组件echarts-gl
npm install echarts-gl

如果package.json文件里面也可以找到这个配置，则安装成功
在这里插入图片描述
3.第三步在需要使用Echarts页面的script中附上以下代码

import * as echarts from 'echarts';
import 'echarts-gl';
require('echarts/lib/chart/bar.js');
require('echarts/lib/component/title.js');
require('echarts/lib/component/tooltip.js');

实例上代码！

<template>
  <div class="ChartAnalysis">
    <!-- 内容 -->
    <div id="main"></div>
  </div>
</template>

<script>

import * as echarts from 'echarts';
import 'echarts-gl';
require('echarts/lib/chart/bar.js');
require('echarts/lib/component/tooltip.js');
require('echarts/lib/component/title.js');

export default {
   
   
  name: "WaterMeter",