echarts Angular 指令的封装

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

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。那么怎么让其和Angular的双向绑定联系在一起呢,答案就是编写Angular的ECharts指令http://echarts.baidu.com/doc/doc.html



/**
 * 图表
 * 用法:
属性说明: width: 宽,必填 height: 高,必填 name: 名称,可通过名称控制图表。注:同一个controller内要避免同名 my-echart: 图表使用的数据,必填。 colors: 色彩取值,循环使用,逗号分隔。eg: '#000000, #666666' 父控制器控制方法: 处理配置数据后调用:$scope.$broadcast('name:setOption', option); 这里的option是echarts 本身的option。其实这里可以不用广播,直接用ng-show的变量,然后双向绑定,通过监听model的值的改变去动态的变化echart本身的option或者数据。 */ angular.module('demo').directive('myEchart',[function(){ return { require: '?ngModel', restrict: 'AE', scope: { myEchart: '=' }, link: function(scope, element, attrs, ctrl) { element.css({ width: attrs.width, height: attrs.height }); var colors = attrs.colors?attrs.colors.split(','):[ '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0' ]; scope.$on(attrs.name+':setOption',function(event, option){ seajs.use(['/vender/echarts/echarts.source.js'], function(){ //这里可以不用seajs,但是需要前端页面引用 console.log('echarts:',echarts); var datas = scope.ktEchart; var myChart = echarts.init(element.get(0), 'macarons'); //var option = datas; //myChart.setOption(option); option.color = option.color||colors; option.tooltip = option.tooltip||{trigger: 'axis'}; option.grid = option.grid||{ x: '10%', //左上角横坐标 x2: '5%', //右下角横坐标 y: '25%', // y2: '20%', // }; // option.calculable = option.calculable||true; myChart.setOption(option); $(window).resize(function(){ myChart.resize();//这里是当你设置图标的宽度或者高度为百分比的时候,浏览器改变大小则重新渲染图表。 }) }); }); } }; }]); /** Underscore.js _.pluck() 萃取对象数组中某属性值,返回一个数组 配置参考 var datas = scope.myEchart; var option = { title : { text: '', subtext: '纯属虚构' }, xAxis : [ { type : 'category', boundaryGap : true, show: false, data : _.pluck(datas, 'day')||['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', show: true } ], series : [ { name:'view', type:'line', data:_.pluck(datas, 'send')||[11, 11, 15, 13, 12, 13, 10] }, { name:'click', type:'bar', data:_.pluck(datas, 'view')||[1, -2, 2, 5, 30, 2, 0] }, { name:'send', type:'line', data:_.pluck(datas, 'click')||[1, -2, 2, 5, 30, 2, 0] } ] }; **/

李文杰

前端程序设计,人丑、家穷、没文化 myGit: https://github.com/JosnLee

北京市朝阳区成寿寺