echarts 总结

Echarts

1. Echarts 相关文档

0.1 官网

http://echarts.baidu.com

0.2 配置项

http://echarts.baidu.com/option.html

0.3 API

http://echarts.baidu.com/api.html

1. 一些经常使用的配置项

2.1   title 设置图表的标题

2.2   tooltip 图表上的提示框

其中，有一个formatter配置项，能够配置显示的内容，具体的配置方法，参考上面的文档

2.3   legend 图例

其中的 data 的配置，每一项表明一个系列（series）的 name,name必须彻底相同

2.4   toolbox 五种类型的工具

导出图片，数据视图，动态类型切换，数据区域缩放，重置

2.5   grid 网格

直角坐标系内绘图网格，单个 grid 内最多能够放置上下两个 X 轴，左右两个 Y 轴。能够在网格上绘制折线图，柱状图，散点图（气泡图）。

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中能够存在任意个 grid 组件。

2.6   xAxis  x轴

直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。

关键属性：

Type: 坐标轴类型。

Position: 坐标轴所在的位置，

2.7   yAxis  y轴

直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。

2.8   series  系列列表。

每一个系列经过 type 决定本身的图表类型，不一样的图表类型，其配置项也有所不一样，具体的配置项，参考文档：http://echarts.baidu.com/option.html#series

1. 3.       echarts 中的几个重要对象及实例化过程

3.1   echarts 对象

全局 echarts 对象，在 script 标签引入 echarts.js 文件后得到。

经常使用的方法：init

echarts.init:  建立一个 ECharts 示例，返回echartsInstance，不能再单个容器上初始化多个 ECharts 实例。

 

3.2   echartsInstance 对象

经过 echarts.init建立的实例。

   经常使用方法：setOption

方法签名：

 

方法做用：

设置图表实例的配置项以及数据，万能接口，全部参数和数据的修改均可以经过setOption完成，ECharts 会合并新的参数和数据，而后刷新图表。若是开启动画的话，ECharts 找到两组数据之间的差别而后经过合适的动画去表现数据的变化。

参数含义：

1. option

图表的配置项和数据，具体见配置项手册。

1. notMerge

可选，是否不跟以前设置的option进行合并，默认为false，即合并。

1. notRefreshImmediately

可选，在设置完option后是否不当即刷新画布，默认为false，即当即刷新。

1. echarts3 中地图的使用

echarts3 的js 实现中并无将地图数据集成进去，因此当使用地图时须要，单独引入地图数据，地图数据的下载：http://echarts.baidu.com/download-map.html

引入地图的代码：

<script src="echarts.js"></script>

<!—引入地图数据 –>

<script src="china.js"></script>

<script>

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

chart.setOption({

    series: [{

        type: 'map',

        map: 'china'

    }]

});

</script>

1. echarts 特性

echarts 的配置项很是多，很是灵活，须要注意的是，在某些状况下，大多数配置项都是可选的，可是，有些配置项则是必须的，然而， echarts 在某些必须缺失的状况下，仍然可以将图表显示出来，此时就会出现一些问题，例如，注册事件不会成功，这些问题很是隐蔽，找起来很是麻烦，因此必定要注意。例如：当series 是 map 的的时候，若是，其 data 字段没有值，地图仍然会正常显示，可是tooltip 就没法显示了，同时，这时注册事件时，就不会成功。