echarts3使用(插件类)

作者: 枫之伊信 | 来源:发表于2017-12-05 21:03 被阅读236次

    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生成图表。

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 引入echarts.js -->
    <script src="js/echarts.min.js "></script>
    <script>
    获取容器的id并赋值给变量myChart
    var myChart = echarts.init(document.getElementById('main'));
    /*用来配置参数*/
    option = {}
    /*调用option生成图表*/
    myChart.setOption(option)
    </script>

    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

    相关文章

      网友评论

        本文标题:echarts3使用(插件类)

        本文链接:https://www.haomeiwen.com/subject/uchhixtx.html