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 就无法显示了，同时，这时注册事件时，就不会成功。

echarts 总结

标签：

原文地址：http://www.cnblogs.com/a-ray-of-sunshine/p/5213915.html