封装Echarts

　　项目中需要对数据进行图形展示，例如展示柱状图、饼状图等。这类的前端展示脚本很多，常见的是HighCharts和Echarts。HighCharts是基于svg技术的，而echarts基于Echarts，两者技术基础完全不一样，各有特点。而后者是可以在浏览器实现3D图形的。在各种图形展示上基本是差不多，都能满足项目需要。但是HighCharts是收费的，而Echarts是开源免费的，如果用于实际的项目还是使用Echarts。

　　使用这类前端脚本，每种图形都需要写很多重复的脚本，复用性低，其实可以将相同的代码进行封装，方便重复使用。之前使用HighCharts时，封装了一个，使用C#和数据库，只需要在数据库中配置Sql语句即可，不需要修改大量的代码。但是使用不方便，需要配置多个表。

　　本文中只封装了前端，调用只需要传入标题、数据等参数即可。主要代码如下：

 var MyECharts = {
     //格式化数据
     ChartDataFormate: {
         FormateNOGroupData: function (data) {
             var categories = [];
             var datas = [];
             for (var i = 0; i < data.length; i++) {
                 categories.push(data[i].name || '');
                 temp_series = { value: data[i].value || 0, name: data[i].name };
                 datas.push(temp_series);
             }
             return { category: categories, data: datas };
         },
         //处理分组数据，数据格式：group：XXX，name：XXX，value：XXX用于折线图、柱形图（分组，堆积）
         //参数：数据、展示类型
         FormatGroupData: function (data, type) {
             var groups = new Array();
             var names = new Array();
             var series = new Array();
             for (var i = 0; i < data.length; i++) {
                 if (!groups.contains(data[i].group)) {
                     groups.push(data[i].group);
                 }
                 if (!names.contains(data[i].name)) {
                     names.push(data[i].name);
                 }
             }
             for (var i = 0; i < groups.length; i++) {
                 var temp_series = {};
                 var temp_data = new Array();
                 for (var j = 0; j < data.length; j++) {
                     for (var k = 0; k < names.length; k++)
                         if (groups[i] == data[j].group && data[j].name == names[k])
                             temp_data.push(data[j].value);
                     }
                     temp_series = { name: groups[i], type: type, data: temp_data };
                     series.push(temp_series);
                 }
                 return { category: names, series: series };
             }
         },
     //生成图形
     ChartOptionTemplates: {
         //柱状图
         Bar: function (title, subtext, data) {
             var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'bar');
             var option = {
                 title: {
                     text: title || '',
                     subtext: subtext || '',
                     x: 'center'
                 },
                 tooltip: {
                     show: true
                 },
                 xAxis: [
                 {
                     type: 'category',
                     data: datas.category
                 }
                 ],
                 yAxis: [
                 {
                     type: 'value'
                 }
                 ],
                 series: datas.series
             };
             return option;
         },
         //折线图
         Line: function (title, subtext, data) {
             var datas = MyECharts.ChartDataFormate.FormatGroupData(data, 'line');
             var option = {
                 title: {
                     text: title || '',
                     subtext: subtext || '',
                     x: 'center'
                 },
                 tooltip: {
                     show: true
                 },
                 xAxis: [
                 {
                     type: 'category',
                     data: datas.category
                 }
                 ],
                 yAxis: [
                 {
                     type: 'value'
                 }
                 ],
                 series: datas.series
             };
             return option;
         },
         //饼图
         Pie: function (title, subtext, data) {
             var datas = MyECharts.ChartDataFormate.FormateNOGroupData(data);
             var option = {
                 title: {
                     text: title || '',
                     subtext: subtext || '',
                     x: 'center'
                 },
                 tooltip: {
                     show: true,
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     orient: 'vertical',
                     left: 'left',
                     data: datas.category
                 },
                 series: [
                 {
                     name: title,
                     type: 'pie',
                     radius: '55%',
                     center: ['50%', '60%'],
                     data: datas.data,
                     itemStyle: {
                         emphasis: {
                             shadowBlur: 10,
                             shadowOffsetX: 0,
                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                         }
                     }
                 }
                 ]
             };
             return option;
         },
         //散点图
         Scatter: function (title, subtext, data) {
             var markLineOpt = {
                 animation: false,
                 label: {
                     normal: {
                         formatter: 'y = 0.5 * x + 3',
                         textStyle: {
                             align: 'right'
                         }
                     }
                 },
                 lineStyle: {
                     normal: {
                         type: 'solid'
                     }
                 },
                 tooltip: {
                     formatter: 'y = 0.5 * x + 3'
                 },
                 data: [[{
                     coord: [0, 3],
                     symbol: 'none'
                 }, {
                     coord: [20, 13],
                     symbol: 'none'
                 }]]
             };

             var option = {
                 title: {
                     text: 'Anscombe\'s quartet',
                     x: 'center',
                     y: 0
                 },
                 grid: [
                 {x: '7%', y: '7%', width: '38%', height: '38%'},
                 {x2: '7%', y: '7%', width: '38%', height: '38%'},
                 {x: '7%', y2: '7%', width: '38%', height: '38%'},
                 {x2: '7%', y2: '7%', width: '38%', height: '38%'}
                 ],
                 tooltip: {
                     formatter: 'Group {a}: ({c})'
                 },
                 xAxis: [
                     {gridIndex: 0, min: 0, max: 20},
                     {gridIndex: 1, min: 0, max: 20},
                     {gridIndex: 2, min: 0, max: 20},
                     {gridIndex: 3, min: 0, max: 20}
                 ],
                 yAxis: [
                     {gridIndex: 0, min: 0, max: 15},
                     {gridIndex: 1, min: 0, max: 15},
                     {gridIndex: 2, min: 0, max: 15},
                     {gridIndex: 3, min: 0, max: 15}
                 ],
                 series: [
                 {
                     name: 'I',
                     type: 'scatter',
                     xAxisIndex: 0,
                     yAxisIndex: 0,
                     data: data[0],
                     markLine: markLineOpt
                 },
                 {
                     name: 'II',
                     type: 'scatter',
                     xAxisIndex: 1,
                     yAxisIndex: 1,
                     data: data[1],
                     markLine: markLineOpt
                 },
                 {
                     name: 'III',
                     type: 'scatter',
                     xAxisIndex: 2,
                     yAxisIndex: 2,
                     data: data[2],
                     markLine: markLineOpt
                 },
                 {
                     name: 'IV',
                     type: 'scatter',
                     xAxisIndex: 3,
                     yAxisIndex: 3,
                     data: data[3],
                     markLine: markLineOpt
                 }
                 ]
             };
             return option;
         }
     },
     //图形展示
     //参数：图形option、图形显示区域id
     RenderChart: function (option, containerId) {
         var container = eval("document.getElementById('" + containerId + "');");//获取图形显示区域
         var myChart = echarts.init(container);
         myChart.setOption(option);// 为echarts对象加载数据
     }
 };

