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

在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在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文件里面也可以找到这个配置


package.json

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

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


引入相关依赖

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


写一个dom元素装echarts实例

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


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


实例一个echarts

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


贴上最后的效果图:


效果图

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,126评论 2 59
  • 前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在...
    Mr_Treasure阅读 165,694评论 8 44
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,539评论 25 709
  • 城市的灯火已经褪去了白日的喧嚣,慢慢回归了静谧。白天里的车如流水马如龙的拥挤,也已经如风般散去,仿佛不曾来...
    钱小闲阅读 312评论 0 1