echarts简单实例+ $.extend()方法解析

来源：互联网发布：淘宝客服是怎么做的编辑：程序博客网时间：2024/06/13 10:38

简介
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

1.模块化单文件引入

<body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="height:400px"></div>    <!-- ECharts单文件引入 -->    <script type="text/javascript" src="${ctxStatic}/js/echarts/echarts.js" charset="utf-8"></script>    <script type="text/javascript"> // 路径配置require.config({    paths: {        echarts: '${ctxStatic}/js/echarts'    }});        // 使用require(    [        'echarts',        'echarts/chart/pie' // 使用饼状图就加载pie模块，按需加载    ],    function (ec) {        // 基于准备好的dom，初始化echarts图表        var myChart = ec.init(document.getElementById('main'));            option = {    title : {        text: '信访统计',        subtext: '按信访类别',        x:'center'    }    tooltip : {        trigger: 'item',        formatter: "{a} <br/>{b} : {c} ({d}%)"    },    series : [        {            name:'信访类别',            selectedMode: 'single',            type:'pie',            radius : '75%',            center: ['50%', '60%'],            data:[                {value:33, name:'求决'},                {value:16, name:'检举'},                {value:3, name:'建议'},                {value:0, name:'咨询'},                {value:1, name:'其他'}            ]        }    ]   };  });</script></body>

官方推荐使用此方法，因为可以按需加载js，但是发现option变量变成了局部，非动态加载。所以选择第二种标签加载

2.标签式单文件引入

<script type="text/javascript" src="${ctxStatic}/js/echarts/echarts-all.js" charset="utf-8"></script>

<div id="main" style="height:400px"></div>

datagrid异步加载form数据的时候顺便也加载图形数据，当然你可以用在使用其他异步加载数据的方法:如$.ajax 在onLoadSuccess、complete方法加载数据

function classDatagrid(){    $class_datagrid = $('#class_datagrid').datagrid({        url: ctx + '/petition/petition-info/class-datagrid',        fit:true,        pagination: false,//底部分页        rownumbers: true,//显示行数        fitColumns: false,//自适应列宽        striped: true,//显示条纹//      pageSize: 20,//每页记录数        singleSelect: true, //只能选中一行        remoteSort:false,//是否通过远程服务器对数据排序/*      sortName:'BAL_MONTH',//默认排序字段        sortOrder:'desc',//默认排序方式 'desc' 'asc' */        nowrap: true,        border: false,        columns: [ [            {field: 'class1',title: '求决',align: 'center', width: 146 } ,            {field: 'class2',title: '检举',align: 'center',width: 146 },            {field: 'class3', title: '建议',align: 'center', width: 146} ,            {field: 'class4', title: '咨询',align: 'center', width: 146},             {field: 'class5', title: '其他',align: 'center', width: 146}        ]],        onLoadSuccess: function (data) {        //alert(JSON.stringify(data));            retData = {           '信访类别' : []        };        var row0=data.rows[0];        retData["信访类别"].push({name : '求决',value : row0.class1});        retData["信访类别"].push({name : '检举',value : row0.class2});        retData["信访类别"].push({name : '建议',value : row0.class3});        retData["信访类别"].push({name : '咨询',value : row0.class4});        retData["信访类别"].push({name : '其他',value : row0.class5});   $.extend(classoption.series[0], {data : retData["信访类别"]});                   // 为echarts对象加载数据             myChart.setOption(classoption,true);         }     }).datagrid("showTooltip");}

所以echarts入门是非常简单的。具体的option方法可以查阅：http://echarts.baidu.com/doc/option.html
参考手册：可查阅http://echarts.baidu.com/doc/doc.html
例子：http://echarts.baidu.com/doc/example.html

3.上面的例子用到 $.extend()方法，这里顺便了解一下

$.extend()

因为项目中有些地方看到有用到这个方法，当时也不知道是什么意思，见的多了就想了

解一下。原来这个方法还是挺有用的，多用在编写插件，当然，它本身也有一些重载原型。

2.1 extend(result,item1,item2…..)

这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这

样就会破坏result的结构。

2.2 extend({},item1,item2,……)

用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。

示例：

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果：

Result={name:”Momo”,age:23,sex:”gril”};

说明：

以上的结果表明extend方法将所有的项都合并到了{}中，但是，细心一点就会发现，其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了，这是怎么回事？请接着往下看。

2.3 extend(bool,{},item1,item2….)

Extend方法还有带bool型参数的重载。

bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：

示例：

var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明：

以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

2.4 $.extend(item)

该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个

静态方法（对应这里的静态方法，当然还有实例方法，在后边有介绍）。

示例：

$.extend({SayHello:function(value){alert(“hello “+value);}});

这样写过之后，就可以直接调用SayHello方法：

$.SayHello(“Olive”);

说明：该方法相当于为Jquery类添加了新的方法。

2.5 $.fn.extend(item)

上边提到的$.extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item

)就是为每一个实例添加一个实例方法了。

示例：

$.fn.extend({hello:function(value){alert(“hello “+value);}});

这样写过之后，在获取每一个示例之后，都可以调用该方法：

$(“#id”).hello(“Olive”);

1 0