Echarts的使用、封装以及关于Echarts2.x与Echarts3.x性能方面的一些疑问

Echarts的使用方法

Echarts现在使用较多的是2.x系列和3.x系列，两个系列的存在一些差异，首先在引入方式上

-Echarts2.x的使用方法
       Echarts2.x更加强调模块化，因此在引入时官方推荐使用模块化包引入，引入方式也很简单：

require.config(        {            paths: './dist'        }      );

-Echarts3.x的使用方法
       ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<header>    <meta charset="utf-8">    <!-- 引入 ECharts 文件 -->    <script src="echarts.min.js"></script></header>

Echarts封装(包括一些样式的定制)

因为项目主要绘制的折线图，因此在此方法的封装也主要是以封装折线图为例，其他的同理咯
nitrite.js

/** * Created by vickay on 16/5/30. * @param xData                             X轴显示的数据 * @param yData                             Y轴显示的数据 * @param chartName                         图表的名称 */function initNitrite(xData,yData,chartName) {    //Echarts路径配置    require.config({        paths:{            echarts:'./dist'            //引入Echarts        }    });    //使用Echarts    require(        [            'echarts',            'echarts/chart/line'        //加载线形图        ],    //封装的方法        function (ec) {            //初始化echarts图表            var myChart = ec.init(document.getElementById('main'));            //配置option,传递的函数分别为x轴的数据，            option = getDataToLine(xdata,json,chartName);            //显示图形            myChart.setOption(option);            //调用屏幕自适应的方法            adaptionWindows(myChart);        }    );}//获取option数据function getDataToLine(xData,yData,chartTitle) {    var option = {        title:{            text: chartTitle,            x:'left',            //标题内间距为8px            padding:8,            //标题字体样式            textStyle: {                //字体正常                fontWeight: 'normal',                //字体颜色                color: '#3acea9'            }        },        //鼠标悬浮时的提示框,设置指示不显示        tooltip: {            show:false,        },        //绘制网格        grid:{            x: '20px',            y: '30px',            x2: '20px',            y2: '30px',            //设置网格边框宽度为0            borderWidth:0        },        //工具箱 ,设置为不显示        toolbox:{            show:false        },        //X轴数据        xAxis: [{            type: 'category',            //坐标轴文本标签            axisLabel:{                show:true,                textStyle:{                    fontWeight: 'normal',                    color: '#a0a0a0'                }            },            //坐标轴线，默认显示             axisLine:{                show:false            },            //坐标轴小标记，数值轴和时间轴默认不显示，类目轴默认显示            axisTick:{                show:false            },            //分隔线，默认显示            splitLine:{                show:false            },            boundaryGap: false,            //x轴数据            data:xData        }],        //Y轴数据        yAxis: [{            type: 'value',            scale:true,            //小数精度            precision:1,            //分割段数,默认为5段，在此修改为4段            splitNumber:4,            boundaryGap:[0.01,0.01],            axisLine:{                show:false            },            axisLabel: {                show:false            },            splitLine:{                show:true,                lineStyle:{                //虚线                    type: 'dotted',                    //虚线颜色                    color:['#c4c4c4','#fbe237','#fa8d19','#f94220'],                    //宽度                    width:1.5                }            }        }],        series: [{            name:'最大检测值',            type:'line',            color:'#40E0D0',            //数据显示点为空心圆            symbol:'emptyCircle',            //禁止缩放(移动端)            roam:false,            itemStyle:{                normal:{                    lineStyle:{                        color:'#3acea9',                        width:1.5                    },                    label:{                        show:true                    }                }            },            data:yData        }]    };    return option;}

common.js

/** * Echarts自适应屏幕 * @param chartName */function adaptionWindows(chartName) {    window.addEventListener('resize',function () {        chartName.resize();    });}

html中使用

<!--单文件引入-->        <script src="./dist/nitrite.js" type="text/javascript"></script>        <script>            xdata = ['15','2','3','4','5','6','7'];            yData = ['10','2','3','4','65','33','32'];            initNitrite(xdata,yData,'亚硝酸盐');        </script>

Echarts3.x中封装方法类似，具体方法如何封装更能使用需求，视项目而定！！！

关于Echarts2.x与Echarts3.x性能方面的一些疑问？

前面做的项目，一个h5页面，放了11个折线图，在PC和iOS上显示流畅，但是Android4.4以下的系统会出现卡克的问题，一些动画关闭之后还是会出现，然后使用3.X做了下测试，反而比2.X性能更低一些？源码还未来得及看，但是为啥呢？请各位大神指教！交流。。。

/**
*　　　　　　　　┏┓　　　┏┓+ +
*　　　　　　　┏┛┻━━━┛┻┓ + +
*　　　　　　　┃　　　　　　　┃ 　
*　　　　　　　┃　　　━　　　┃ ++ + + +
*　　　　　　 ████━████ ┃+
*　　　　　　　┃　　　　　　　┃ +
*　　　　　　　┃　　　┻　　　┃
*　　　　　　　┃　　　　　　　┃ + +
*　　　　　　　┗━┓　　　┏━┛
*　　　　　　　　　┃　　　┃　　　　　　　　　　　
*　　　　　　　　　┃　　　┃ + + + +
*　　　　　　　　　┃　　　┃　　　　Code is far away from bug with the animal protecting　　　　　　　
*　　　　　　　　　┃　　　┃ + 　　　　神兽保佑,代码无bug,大神勿喷，请多指点
*　　　　　　　　　┃　　　┃
*　　　　　　　　　┃　　　┃　　+　　　　　　　　　
*　　　　　　　　　┃　 　　┗━━━┓ + +
*　　　　　　　　　┃ 　　　　　　　┣┓
*　　　　　　　　　┃ 　　　　　　　┏┛
*　　　　　　　　　┗┓┓┏━┳┓┏┛ + + + +
*　　　　　　　　　　┃┫┫　┃┫┫
*　　　　　　　　　　┗┻┛　┗┻┛+ + + +
*/