HbuilderX制作Echarts图表教程

时间:2024-03-14 21:23:33

在网上翻了好久,都是零碎的教程,俺要出一个保姆级教程!
本文将从编辑器和echarts的下载开始教
Hbuilder X下载,进入官网https://www.dcloud.io/
HbuilderX制作Echarts图表教程
点击此处
HbuilderX制作Echarts图表教程
下载好了之后,解压打开文件夹,直接找到hbuilder.exe这个文件,双击。
这就是Hbuilder的方便之处,直接双击,不用一直next
打开之后选择hbuilderX的编辑模式
HbuilderX制作Echarts图表教程
然后点击左上角文件 新建项目
这时我们可以去下载echarts的文件
进入官网https://www.echartsjs.com/zh/download.html
HbuilderX制作Echarts图表教程
点击在线定制,可以勾选你想要的图
HbuilderX制作Echarts图表教程
最后几项根据自己的需求来,建议压缩(至少我压缩了后才能引用)
还有选择用其他方法的,我提一下下载方法
1.HbuilderX制作Echarts图表教程
HbuilderX制作Echarts图表教程
推荐这个压缩了的
HbuilderX制作Echarts图表教程
HbuilderX制作Echarts图表教程
2.下载源码的
HbuilderX制作Echarts图表教程
HbuilderX制作Echarts图表教程
不知道怎么下了吧?直接右键另存为!
把下载好了的文件粘贴复制到项目的js文件夹下即可
HbuilderX制作Echarts图表教程
关于怎么写代码可以查看官网教程,这里我不再赘述https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
其实主要步骤为4步

为 ECharts 准备一个具备高宽的 DOM 容器
初始化echarts实例
指定图表的配置项和数据
使用刚指定的配置项和数据显示图表