生成ehcarts图表

Echarts呢,就是一个纯JavaScript的图表库,这个图表库里给我们提供了各种各样的图表,有常规图表折线图,柱状图,散点图,饼图,K线图,有用于统计的盒型图,有用于地理数据可视化的地图,热力图,还有关系数据可视化的关系图,还有用于BI的漏斗图,仪表盘等等这么多图表。所以呢,我们就来学习如何使用这个echarts,把这些绚丽灿烂的图表加入到我们页面中,让自己的作品更上一层楼。
在网站上下载好echarts3-docs后, 解压之后不要放在中文目录下,最好放在根目录下,比如D盘E盘F盘,也可以放在一个英文名字的文件夹下。
如果打开不了的话,来到echarts3-docs下面的conf这个文件夹,找到nginx这个文件,然后打开

在这里插入图片描述找到这个server,在listen这里更改注册端口号,注册端口可用端口号的范围为1024~49151,不要超过这个范围就行(端口号总数为2的16次方减一)。
更改了之后,怎么在我们的本地浏览器中打开呢?http://localhost:1234/echarts3-docs,localhost + 端口号 + 文件名 就能打开了。

在这里插入图片描述接下来,我们先来做一个装载我们的图表的容器

容器定好了之后,我们再来进行下一步的操作,在你的页面进行一个echarts的引用

echarts

这里是在头部进行了echarts的引用,当然,在body里面引用也是可以的,最好放在头部或者尾部的位置,防止和其它代码混在一起。
然后,就在script标签里写具体的配置项。
配置项里面的参数都是很好理解的,简单易懂,title就是标题,然后text具体文本,

这个生成的是一个最简单的一个柱状图了,
在这里插入图片描述
如果还不会,那就在多看几遍代码,看多几次自己再动手就能变得很好理解了,参数也不多,自己动手是学习必不可少的一步,在程序员这个行业,只有不断的学习自己才不会被淘汰,一旦你落后于别人,那你可能就要面临被淘汰的困境,所以请不要停止自己的脚步。

猜你喜欢

转载自blog.csdn.net/weixin_44541076/article/details/89977777