echarts创建图表

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