码迷,mamicode.com
首页 > 其他好文 > 详细

echarts创建图表

时间:2015-04-27 18:10:47      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

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来制作统计图,^_^

 

 

echarts创建图表

标签:

原文地址:http://www.cnblogs.com/kPedestrian/p/4460797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!