这个实现了对ECharts的封装，在前端调用代码如下：

1、先定义一块区域用于显示图形

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="container1" style="height: 400px"></div>

2、引入需要的脚本，一个是原生的ECharts脚本库，一个是自己封装的。

     <script src="MyECharts/resource/ECharts/echarts.js"></script>
     <script src="MyECharts/resource/MyECharts.js"></script>

3、使用封装的ECharts代码如下：

　　先定义需要的数据，在传入生成图形需要的参数，最后展现图形。

     <script type="text/javascript">
         var data1 = [
             { group: 'Beijing', name: '1月', value: 10 },
             { group: 'Beijing', name: '2月', value: 15 },
             { group: 'Beijing', name: '3月', value: 12 },
             { group: 'Beijing', name: '4月', value: 14 },
             { group: 'Tokyo', name: '1月', value: 12 },
             { group: 'Tokyo', name: '2月', value: 15 },
             { group: 'Tokyo', name: '3月', value: 2 },
             { group: 'Tokyo', name: '4月', value: 14 }];

         var opt1 = MyECharts.ChartOptionTemplates.Bar('各个城市气温趋势', '°C', data1);
         MyECharts.RenderChart(opt1, 'container1');
     </script>

整个项目代码在github上：https://github.com/yangtzeyufei/MyEcharts

欢迎大家共同参与。

其他：Echart官网http://echarts.baidu.com/