Echarts是一个图表插件,可以用在做一些统计图
如:折线图
还有柱状图
我们在工作中有时会用到图表来展示数据
我们一起来学学echarts这个图表插件吧^_^
第一步:下载插件包
下载地址:http://echarts.baidu.com/index.html
下载好后,我们就来开始使用这个插件了
第二步:创建html文档并引入插件的文件
第三步:创建容器,并设置高度
第四步:在新建一个script用来写js代码
第五步:配置文件包的路径(因为后面要使用包里的东西,所以需要先设置路径)
现在不用知道每个函数的意思,只需要知道这段代码是用来设置路径的,因为后面要使用dist里的文件
第六步:开始制作
先写一个require({});将代码都写到里面
第七步:使用统计图类型文件,我们现在做的柱状图,我们需要引入bar文件
第八步:初始化容器
第九步:初始化图表内容
第十步:是否开启气泡提示框
第十一步:数据和图形是否关联
第十二步:x轴数据
第十三步:y轴数据
第十四步:显示的数据
第十五步:为容器加载数据
显示结果
在头部加上编码就可以了
好啦,柱状图你会了么?^_^
如果想以折线图显示的话就将bar改成line就可以了,有两处要改
折线图就出来啦^_^,挺好用的吧,要以其他的显示也是一样的
还有其他的图,可以去官网http://echarts.baidu.com/index.html了解更多
折线图:line
柱状图:bar
散点图:scatter
K线图:k
饼图:pie
雷达图:radar
和弦图:chord
力导向布局图:force
地图:map
仪表盘:gauge
漏斗图:funnel
事件河流图:eventRiver
好了,希望大家能用echarts来制作统计图,^_^
时间: 2024-11-10 14:09:18