在vue项目中使用echarts制作3d柱状图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue项目中使用echarts制作3d柱状图相关的知识,希望对你有一定的参考价值。

参考技术A 在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图。

还请看我娓娓写来。

1、第一步当然还是进入你所在项目的文件夹。

2、第二步使用npm安装你所需要用到的组件,

》使用以下命令安装echarts组件

npm install echarts

》安装好echarts后,还需要安装echarts3d图形所需的组件,echarts-gl。使用以下命令安装即可。假设你不需要制作3D的图表,则不需要安装。

npm install echarts-gl

安装好了之后,你就可以在你的node_modules文件夹内找到echarts和echart-gl文件夹了。

而且在你的package.json文件里面也可以找到这个配置

那么echarts和我们需要的echarts-gl就安装好了,现在开始写demo啦

3.我们需要在页面的script中引用

4.写一个div装echarts实例吧。

5、给这个实例设置一个css样式,给它设置宽高,这一步很重要

6、实例出一个柱状图吧。

你可以写一个方法调用,你这个实例的方法,然后就可以看到效果了。具体的设置建议看echarts官网的这个GL的属性说明。

贴上最后的效果图:

好了,今天的文章就告一段落,如果您有好的建议,请在下方留言。欢迎订阅我们哦~

以上是关于在vue项目中使用echarts制作3d柱状图的主要内容,如果未能解决你的问题,请参考以下文章

在vue中 echarts 柱状图调后台接口

echarts 3D柱状图配置项

VUE中使用Echarts绘制柱状图

使用Echarts几分钟制作出折线图饼图柱状图等

在vue里面引入echarts(柱状图,饼图,折线图))

vue中echarts两组柱状图对比,可切换折线图、文本图并导出png