ECharts.js学习（一）简单入门

傷城~ 2021-09-15 03:22 409阅读 0赞

# EChart.js 简单入门 #

最近有一个统计的项目要做，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。

MSChart

这个是Visual Studio里的自带控件，使用比较简单，不过数据这块需要在后台绑定。

ichartjs

是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。

Chart.js

也是一款基于HTML5的图形库和ichartjs整体类似。不过Chart.js的教程文档没有ichartjs的详细。不过感觉在对于移动的适配上感觉比ichartjs要好一点。

ECharts.js

这是我准备在这个项目中使用的图形库，这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 3；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。

官网：[ECharts.js][]

下面来简单说明一下EChart.js的使用。

## 第一步，引用Js文件 ##

js文件有几个版本，可以根据实际需要引用需要的版本。[下载链接][Link 1]

## 第二步，准备一个放图表的容器 ##

## 第三步，设置参数，初始化图表 ##

![复制代码][copycode.gif]

![复制代码][copycode.gif]

这样简单的一个统计图表就出来了，官网使用的柱状图，我这边改用了折线图。

![1115941-20170306173912547-1217524253.png][]

柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为"bar"

![1115941-20170306174047000-1106622145.png][]

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

![复制代码][copycode.gif]

var option = {
                title:{
                    text:'ECharts 数据统计'
                },            
                series:[{
                    name:'访问量',
                    type:'pie',    
                    radius:'60%', 
                    data:[
                        {value:500,name:'Android'},
                        {value:200,name:'IOS'},
                        {value:360,name:'PC'},
                        {value:100,name:'Ohter'}
                    ]
                }]
            };

![复制代码][copycode.gif]

![1115941-20170306180315484-1429013146.png][]

[ECharts.js]: http://echarts.baidu.com/
[Link 1]: http://echarts.baidu.com/download.html
[copycode.gif]: /images/20210724/eec992a2c83944ad8d3ab76f440a5625.png
[1115941-20170306173912547-1217524253.png]: /images/20210724/380a325c51074a95b7b9463dc84eb6ea.png
[1115941-20170306174047000-1106622145.png]: /images/20210724/0b368041f48543a087822f3f89a4cb4e.png
[1115941-20170306180315484-1429013146.png]: /images/20210724/8d47397306af4b8b9255914bfe46e92e.png