Add support for global textStyle

.gitignore

@@ -1,3 +1,4 @@
 vendor
 node_modules
-.idea/
+.idea/
+package-lock.json

README.md

@@ -125,3 +125,190 @@ Use this markup for a quick demo
 
 > Or you can use `gulp server` and visit `http://localhost:8080` in Chrome browser, to avoid `XMLHttpRequest Cross origin requests` error.
 
+
+## TODO
+- [ ] Add chart provider with global configurations
+- [ ] Add support to the remaining charts i.e tree, treemap etc
+- [ ] Create chart widget with bootstrap style i.e panel
+- [ ] Add npm support
+
+## References
+- [https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Customerized%20Chart%20Styles](https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Customerized%20Chart%20Styles)
+
+## Implementations
+
+### [Simple Bar Chart (simple-bar-chart)](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align)
+```js
+{
+    color: ['#3398DB', '#C8B1EF', '#263238', '#960F1E', '#06C947'],
+    tooltip : {
+        trigger: 'axis',
+        axisPointer : {       
+            type : 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis : [
+        {
+            type : 'category',
+            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+            axisTick: {
+                alignWithLabel: true
+            }
+        }
+    ],
+    yAxis : [
+        {
+            type : 'value'
+        }
+    ],
+    series : [
+        {
+            name:'直接访问',
+            type:'bar',
+            barWidth: '60%',
+            data:[
+                    {
+                        name:'', 
+                        value:10, 
+                        itemStyle:{
+                            normal:{
+                                color: '#3398DB'
+                            }
+                        }
+                    }, 
+                    {
+                        name:'', 
+                        value:52,
+                        itemStyle:{
+                            normal:{
+                                color: '#960F1E'
+                            }
+                        }
+
+                    },
+                    {
+                        name:'', 
+                        value:200,
+                        itemStyle:{
+                            normal:{
+                                color: '#263238'
+                            }
+                        }
+                    }, 
+                    {
+                        name:'', 
+                        value:334,
+                        itemStyle:{
+                            normal:{
+                                color: '#06C947'
+                            }
+                        }
+                    }, 
+                    {
+                        name:'', 
+                        value:39,
+                        itemStyle:{
+                            normal:{
+                                color: '#C8B1EF'
+                            }
+                        }
+                    }
+                ]
+        }
+    ]
+};
+```
+
+## [Inverted Simple Bar Chart (simple-bar-chart)](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align)
+```js
+{
+    color: ['#3398DB', '#C8B1EF', '#263238', '#960F1E', '#06C947'],
+    tooltip : {
+        trigger: 'axis',
+        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    yAxis : [
+        {
+            type : 'category',
+            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+            axisTick: {
+                alignWithLabel: true
+            }
+        }
+    ],
+    xAxis : [
+        {
+            type : 'value'
+        }
+    ],
+    series : [
+        {
+            name:'直接访问',
+            type:'bar',
+            barWidth: '60%',
+            data:[
+                    {
+                        name:'', 
+                        value:10, 
+                        itemStyle:{
+                            normal:{
+                                color: '#3398DB'
+                            }
+                        }
+                    }, 
+                    {
+                        name:'', 
+                        value:52,
+                        itemStyle:{
+                            normal:{
+                                color: '#960F1E'
+                            }
+                        }
+
+                    },
+                    {
+                        name:'', 
+                        value:200,
+                        itemStyle:{
+                            normal:{
+                                color: '#263238'
+                            }
+                        }
+                    }, 
+                    {
+                        name:'', 
+                        value:334,
+                        itemStyle:{
+                            normal:{
+                                color: '#06C947'
+                            }
+                        }
+                    }, 
+                    {
+                        name:'', 
+                        value:39,
+                        itemStyle:{
+                            normal:{
+                                color: '#C8B1EF'
+                            }
+                        }
+                    }
+                ]
+        }
+    ]
+};
+```

bower.json

