echarts3使用（插件类）

echarts 与 highcharts 区别

1、国内与国外

echarts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费；

highcharts是国外的一家公司开发的图表库，主要采用svg画图，不支持h5的浏览器采用vml绘制，2009 年发布第一版，目前版本6.0.3；

Highcharts 是国际知名的成熟的商业软件（也开源），商用要付费；

2、兼容性

Echarts：ie9+、Firefox、chrome、safari、opera等；
highcharts ：ie6+、Firefox、chrome、safari、opera等；

3、图表的丰富程度

Echarts：

1、图表类：支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、雷达图、树状图、象形柱图、关系图、瀑布流图等，形式多样，效果炫酷。

2、3D表现力：柱状图，三维地球，结合百度地图三维展示（效果绚丽）。

3、地图类：结合百度地图（迁徙图、热力图，散点图，交通图），效果酷炫。

Highcharts：

1、图表类：支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等。

2、3D表现力：柱状图，饼状图，气泡图。

3、地图类：2d线性地图（geojson数据）。

4、总结

Echarts：图标样式多样、支持2d和3d地图展示，效果炫酷；兼容性弱；完全免费。
Highcharts：稳定性强；兼容性强；图标样式相对少；比较专业；个人免费，商用收费。

echarts3 使用总结

一、前期准备

1、使用echarts之前先要引入echarts.js，js可以到官网下载
2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。
3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使用setoption生成图表。

setOption 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成；

echarts3自适应

var container = document.getElementById("pieDemo");
         var resizeContainer = function(){
                  container.style.width = window.innerWidth+"px";
                  container.style.height = window.innerHeight+"px";
        }
        resizeContainer();
        var pieChart = echarts.init(container);
        var pieOption = {
              相关配置
          };
          pieChart.setOption(pieOption);
          //自适应屏幕
          window.onresize = function(){
                 resizeContainer();
                 pieChart.resize();
          }

配置数组和配置项
option中最重要的配置项是series；
series中data 数据项中用name表示数据项名称， value表示单个数据项的数值；

下面整理了一下使用频率较高的配置（折线和饼图），具体配置看需求

频率较高的配置

echarts3自动刷新

setInterval(function(){
      option.series.data;
      myChart.setOption(option);
  },2000)

参考实例地址：http://gallery.echartsjs.com/editor.html?c=xr11L_RyBZ

根据echats版本，调用不同的方法

echats3
http://echarts.baidu.com/

echats2
http://echarts.baidu.com/echarts2/doc/example.html