ECharts开发入门

ECharts开发

一、背景

为了更好的展现数据，采用图表的方式，更加清晰的看出数据与数据之间的关系

二、步骤

1、Echarts简介:

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

 

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

2、创建一个简单的饼图

1）到ECharts官网下载所需的依赖文件，

网址为：http://echarts.baidu.com/download.html

2）创建jsp页面，并添加script标签根据路径引入依赖文件，添加div标签，标签需要添加id属性

...

 <div id="main" style="width:600px;height:400px"> </div>

3）初始化

var mychart = echarts.init(document.getElementById('main'));

4）创建饼图

....

 <script type="text/javascript">
        var mychart = echarts.init(document.getElementById('main'));
        var option = {
            title:{
                text:'ECharts测试'
            },
            tooltip:{
                formatter:'{a}<br/>{b}:{c}({d}%)'
            },
            series:{
                type:"pie",
                data:[
                          {value:100,name:'西凉'},
                         {value:200,name:'北荒'},
                      ]
            }
        };
        mychart.setOption(option);
    </script>

..

5）这样一个简单的饼图就创建好了，如果还需要修改，参照下api和实例就可以实现各种各样的图的创建及多样的效果。

api网址：http://echarts.baidu.com/api.html#echarts

实例网址：http://echarts.baidu.com/examples.html

api里面有所有的参数的说明对应意义和取值，实例里有各种图的创建

三、小结

ECharts语法相对固定，不过许多细节需要注意，比如说赋值用“：”，每句结束用“，”最后一句可以不写。前面如果少了逗号会导致整个结果出不来。总的来说它的多变性很强，可以实现多样图形的创建，还可以设置各式各样的特效。