@@ -1,9 +1,10 @@
 {
   "name": "angular-echarts",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "homepage": "https://github.com/wangshijun/angular-echarts",
   "authors": [
-    "wangshijun2010 <[email protected]>"
+    "wangshijun2010 <[email protected]>",
+    "lykmapipo <[email protected]>"
   ],
   "description": "angular baidu echarts",
   "main": "./dist/angular-echarts.min.js",
@@ -24,8 +25,8 @@
     "tests"
   ],
   "dependencies": {
-    "angular": "~1.6",
-    "echarts": "~3.4"
+    "angular": "^1.6.5",
+    "echarts": "^3.6.2"
   },
   "devDependencies": {
     "bootstrap": "~3"

dist/angular-echarts.js

@@ -44,11 +44,14 @@ function getLinkFunction($http, theme, util, type) {
                     tooltip: util.getTooltip(data, config, type),
                     legend: util.getLegend(data, config, type),
                     toolbox: angular.extend({ show: false }, angular.isObject(config.toolbox) ? config.toolbox : {}),
-                    xAxis: util.isHeatmapChart(type) ? config.xAxis : [ angular.extend(xAxis, util.getAxisTicks(data, config, type)) ],
-                    yAxis: util.isHeatmapChart(type) ? config.yAxis : [ yAxis ],
+                    xAxis: util.isHeatmapChart(type) ? config.xAxis : [angular.extend(xAxis, util.getAxisTicks(data, config, type))],
+                    yAxis: util.isHeatmapChart(type) ? config.yAxis : [yAxis],
                     graphic: config.graphic && (angular.isObject(config.graphic) || angular.isArray(config.graphic)) ? config.graphic : [],
-                    series: util.getSeries(data, config, type),
-                    visualMap: config.visualMap ? config.visualMap : null
+                    series: config.series ? config.series : util.getSeries(data, config, type),
+                    visualMap: config.visualMap ? config.visualMap : null,
+                    //support global font style for the chart
+                    //see https://ecomfe.github.io/echarts-doc/public/en/option.html#textStyle
+                    textStyle: config.textStyle ? config.textStyle : undefined
                 };
             if (!config.showXAxis) {
                 angular.forEach(options.xAxis, function (axis) {
@@ -196,7 +199,7 @@ var app = angular.module('angular-echarts', ['angular-echarts.theme', 'angular-e
 var types = ['line', 'bar', 'area', 'pie', 'donut', 'gauge', 'map', 'radar', 'heatmap'];
 for (var i = 0, n = types.length; i < n; i++) {
     (function (type) {
-        app.directive(type + 'Chart', ['$http', 'theme', 'util', function ($http, theme, util) {
+        app.directive(type + 'Chart', ['$http', 'theme', 'util', function($http, theme, util) {
                     return {
                         restrict: 'EA',
                         template: '<div config="config" data="data"></div>',
@@ -211,6 +214,147 @@ for (var i = 0, n = types.length; i < n; i++) {
     }(types[i]));
 }
 'use strict';
+/**
+ * simple echarts directive
+ * Merge of concepts from https://github.com/liekkas/ng-echarts & 
+ * https://github.com/wangshijun/angular-echarts
+ * @author lykmapipo <https://github.com/lykmapipo>
+ * //TODO support $http
+ * //TODO add basic charts shortcuts
+ */
+angular.module('angular-echarts').directive('echart', [function() {
+        return {
+            restrict: 'EA',
+            template: '<div config="config" options="options"></div>',
+            scope: {
+                options: '=options',
+                config: '=config',
+                chartObj: '=?chartObj'
+            },
+            link: function link(scope, element, attrs, ctrl) {
+
+                //globals
+                var chartDOM = element.find('div')[0];
+                var parent = element.parent()[0];
+                var parentWidth = parent.clientWidth;
+                var parentHeight = parent.clientHeight;
+                var width = parseInt(attrs.width) || parentWidth || 320;
+                var height = parseInt(attrs.height) || parentHeight || 240;
+
+                //ensure config
+                var config = scope.config || {};
+
+                //reference chart
+                var chart;
+
+                /**
+                 * Update or create a echart based on scope config
+                 * and options
+                 */
+                function refreshChart() {
+
+                    var theme = (scope.config && scope.config.theme) ?
+                        scope.config.theme : 'shine';
+
+                    //compute chart width & height
+                    width = (config.width || width);
+                    height = (config.height || height);
+
+                    //ensure width & height
+                    config = angular.extend({
+                        width: width,
+                        height: height
+                    }, scope.config);
+
+                    //ensure chart dom height & width
+                    chartDOM.style.width = config.width + 'px';
+                    chartDOM.style.height = config.height + 'px';
+
+                    if (!chart) {
+                        chart = echarts.init(chartDOM, theme);
+                    }
+
+                    //TODO handle remote data loading
+                    //using url and promise
+
+                    //force clear chart if so
+                    if (config.forceClear) {
+                        chart.clear();
+                    }
+
+                    if (config && scope.options) {
+                        chart.setOption(scope.options);
+                        chart.resize();
+                        chart.hideLoading();
+                    }
+
+                    if (config && config.event) {
+
+                        //normalize event config
+                        if (!Array.isArray(config.event)) {
+                            config.event = [config.event];
+                        }
+
+                        //bind chart events
+                        if (angular.isArray(config.event)) {
+                            angular.forEach(config.event, function(value, key) {
+                                for (var e in value) {
+                                    chart.on(e, value[e]);
+                                }
+                            });
+                        }
+                    }
+                };
+
+                //watch config and update chart
+                //see https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
+                //see https://www.sitepoint.com/mastering-watch-angularjs/
+                var unwatchConfig = scope.$watch(
+                    function() { //expression
+                        return scope.config;
+                    },
+                    function(value) { //listener
+                        if (value) {
+                            refreshChart();
+                        }
+                    },
+                    true // perfom deep comparison
+                );
+
+                //watch options and update chart
+                //see https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
+                //see https://www.sitepoint.com/mastering-watch-angularjs/
+                var unwatchOptions = scope.$watch(
+                    function() { //expression
+                        return scope.options;
+                    },
+                    function(value) { //listener
+                        if (value) {
+                            refreshChart();
+                        }
+                    },
+                    true // perfom deep comparison
+                );
+
+                //de-register listeners on scope destroy
+                scope.$on('$destroy', function deregister() {
+
+                    //de-register config watch
+                    if (unwatchConfig) {
+                        unwatchConfig();
+                    }
+
+                    //de-register options watch
+                    if (unwatchOptions) {
+                        unwatchOptions();
+                    }
+
+                });
+
+            }
+        };
+    }]);
+'use strict';
 /**
  * util services
  */