diff --git a/.gitignore b/.gitignore index a6dfcc8..8ebc490 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ vendor node_modules -.idea/ \ No newline at end of file +.idea/ +package-lock.json \ No newline at end of file diff --git a/README.md b/README.md index 7b0a090..57e9d38 100644 --- a/README.md +++ b/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' + } + } + } + ] + } + ] +}; +``` \ No newline at end of file diff --git a/bower.json b/bower.json index 2fbc6ec..ffe93b8 100644 --- a/bower.json +++ b/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 " + "wangshijun2010 ", + "lykmapipo " ], "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" diff --git a/dist/angular-echarts.js b/dist/angular-echarts.js index 2356243..90ca1f1 100644 --- a/dist/angular-echarts.js +++ b/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: '
', @@ -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 + * //TODO support $http + * //TODO add basic charts shortcuts + */ +angular.module('angular-echarts').directive('echart', [function() { + return { + restrict: 'EA', + template: '
', + 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 */ diff --git a/dist/angular-echarts.min.js b/dist/angular-echarts.min.js index f6193b9..c1d297b 100644 --- a/dist/angular-echarts.min.js +++ b/dist/angular-echarts.min.js @@ -1 +1 @@ -!function(){"use strict";function e(e,o,t,a){return function(o,r,l){function i(e){s=e.width||parseInt(l.width)||f||320,d=e.height||parseInt(l.height)||y||240,g.style.width=s+"px",g.style.height=d+"px"}function n(e,o,a){o=angular.extend({showXAxis:!0,showYAxis:!0,showLegend:!0},o);var r=angular.extend({orient:"top",axisLine:{show:!1}},angular.isObject(o.xAxis)?o.xAxis:{}),l=angular.extend({type:"value",orient:"right",scale:!1,axisLine:{show:!1},axisLabel:{formatter:function(e){return t.formatKMBT(e)}}},angular.isObject(o.yAxis)?o.yAxis:{}),i={title:t.getTitle(e,o,a),tooltip:t.getTooltip(e,o,a),legend:t.getLegend(e,o,a),toolbox:angular.extend({show:!1},angular.isObject(o.toolbox)?o.toolbox:{}),xAxis:t.isHeatmapChart(a)?o.xAxis:[angular.extend(r,t.getAxisTicks(e,o,a))],yAxis:t.isHeatmapChart(a)?o.yAxis:[l],graphic:o.graphic&&(angular.isObject(o.graphic)||angular.isArray(o.graphic))?o.graphic:[],series:t.getSeries(e,o,a),visualMap:o.visualMap?o.visualMap:null};return o.showXAxis||angular.forEach(i.xAxis,function(e){e.axisLine={show:!1},e.axisLabel={show:!1},e.axisTick={show:!1}}),o.showYAxis||angular.forEach(i.yAxis,function(e){e.axisLine={show:!1},e.axisLabel={show:!1},e.axisTick={show:!1}}),o.showLegend&&"gauge"!==a||delete i.legend,t.isAxisChart(a)||t.isHeatmapChart(a)||(delete i.xAxis,delete i.yAxis),o.dataZoom&&(i.dataZoom=angular.extend({show:!0,realtime:!0},o.dataZoom)),o.dataRange&&(i.dataRange=angular.extend({},o.dataRange)),o.polar&&(i.polar=o.polar),o.grid&&(i.grid=o.grid),i}function c(){if(o.data&&o.config){var t;if(i(o.config),u||(u=echarts.init(g,o.config.theme||"shine")),o.config.event&&(Array.isArray(o.config.event)||(o.config.event=[o.config.event]),Array.isArray(o.config.event)&&o.config.event.forEach(function(e){m[e.type]||(m[e.type]=!0,u.on(e.type,function(o){e.fn(o)}))})),angular.isString(o.data)){if(p)return;p=!0,u.showLoading({text:o.config.loading||"奋力加载中...",textStyle:x}),e.get(o.data).then(function(e){p=!1,u.hideLoading(),e.data.data?(t=n(e.data.data,o.config,a),o.config.forceClear&&u.clear(),t.series.length?(u.setOption(t),u.resize()):u.showLoading({text:o.config.errorMsg||"没有数据",textStyle:x})):u.showLoading({text:o.config.emptyMsg||"数据加载失败",textStyle:x})})}else t=n(o.data,o.config,a),o.config.forceClear&&u.clear(),t.series.length?(u.setOption(t),u.resize()):u.showLoading({text:o.config.errorMsg||"没有数据",textStyle:x});o.chartObj=u}}o.config=o.config||{};var s,d,u,g=r.find("div")[0],h=r.parent()[0],f=h.clientWidth,y=h.clientHeight,m={},p=!1,x={color:"red",fontSize:36,fontWeight:900,fontFamily:"Microsoft Yahei, Arial"};o.$watch(function(){return o.config},function(e){e&&c()},!0),o.$watch(function(){return o.data},function(e){e&&c()},!0)}}for(var o=angular.module("angular-echarts",["angular-echarts.theme","angular-echarts.util"]),t=["line","bar","area","pie","donut","gauge","map","radar","heatmap"],a=0,r=t.length;r>a;a++)!function(t){o.directive(t+"Chart",["$http","theme","util",function(o,a,r){return{restrict:"EA",template:'
',scope:{config:"=config",data:"=data",chartObj:"=?chartObj"},link:e(o,a,r,t)}}])}(t[a]);angular.module("angular-echarts.util",[]).factory("util",function(){function e(e){return["pie","donut"].indexOf(e)>-1}function o(e){return["map"].indexOf(e)>-1}function t(e){return["line","bar","area"].indexOf(e)>-1}function a(e){return["heatmap"].indexOf(e)>-1}function r(e,o,t){var a=[];return e[0]&&angular.forEach(e[0].datapoints,function(e){a.push(e.x)}),{type:"category",boundaryGap:"bar"===t,data:a}}function l(r,l,i){var n=[];return angular.forEach(r,function(r){var c=[];angular.forEach(r.datapoints,function(e){c.push(e.y)});var s={type:i||"line",name:r.name,data:c};"area"===i&&(s.type="line",s.itemStyle={normal:{areaStyle:{type:"default"}}}),"gauge"===i&&(s=angular.extend(s,{splitNumber:10,axisLine:{lineStyle:{color:[[.2,"#228b22"],[.8,"#48b"],[1,"#ff4500"]],width:8}},axisTick:{splitNumber:10,length:12,lineStyle:{color:"auto"}},axisLabel:{textStyle:{color:"auto"}},splitLine:{show:!0,length:30,lineStyle:{color:"auto"}},pointer:{width:5},title:{show:!0,offsetCenter:[0,"-40%"],textStyle:{fontWeight:"bolder"}},detail:{formatter:"{value}%",textStyle:{color:"auto",fontWeight:"bolder"}}},l.gauge||{})),t(i)||(s.data=[],angular.forEach(r.datapoints,function(e){s.data.push({value:e.y,name:e.x})})),e(i)&&(s.type="pie",s.center=l.center||["40%","50%"],s.radius=l.radius||"60%","donut"===i?(s.radius=l.radius||["50%","70%"],s=angular.extend(s,{itemStyle:{normal:{label:{show:!1},labelLine:{show:!1}},emphasis:{label:{show:!0,position:"center",textStyle:{fontSize:"50",fontWeight:"bold"}}}}},l.donut||{})):"pie"===i&&(s=angular.extend(s,{itemStyle:{normal:{label:{position:"inner",formatter:function(e){return(+e.percent).toFixed()+"%"}},labelLine:{show:!1}},emphasis:{label:{show:!0,formatter:"{b}\n{d}%"}}}},l.pie||{}))),o(i)&&(s.type="map",s=angular.extend(s,r,l.map||{})),l.stack&&(s.stack="total"),"radar"===i&&(s.data=r.data),a(i)&&(s.type="heatmap",s.name=r.name,s.data=r.data,s=angular.extend(s,{label:{normal:{show:!0}},itemStyle:{emphasis:{shadowBlur:10,shadowColor:"rgba(0, 0, 0, 0.5)"}}},l.heatmap||{})),n.push(s)}),n}function i(o,t,a){var r={data:[]};return e(a)?(o[0]&&angular.forEach(o[0].datapoints,function(e){r.data.push(e.x)}),r.orient="verticle",r.x="right",r.y="center"):"map"===a?r={}:(angular.forEach(o,function(e){r.data.push(e.name)}),r.orient="horizontal"),angular.extend(r,t.legend||{})}function n(e,o,t){var a={};switch(t){case"line":case"area":a.trigger="axis";break;case"pie":case"donut":case"bar":case"map":case"gauge":a.trigger="item"}return"pie"===t&&(a.formatter="{a}
{b}: {c} ({d}%)"),"map"===t&&(a.formatter="{b}"),angular.extend(a,angular.isObject(o.tooltip)?o.tooltip:{})}function c(o,t,a){return angular.isObject(t.title)?t.title:e(a)?null:{text:t.title,subtext:t.subtitle||"",x:50}}function s(e,o){return o||(o=function(e){return Math.round(100*e)/100}),e=Math.abs(e),e>=1e12?o(e/1e12)+"T":e>=1e9?o(e/1e9)+"B":e>=1e6?o(e/1e6)+"M":e>=1e3?o(e/1e3)+"K":1>e&&e>0?o(e):0===e?"":o(e)}return{isPieChart:e,isAxisChart:t,isHeatmapChart:a,getAxisTicks:r,getSeries:l,getLegend:i,getTooltip:n,getTitle:c,formatKMBT:s}}),angular.module("angular-echarts.theme",[]).factory("theme",["infographic","macarons","shine","dark","roma",function(e,o,t,a,r){var l={infographic:e,macarons:o,shine:t,dark:a,roma:r};return{get:function(e){return l[e]?l[e]:{}}}}]),angular.module("angular-echarts.theme").factory("dark",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var o="#eee",t=function(){return{axisLine:{lineStyle:{color:o}},axisTick:{lineStyle:{color:o}},axisLabel:{textStyle:{color:o}},splitLine:{lineStyle:{type:"dashed",color:"#aaa"}},splitArea:{areaStyle:{color:o}}}},a=["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"],r={color:a,backgroundColor:"#333",tooltip:{axisPointer:{lineStyle:{color:o},crossStyle:{color:o}}},legend:{textStyle:{color:o}},textStyle:{color:o},title:{textStyle:{color:o}},toolbox:{iconStyle:{normal:{borderColor:o}}},dataZoom:{textStyle:{color:o}},timeline:{lineStyle:{color:o},itemStyle:{normal:{color:a[1]}},label:{normal:{textStyle:{color:o}}},controlStyle:{normal:{color:o,borderColor:o}}},timeAxis:t(),logAxis:t(),valueAxis:t(),categoryAxis:t(),line:{symbol:"circle"},graph:{color:a},gauge:{title:{textStyle:{color:o}}},candlestick:{itemStyle:{normal:{color:"#FD1050",color0:"#0CF49B",borderColor:"#FD1050",borderColor0:"#0CF49B"}}}};return r.categoryAxis.splitLine.show=!1,echarts.registerTheme("dark",r),r}),angular.module("angular-echarts.theme").factory("infographic",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var o=["#C1232B","#27727B","#FCCE10","#E87C25","#B5C334","#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"],t={color:o,title:{textStyle:{fontWeight:"normal",color:"#27727B"}},visualMap:{color:["#C1232B","#FCCE10"]},toolbox:{iconStyle:{normal:{borderColor:o[0]}}},tooltip:{backgroundColor:"rgba(50,50,50,0.5)",axisPointer:{type:"line",lineStyle:{color:"#27727B",type:"dashed"},crossStyle:{color:"#27727B"},shadowStyle:{color:"rgba(200,200,200,0.3)"}}},dataZoom:{dataBackgroundColor:"rgba(181,195,52,0.3)",fillerColor:"rgba(181,195,52,0.2)",handleColor:"#27727B"},categoryAxis:{axisLine:{lineStyle:{color:"#27727B"}},splitLine:{show:!1}},valueAxis:{axisLine:{show:!1},splitArea:{show:!1},splitLine:{lineStyle:{color:["#ccc"],type:"dashed"}}},timeline:{lineStyle:{color:"#27727B"},controlStyle:{normal:{color:"#27727B",borderColor:"#27727B"}},symbol:"emptyCircle",symbolSize:3},line:{itemStyle:{normal:{borderWidth:2,borderColor:"#fff",lineStyle:{width:3}},emphasis:{borderWidth:0}},symbol:"circle",symbolSize:3.5},candlestick:{itemStyle:{normal:{color:"#C1232B",color0:"#B5C334",lineStyle:{width:1,color:"#C1232B",color0:"#B5C334"}}}},graph:{color:o},map:{label:{normal:{textStyle:{color:"#C1232B"}},emphasis:{textStyle:{color:"rgb(100,0,0)"}}},itemStyle:{normal:{areaColor:"#ddd",borderColor:"#eee"},emphasis:{areaColor:"#fe994e"}}},gauge:{axisLine:{lineStyle:{color:[[.2,"#B5C334"],[.8,"#27727B"],[1,"#C1232B"]]}},axisTick:{splitNumber:2,length:5,lineStyle:{color:"#fff"}},axisLabel:{textStyle:{color:"#fff"}},splitLine:{length:"5%",lineStyle:{color:"#fff"}},title:{offsetCenter:[0,-20]}}};return echarts.registerTheme("infographic",t),t}),angular.module("angular-echarts.theme").factory("macarons",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var o=["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],t={color:o,title:{textStyle:{fontWeight:"normal",color:"#008acd"}},visualMap:{itemWidth:15,color:["#5ab1ef","#e0ffff"]},toolbox:{iconStyle:{normal:{borderColor:o[0]}}},tooltip:{backgroundColor:"rgba(50,50,50,0.5)",axisPointer:{type:"line",lineStyle:{color:"#008acd"},crossStyle:{color:"#008acd"},shadowStyle:{color:"rgba(200,200,200,0.2)"}}},dataZoom:{dataBackgroundColor:"#efefff",fillerColor:"rgba(182,162,222,0.2)",handleColor:"#008acd"},grid:{borderColor:"#eee"},categoryAxis:{axisLine:{lineStyle:{color:"#008acd"}},splitLine:{lineStyle:{color:["#eee"]}}},valueAxis:{axisLine:{lineStyle:{color:"#008acd"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.1)","rgba(200,200,200,0.1)"]}},splitLine:{lineStyle:{color:["#eee"]}}},timeline:{lineStyle:{color:"#008acd"},controlStyle:{normal:{color:"#008acd"},emphasis:{color:"#008acd"}},symbol:"emptyCircle",symbolSize:3},line:{smooth:!0,symbol:"emptyCircle",symbolSize:3},candlestick:{itemStyle:{normal:{color:"#d87a80",color0:"#2ec7c9",lineStyle:{color:"#d87a80",color0:"#2ec7c9"}}}},scatter:{symbol:"circle",symbolSize:4},map:{label:{normal:{textStyle:{color:"#d87a80"}}},itemStyle:{normal:{borderColor:"#eee",areaColor:"#ddd"},emphasis:{areaColor:"#fe994e"}}},graph:{color:o},gauge:{axisLine:{lineStyle:{color:[[.2,"#2ec7c9"],[.8,"#5ab1ef"],[1,"#d87a80"]],width:10}},axisTick:{splitNumber:10,length:15,lineStyle:{color:"auto"}},splitLine:{length:22,lineStyle:{color:"auto"}},pointer:{width:5}}};return echarts.registerTheme("macarons",t),t}),angular.module("angular-echarts.theme").factory("roma",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var o=["#E01F54","#001852","#f5e8c8","#b8d2c7","#c6b38e","#a4d8c2","#f3d999","#d3758f","#dcc392","#2e4783","#82b6e9","#ff6347","#a092f1","#0a915d","#eaf889","#6699FF","#ff6666","#3cb371","#d5b158","#38b6b6"],t={color:o,visualMap:{color:["#e01f54","#e7dbc3"],textStyle:{color:"#333"}},candlestick:{itemStyle:{normal:{color:"#e01f54",color0:"#001852",lineStyle:{width:1,color:"#f5e8c8",color0:"#b8d2c7"}}}},graph:{color:o},gauge:{axisLine:{lineStyle:{color:[[.2,"#E01F54"],[.8,"#b8d2c7"],[1,"#001852"]],width:8}}}};return echarts.registerTheme("roma",t),echarts}),angular.module("angular-echarts.theme").factory("shine",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var o=["#c12e34","#e6b600","#0098d9","#2b821d","#005eaa","#339ca8","#cda819","#32a487"],t={color:o,title:{textStyle:{fontWeight:"normal"}},visualMap:{color:["#1790cf","#a2d4e6"]},toolbox:{iconStyle:{normal:{borderColor:"#06467c"}}},tooltip:{backgroundColor:"rgba(0,0,0,0.6)"},dataZoom:{dataBackgroundColor:"#dedede",fillerColor:"rgba(154,217,247,0.2)",handleColor:"#005eaa"},timeline:{lineStyle:{color:"#005eaa"},controlStyle:{normal:{color:"#005eaa",borderColor:"#005eaa"}}},candlestick:{itemStyle:{normal:{color:"#c12e34",color0:"#2b821d",lineStyle:{width:1,color:"#c12e34",color0:"#2b821d"}}}},graph:{color:o},map:{label:{normal:{textStyle:{color:"#c12e34"}},emphasis:{textStyle:{color:"#c12e34"}}},itemStyle:{normal:{borderColor:"#eee",areaColor:"#ddd"},emphasis:{areaColor:"#e6b600"}}},gauge:{axisLine:{show:!0,lineStyle:{color:[[.2,"#2b821d"],[.8,"#005eaa"],[1,"#c12e34"]],width:5}},axisTick:{splitNumber:10,length:8,lineStyle:{color:"auto"}},axisLabel:{textStyle:{color:"auto"}},splitLine:{length:12,lineStyle:{color:"auto"}},pointer:{length:"90%",width:3,color:"auto"},title:{textStyle:{color:"#333"}},detail:{textStyle:{color:"auto"}}}};return echarts.registerTheme("shine",t),t})}(); \ No newline at end of file +!function(){"use strict";function e(e,t,o,a){return function(t,r,l){function i(e){s=e.width||parseInt(l.width)||f||320,d=e.height||parseInt(l.height)||y||240,h.style.width=s+"px",h.style.height=d+"px"}function n(e,t,a){t=angular.extend({showXAxis:!0,showYAxis:!0,showLegend:!0},t);var r=angular.extend({orient:"top",axisLine:{show:!1}},angular.isObject(t.xAxis)?t.xAxis:{}),l=angular.extend({type:"value",orient:"right",scale:!1,axisLine:{show:!1},axisLabel:{formatter:function(e){return o.formatKMBT(e)}}},angular.isObject(t.yAxis)?t.yAxis:{}),i={title:o.getTitle(e,t,a),tooltip:o.getTooltip(e,t,a),legend:o.getLegend(e,t,a),toolbox:angular.extend({show:!1},angular.isObject(t.toolbox)?t.toolbox:{}),xAxis:o.isHeatmapChart(a)?t.xAxis:[angular.extend(r,o.getAxisTicks(e,t,a))],yAxis:o.isHeatmapChart(a)?t.yAxis:[l],graphic:t.graphic&&(angular.isObject(t.graphic)||angular.isArray(t.graphic))?t.graphic:[],series:t.series?t.series:o.getSeries(e,t,a),visualMap:t.visualMap?t.visualMap:null,textStyle:t.textStyle?t.textStyle:void 0};return t.showXAxis||angular.forEach(i.xAxis,function(e){e.axisLine={show:!1},e.axisLabel={show:!1},e.axisTick={show:!1}}),t.showYAxis||angular.forEach(i.yAxis,function(e){e.axisLine={show:!1},e.axisLabel={show:!1},e.axisTick={show:!1}}),t.showLegend&&"gauge"!==a||delete i.legend,o.isAxisChart(a)||o.isHeatmapChart(a)||(delete i.xAxis,delete i.yAxis),t.dataZoom&&(i.dataZoom=angular.extend({show:!0,realtime:!0},t.dataZoom)),t.dataRange&&(i.dataRange=angular.extend({},t.dataRange)),t.polar&&(i.polar=t.polar),t.grid&&(i.grid=t.grid),i}function c(){if(t.data&&t.config){var o;if(i(t.config),u||(u=echarts.init(h,t.config.theme||"shine")),t.config.event&&(Array.isArray(t.config.event)||(t.config.event=[t.config.event]),Array.isArray(t.config.event)&&t.config.event.forEach(function(e){m[e.type]||(m[e.type]=!0,u.on(e.type,function(t){e.fn(t)}))})),angular.isString(t.data)){if(p)return;p=!0,u.showLoading({text:t.config.loading||"奋力加载中...",textStyle:x}),e.get(t.data).then(function(e){p=!1,u.hideLoading(),e.data.data?(o=n(e.data.data,t.config,a),t.config.forceClear&&u.clear(),o.series.length?(u.setOption(o),u.resize()):u.showLoading({text:t.config.errorMsg||"没有数据",textStyle:x})):u.showLoading({text:t.config.emptyMsg||"数据加载失败",textStyle:x})})}else o=n(t.data,t.config,a),t.config.forceClear&&u.clear(),o.series.length?(u.setOption(o),u.resize()):u.showLoading({text:t.config.errorMsg||"没有数据",textStyle:x});t.chartObj=u}}t.config=t.config||{};var s,d,u,h=r.find("div")[0],g=r.parent()[0],f=g.clientWidth,y=g.clientHeight,m={},p=!1,x={color:"red",fontSize:36,fontWeight:900,fontFamily:"Microsoft Yahei, Arial"};t.$watch(function(){return t.config},function(e){e&&c()},!0),t.$watch(function(){return t.data},function(e){e&&c()},!0)}}for(var t=angular.module("angular-echarts",["angular-echarts.theme","angular-echarts.util"]),o=["line","bar","area","pie","donut","gauge","map","radar","heatmap"],a=0,r=o.length;r>a;a++)!function(o){t.directive(o+"Chart",["$http","theme","util",function(t,a,r){return{restrict:"EA",template:'
',scope:{config:"=config",data:"=data",chartObj:"=?chartObj"},link:e(t,a,r,o)}}])}(o[a]);angular.module("angular-echarts").directive("echart",[function(){return{restrict:"EA",template:'
',scope:{options:"=options",config:"=config",chartObj:"=?chartObj"},link:function(e,t,o){function a(){var t=e.config&&e.config.theme?e.config.theme:"shine";s=u.width||s,d=u.height||d,u=angular.extend({width:s,height:d},e.config),l.style.width=u.width+"px",l.style.height=u.height+"px",r||(r=echarts.init(l,t)),u.forceClear&&r.clear(),u&&e.options&&(r.setOption(e.options),r.resize(),r.hideLoading()),u&&u.event&&(Array.isArray(u.event)||(u.event=[u.event]),angular.isArray(u.event)&&angular.forEach(u.event,function(e){for(var t in e)r.on(t,e[t])}))}var r,l=t.find("div")[0],i=t.parent()[0],n=i.clientWidth,c=i.clientHeight,s=parseInt(o.width)||n||320,d=parseInt(o.height)||c||240,u=e.config||{},h=e.$watch(function(){return e.config},function(e){e&&a()},!0),g=e.$watch(function(){return e.options},function(e){e&&a()},!0);e.$on("$destroy",function(){h&&h(),g&&g()})}}}]),angular.module("angular-echarts.util",[]).factory("util",function(){function e(e){return["pie","donut"].indexOf(e)>-1}function t(e){return["map"].indexOf(e)>-1}function o(e){return["line","bar","area"].indexOf(e)>-1}function a(e){return["heatmap"].indexOf(e)>-1}function r(e,t,o){var a=[];return e[0]&&angular.forEach(e[0].datapoints,function(e){a.push(e.x)}),{type:"category",boundaryGap:"bar"===o,data:a}}function l(r,l,i){var n=[];return angular.forEach(r,function(r){var c=[];angular.forEach(r.datapoints,function(e){c.push(e.y)});var s={type:i||"line",name:r.name,data:c};"area"===i&&(s.type="line",s.itemStyle={normal:{areaStyle:{type:"default"}}}),"gauge"===i&&(s=angular.extend(s,{splitNumber:10,axisLine:{lineStyle:{color:[[.2,"#228b22"],[.8,"#48b"],[1,"#ff4500"]],width:8}},axisTick:{splitNumber:10,length:12,lineStyle:{color:"auto"}},axisLabel:{textStyle:{color:"auto"}},splitLine:{show:!0,length:30,lineStyle:{color:"auto"}},pointer:{width:5},title:{show:!0,offsetCenter:[0,"-40%"],textStyle:{fontWeight:"bolder"}},detail:{formatter:"{value}%",textStyle:{color:"auto",fontWeight:"bolder"}}},l.gauge||{})),o(i)||(s.data=[],angular.forEach(r.datapoints,function(e){s.data.push({value:e.y,name:e.x})})),e(i)&&(s.type="pie",s.center=l.center||["40%","50%"],s.radius=l.radius||"60%","donut"===i?(s.radius=l.radius||["50%","70%"],s=angular.extend(s,{itemStyle:{normal:{label:{show:!1},labelLine:{show:!1}},emphasis:{label:{show:!0,position:"center",textStyle:{fontSize:"50",fontWeight:"bold"}}}}},l.donut||{})):"pie"===i&&(s=angular.extend(s,{itemStyle:{normal:{label:{position:"inner",formatter:function(e){return(+e.percent).toFixed()+"%"}},labelLine:{show:!1}},emphasis:{label:{show:!0,formatter:"{b}\n{d}%"}}}},l.pie||{}))),t(i)&&(s.type="map",s=angular.extend(s,r,l.map||{})),l.stack&&(s.stack="total"),"radar"===i&&(s.data=r.data),a(i)&&(s.type="heatmap",s.name=r.name,s.data=r.data,s=angular.extend(s,{label:{normal:{show:!0}},itemStyle:{emphasis:{shadowBlur:10,shadowColor:"rgba(0, 0, 0, 0.5)"}}},l.heatmap||{})),n.push(s)}),n}function i(t,o,a){var r={data:[]};return e(a)?(t[0]&&angular.forEach(t[0].datapoints,function(e){r.data.push(e.x)}),r.orient="verticle",r.x="right",r.y="center"):"map"===a?r={}:(angular.forEach(t,function(e){r.data.push(e.name)}),r.orient="horizontal"),angular.extend(r,o.legend||{})}function n(e,t,o){var a={};switch(o){case"line":case"area":a.trigger="axis";break;case"pie":case"donut":case"bar":case"map":case"gauge":a.trigger="item"}return"pie"===o&&(a.formatter="{a}
{b}: {c} ({d}%)"),"map"===o&&(a.formatter="{b}"),angular.extend(a,angular.isObject(t.tooltip)?t.tooltip:{})}function c(t,o,a){return angular.isObject(o.title)?o.title:e(a)?null:{text:o.title,subtext:o.subtitle||"",x:50}}function s(e,t){return t||(t=function(e){return Math.round(100*e)/100}),e=Math.abs(e),e>=1e12?t(e/1e12)+"T":e>=1e9?t(e/1e9)+"B":e>=1e6?t(e/1e6)+"M":e>=1e3?t(e/1e3)+"K":1>e&&e>0?t(e):0===e?"":t(e)}return{isPieChart:e,isAxisChart:o,isHeatmapChart:a,getAxisTicks:r,getSeries:l,getLegend:i,getTooltip:n,getTitle:c,formatKMBT:s}}),angular.module("angular-echarts.theme",[]).factory("theme",["infographic","macarons","shine","dark","roma",function(e,t,o,a,r){var l={infographic:e,macarons:t,shine:o,dark:a,roma:r};return{get:function(e){return l[e]?l[e]:{}}}}]),angular.module("angular-echarts.theme").factory("dark",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var t="#eee",o=function(){return{axisLine:{lineStyle:{color:t}},axisTick:{lineStyle:{color:t}},axisLabel:{textStyle:{color:t}},splitLine:{lineStyle:{type:"dashed",color:"#aaa"}},splitArea:{areaStyle:{color:t}}}},a=["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"],r={color:a,backgroundColor:"#333",tooltip:{axisPointer:{lineStyle:{color:t},crossStyle:{color:t}}},legend:{textStyle:{color:t}},textStyle:{color:t},title:{textStyle:{color:t}},toolbox:{iconStyle:{normal:{borderColor:t}}},dataZoom:{textStyle:{color:t}},timeline:{lineStyle:{color:t},itemStyle:{normal:{color:a[1]}},label:{normal:{textStyle:{color:t}}},controlStyle:{normal:{color:t,borderColor:t}}},timeAxis:o(),logAxis:o(),valueAxis:o(),categoryAxis:o(),line:{symbol:"circle"},graph:{color:a},gauge:{title:{textStyle:{color:t}}},candlestick:{itemStyle:{normal:{color:"#FD1050",color0:"#0CF49B",borderColor:"#FD1050",borderColor0:"#0CF49B"}}}};return r.categoryAxis.splitLine.show=!1,echarts.registerTheme("dark",r),r}),angular.module("angular-echarts.theme").factory("infographic",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var t=["#C1232B","#27727B","#FCCE10","#E87C25","#B5C334","#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"],o={color:t,title:{textStyle:{fontWeight:"normal",color:"#27727B"}},visualMap:{color:["#C1232B","#FCCE10"]},toolbox:{iconStyle:{normal:{borderColor:t[0]}}},tooltip:{backgroundColor:"rgba(50,50,50,0.5)",axisPointer:{type:"line",lineStyle:{color:"#27727B",type:"dashed"},crossStyle:{color:"#27727B"},shadowStyle:{color:"rgba(200,200,200,0.3)"}}},dataZoom:{dataBackgroundColor:"rgba(181,195,52,0.3)",fillerColor:"rgba(181,195,52,0.2)",handleColor:"#27727B"},categoryAxis:{axisLine:{lineStyle:{color:"#27727B"}},splitLine:{show:!1}},valueAxis:{axisLine:{show:!1},splitArea:{show:!1},splitLine:{lineStyle:{color:["#ccc"],type:"dashed"}}},timeline:{lineStyle:{color:"#27727B"},controlStyle:{normal:{color:"#27727B",borderColor:"#27727B"}},symbol:"emptyCircle",symbolSize:3},line:{itemStyle:{normal:{borderWidth:2,borderColor:"#fff",lineStyle:{width:3}},emphasis:{borderWidth:0}},symbol:"circle",symbolSize:3.5},candlestick:{itemStyle:{normal:{color:"#C1232B",color0:"#B5C334",lineStyle:{width:1,color:"#C1232B",color0:"#B5C334"}}}},graph:{color:t},map:{label:{normal:{textStyle:{color:"#C1232B"}},emphasis:{textStyle:{color:"rgb(100,0,0)"}}},itemStyle:{normal:{areaColor:"#ddd",borderColor:"#eee"},emphasis:{areaColor:"#fe994e"}}},gauge:{axisLine:{lineStyle:{color:[[.2,"#B5C334"],[.8,"#27727B"],[1,"#C1232B"]]}},axisTick:{splitNumber:2,length:5,lineStyle:{color:"#fff"}},axisLabel:{textStyle:{color:"#fff"}},splitLine:{length:"5%",lineStyle:{color:"#fff"}},title:{offsetCenter:[0,-20]}}};return echarts.registerTheme("infographic",o),o}),angular.module("angular-echarts.theme").factory("macarons",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var t=["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],o={color:t,title:{textStyle:{fontWeight:"normal",color:"#008acd"}},visualMap:{itemWidth:15,color:["#5ab1ef","#e0ffff"]},toolbox:{iconStyle:{normal:{borderColor:t[0]}}},tooltip:{backgroundColor:"rgba(50,50,50,0.5)",axisPointer:{type:"line",lineStyle:{color:"#008acd"},crossStyle:{color:"#008acd"},shadowStyle:{color:"rgba(200,200,200,0.2)"}}},dataZoom:{dataBackgroundColor:"#efefff",fillerColor:"rgba(182,162,222,0.2)",handleColor:"#008acd"},grid:{borderColor:"#eee"},categoryAxis:{axisLine:{lineStyle:{color:"#008acd"}},splitLine:{lineStyle:{color:["#eee"]}}},valueAxis:{axisLine:{lineStyle:{color:"#008acd"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.1)","rgba(200,200,200,0.1)"]}},splitLine:{lineStyle:{color:["#eee"]}}},timeline:{lineStyle:{color:"#008acd"},controlStyle:{normal:{color:"#008acd"},emphasis:{color:"#008acd"}},symbol:"emptyCircle",symbolSize:3},line:{smooth:!0,symbol:"emptyCircle",symbolSize:3},candlestick:{itemStyle:{normal:{color:"#d87a80",color0:"#2ec7c9",lineStyle:{color:"#d87a80",color0:"#2ec7c9"}}}},scatter:{symbol:"circle",symbolSize:4},map:{label:{normal:{textStyle:{color:"#d87a80"}}},itemStyle:{normal:{borderColor:"#eee",areaColor:"#ddd"},emphasis:{areaColor:"#fe994e"}}},graph:{color:t},gauge:{axisLine:{lineStyle:{color:[[.2,"#2ec7c9"],[.8,"#5ab1ef"],[1,"#d87a80"]],width:10}},axisTick:{splitNumber:10,length:15,lineStyle:{color:"auto"}},splitLine:{length:22,lineStyle:{color:"auto"}},pointer:{width:5}}};return echarts.registerTheme("macarons",o),o}),angular.module("angular-echarts.theme").factory("roma",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var t=["#E01F54","#001852","#f5e8c8","#b8d2c7","#c6b38e","#a4d8c2","#f3d999","#d3758f","#dcc392","#2e4783","#82b6e9","#ff6347","#a092f1","#0a915d","#eaf889","#6699FF","#ff6666","#3cb371","#d5b158","#38b6b6"],o={color:t,visualMap:{color:["#e01f54","#e7dbc3"],textStyle:{color:"#333"}},candlestick:{itemStyle:{normal:{color:"#e01f54",color0:"#001852",lineStyle:{width:1,color:"#f5e8c8",color0:"#b8d2c7"}}}},graph:{color:t},gauge:{axisLine:{lineStyle:{color:[[.2,"#E01F54"],[.8,"#b8d2c7"],[1,"#001852"]],width:8}}}};return echarts.registerTheme("roma",o),echarts}),angular.module("angular-echarts.theme").factory("shine",function(){var e=function(e){"undefined"!=typeof console&&console&&console.error&&console.error(e)};if(!echarts)return e("ECharts is not Loaded"),void 0;var t=["#c12e34","#e6b600","#0098d9","#2b821d","#005eaa","#339ca8","#cda819","#32a487"],o={color:t,title:{textStyle:{fontWeight:"normal"}},visualMap:{color:["#1790cf","#a2d4e6"]},toolbox:{iconStyle:{normal:{borderColor:"#06467c"}}},tooltip:{backgroundColor:"rgba(0,0,0,0.6)"},dataZoom:{dataBackgroundColor:"#dedede",fillerColor:"rgba(154,217,247,0.2)",handleColor:"#005eaa"},timeline:{lineStyle:{color:"#005eaa"},controlStyle:{normal:{color:"#005eaa",borderColor:"#005eaa"}}},candlestick:{itemStyle:{normal:{color:"#c12e34",color0:"#2b821d",lineStyle:{width:1,color:"#c12e34",color0:"#2b821d"}}}},graph:{color:t},map:{label:{normal:{textStyle:{color:"#c12e34"}},emphasis:{textStyle:{color:"#c12e34"}}},itemStyle:{normal:{borderColor:"#eee",areaColor:"#ddd"},emphasis:{areaColor:"#e6b600"}}},gauge:{axisLine:{show:!0,lineStyle:{color:[[.2,"#2b821d"],[.8,"#005eaa"],[1,"#c12e34"]],width:5}},axisTick:{splitNumber:10,length:8,lineStyle:{color:"auto"}},axisLabel:{textStyle:{color:"auto"}},splitLine:{length:12,lineStyle:{color:"auto"}},pointer:{length:"90%",width:3,color:"auto"},title:{textStyle:{color:"#333"}},detail:{textStyle:{color:"auto"}}}};return echarts.registerTheme("shine",o),o})}(); \ No newline at end of file diff --git a/docs/docs.js b/docs/docs.js index 58e4ea2..133b517 100755 --- a/docs/docs.js +++ b/docs/docs.js @@ -1,4 +1,4 @@ -(function () { +(function() { 'use strict'; var pageload = { @@ -33,8 +33,9 @@ ] }; + function updateData($interval) { - $interval(function () { + $interval(function() { pageload.datapoints.push({ x: pageload.datapoints[pageload.datapoints.length - 1].x + 1, y: Math.round(Math.random() * 2000) }); firstPaint.datapoints.push({ x: firstPaint.datapoints[firstPaint.datapoints.length - 1].x + 1, y: Math.round(Math.random() * 100) }); pageload.datapoints.shift(); @@ -44,7 +45,7 @@ var app = angular.module('docs', ['angular-echarts']); - app.controller('LineChartController', function ($scope, $interval) { + app.controller('LineChartController', function($scope, $interval) { $scope.config = { // title: 'Line Chart', @@ -53,17 +54,20 @@ showXAxis: true, showYAxis: true, showLegend: true, - stack: false + stack: false, + textStyle: { //add support to global text style + fontFamily: 'Ubuntu' + } }; - $scope.data = [ pageload ]; - $scope.multiple = [pageload, firstPaint ]; + $scope.data = [pageload]; + $scope.multiple = [pageload, firstPaint]; // CAUTION: 这行必须放在这里，不然 angular 感知不到数据变化 updateData($interval); }); - app.controller('BarChartController', function ($scope) { + app.controller('BarChartController', function($scope) { $scope.config = { title: 'Bar Chart', @@ -72,12 +76,196 @@ stack: true }; - $scope.data = [ pageload ]; - $scope.multiple = [pageload, firstPaint ]; + $scope.data = [pageload]; + $scope.multiple = [pageload, firstPaint]; + + }); + + //simple bar chart with support for additional options + app.controller('SimpleBarChartController', function($scope) { + + $scope.options = { + 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' + }], + legend: { + orient: 'horizontal', + x: 'center', + y: 'top', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] + }, + series: [{ + type: 'bar', + barWidth: '20%', + markPoint: { + data: [ + { name: 'Maximum', type: 'max' }, + { name: 'Minimum', type: 'min' } + ] + }, + markLine: { + data: [ + { type: 'average', name: 'Average' } + ] + }, + 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' + } + } + } + ] + }] + }; + + }); + + //simple inverted bar chart with support for additional options + app.controller('SimpleInvertedBarChartController', function($scope) { + + $scope.options = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: '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' + }], + legend: { + orient: 'vertial', + x: 'left', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] + }, + series: [{ + type: 'bar', + barWidth: '20%', + data: [{ + name: 'Mon', + value: 10, + itemStyle: { + normal: { + color: '#3398DB' + } + } + }, + { + name: 'Tue', + value: 52, + itemStyle: { + normal: { + color: '#960F1E' + } + } + + }, + { + name: 'Wed', + value: 200, + itemStyle: { + normal: { + color: '#263238' + } + } + }, + { + name: 'Thu', + value: 334, + itemStyle: { + normal: { + color: '#06C947' + } + } + }, + { + name: 'Fri', + value: 39, + itemStyle: { + normal: { + color: '#C8B1EF' + } + } + } + ] + }] + }; }); - app.controller('AreaChartController', function ($scope) { + app.controller('AreaChartController', function($scope) { $scope.config = { title: 'Area Chart', @@ -87,12 +275,12 @@ stack: true }; - $scope.data = [ pageload ]; - $scope.multiple = [pageload, firstPaint ]; + $scope.data = [pageload]; + $scope.multiple = [pageload, firstPaint]; }); - app.controller('PieChartController', function ($scope) { + app.controller('PieChartController', function($scope) { $scope.config = { title: 'Pie Chart', @@ -100,56 +288,51 @@ debug: true }; - $scope.data = [ pageload ]; + $scope.data = [pageload]; }); - app.controller('GaugeChartController', function ($scope) { + app.controller('GaugeChartController', function($scope) { $scope.config = { debug: true }; - $scope.data = [ pageload ]; + $scope.data = [pageload]; }); - app.controller('RadarChartController', function ($scope) { + app.controller('RadarChartController', function($scope) { $scope.config = { width: 600, height: 450, - polar : [ + polar: [{ + indicator: [ + { text: '销售（sales）', max: 6000 }, + { text: '管理（Administration）', max: 16000 }, + { text: '信息技术（Information Techology）', max: 30000 }, + { text: '客服（Customer Support）', max: 38000 }, + { text: '研发（Development）', max: 52000 }, + { text: '市场（Marketing）', max: 25000 } + ] + }] + }; + + $scope.data = [{ + name: '预算 vs 开销（Budget vs spending）', + type: 'radar', + data: [{ + value: [4300, 10000, 28000, 35000, 50000, 19000], + name: '预算分配（Allocated Budget）' + }, { - indicator : [ - { text: '销售（sales）', max: 6000}, - { text: '管理（Administration）', max: 16000}, - { text: '信息技术（Information Techology）', max: 30000}, - { text: '客服（Customer Support）', max: 38000}, - { text: '研发（Development）', max: 52000}, - { text: '市场（Marketing）', max: 25000} - ] + value: [5000, 14000, 28000, 31000, 42000, 21000], + name: '实际开销（Actual Spending）' } ] - }; - - $scope.data = [ - { - name: '预算 vs 开销（Budget vs spending）', - type: 'radar', - data : [ - { - value : [4300, 10000, 28000, 35000, 50000, 19000], - name : '预算分配（Allocated Budget）' - }, - { - value : [5000, 14000, 28000, 31000, 42000, 21000], - name : '实际开销（Actual Spending）' - } - ] - } - ]; + }]; }); - app.controller('MapChartController', function ($scope) { + app.controller('MapChartController', function($scope) { $scope.config = { height: 600, title: { @@ -157,38 +340,37 @@ subtext: '纯属虚构', left: 'center' }, - tooltip : { + tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', - data:['iphone3','iphone4','iphone5'] + data: ['iphone3', 'iphone4', 'iphone5'] }, visualMap: { min: 0, max: 2500, left: 'left', top: 'bottom', - text:['高','低'], // 文本，默认为数值文本 - calculable : true + text: ['高', '低'], // 文本，默认为数值文本 + calculable: true }, toolbox: { show: true, - orient : 'vertical', + orient: 'vertical', left: 'right', top: 'center', - feature : { - mark : {show: true}, - dataView : {show: true, readOnly: false}, - restore : {show: true}, - saveAsImage : {show: true} + feature: { + mark: { show: true }, + dataView: { show: true, readOnly: false }, + restore: { show: true }, + saveAsImage: { show: true } } }, }; - $scope.data = [ - { + $scope.data = [{ name: 'iphone3', type: 'map', mapType: 'china', @@ -201,41 +383,41 @@ show: true } }, - data:[ - {name: '北京',value: Math.round(Math.random()*1000)}, - {name: '天津',value: Math.round(Math.random()*1000)}, - {name: '上海',value: Math.round(Math.random()*1000)}, - {name: '重庆',value: Math.round(Math.random()*1000)}, - {name: '河北',value: Math.round(Math.random()*1000)}, - {name: '河南',value: Math.round(Math.random()*1000)}, - {name: '云南',value: Math.round(Math.random()*1000)}, - {name: '辽宁',value: Math.round(Math.random()*1000)}, - {name: '黑龙江',value: Math.round(Math.random()*1000)}, - {name: '湖南',value: Math.round(Math.random()*1000)}, - {name: '安徽',value: Math.round(Math.random()*1000)}, - {name: '山东',value: Math.round(Math.random()*1000)}, - {name: '新疆',value: Math.round(Math.random()*1000)}, - {name: '江苏',value: Math.round(Math.random()*1000)}, - {name: '浙江',value: Math.round(Math.random()*1000)}, - {name: '江西',value: Math.round(Math.random()*1000)}, - {name: '湖北',value: Math.round(Math.random()*1000)}, - {name: '广西',value: Math.round(Math.random()*1000)}, - {name: '甘肃',value: Math.round(Math.random()*1000)}, - {name: '山西',value: Math.round(Math.random()*1000)}, - {name: '内蒙古',value: Math.round(Math.random()*1000)}, - {name: '陕西',value: Math.round(Math.random()*1000)}, - {name: '吉林',value: Math.round(Math.random()*1000)}, - {name: '福建',value: Math.round(Math.random()*1000)}, - {name: '贵州',value: Math.round(Math.random()*1000)}, - {name: '广东',value: Math.round(Math.random()*1000)}, - {name: '青海',value: Math.round(Math.random()*1000)}, - {name: '西藏',value: Math.round(Math.random()*1000)}, - {name: '四川',value: Math.round(Math.random()*1000)}, - {name: '宁夏',value: Math.round(Math.random()*1000)}, - {name: '海南',value: Math.round(Math.random()*1000)}, - {name: '台湾',value: Math.round(Math.random()*1000)}, - {name: '香港',value: Math.round(Math.random()*1000)}, - {name: '澳门',value: Math.round(Math.random()*1000)} + data: [ + { name: '北京', value: Math.round(Math.random() * 1000) }, + { name: '天津', value: Math.round(Math.random() * 1000) }, + { name: '上海', value: Math.round(Math.random() * 1000) }, + { name: '重庆', value: Math.round(Math.random() * 1000) }, + { name: '河北', value: Math.round(Math.random() * 1000) }, + { name: '河南', value: Math.round(Math.random() * 1000) }, + { name: '云南', value: Math.round(Math.random() * 1000) }, + { name: '辽宁', value: Math.round(Math.random() * 1000) }, + { name: '黑龙江', value: Math.round(Math.random() * 1000) }, + { name: '湖南', value: Math.round(Math.random() * 1000) }, + { name: '安徽', value: Math.round(Math.random() * 1000) }, + { name: '山东', value: Math.round(Math.random() * 1000) }, + { name: '新疆', value: Math.round(Math.random() * 1000) }, + { name: '江苏', value: Math.round(Math.random() * 1000) }, + { name: '浙江', value: Math.round(Math.random() * 1000) }, + { name: '江西', value: Math.round(Math.random() * 1000) }, + { name: '湖北', value: Math.round(Math.random() * 1000) }, + { name: '广西', value: Math.round(Math.random() * 1000) }, + { name: '甘肃', value: Math.round(Math.random() * 1000) }, + { name: '山西', value: Math.round(Math.random() * 1000) }, + { name: '内蒙古', value: Math.round(Math.random() * 1000) }, + { name: '陕西', value: Math.round(Math.random() * 1000) }, + { name: '吉林', value: Math.round(Math.random() * 1000) }, + { name: '福建', value: Math.round(Math.random() * 1000) }, + { name: '贵州', value: Math.round(Math.random() * 1000) }, + { name: '广东', value: Math.round(Math.random() * 1000) }, + { name: '青海', value: Math.round(Math.random() * 1000) }, + { name: '西藏', value: Math.round(Math.random() * 1000) }, + { name: '四川', value: Math.round(Math.random() * 1000) }, + { name: '宁夏', value: Math.round(Math.random() * 1000) }, + { name: '海南', value: Math.round(Math.random() * 1000) }, + { name: '台湾', value: Math.round(Math.random() * 1000) }, + { name: '香港', value: Math.round(Math.random() * 1000) }, + { name: '澳门', value: Math.round(Math.random() * 1000) } ] }, { @@ -250,26 +432,26 @@ show: true } }, - data:[ - {name: '北京',value: Math.round(Math.random()*1000)}, - {name: '天津',value: Math.round(Math.random()*1000)}, - {name: '上海',value: Math.round(Math.random()*1000)}, - {name: '重庆',value: Math.round(Math.random()*1000)}, - {name: '河北',value: Math.round(Math.random()*1000)}, - {name: '安徽',value: Math.round(Math.random()*1000)}, - {name: '新疆',value: Math.round(Math.random()*1000)}, - {name: '浙江',value: Math.round(Math.random()*1000)}, - {name: '江西',value: Math.round(Math.random()*1000)}, - {name: '山西',value: Math.round(Math.random()*1000)}, - {name: '内蒙古',value: Math.round(Math.random()*1000)}, - {name: '吉林',value: Math.round(Math.random()*1000)}, - {name: '福建',value: Math.round(Math.random()*1000)}, - {name: '广东',value: Math.round(Math.random()*1000)}, - {name: '西藏',value: Math.round(Math.random()*1000)}, - {name: '四川',value: Math.round(Math.random()*1000)}, - {name: '宁夏',value: Math.round(Math.random()*1000)}, - {name: '香港',value: Math.round(Math.random()*1000)}, - {name: '澳门',value: Math.round(Math.random()*1000)} + data: [ + { name: '北京', value: Math.round(Math.random() * 1000) }, + { name: '天津', value: Math.round(Math.random() * 1000) }, + { name: '上海', value: Math.round(Math.random() * 1000) }, + { name: '重庆', value: Math.round(Math.random() * 1000) }, + { name: '河北', value: Math.round(Math.random() * 1000) }, + { name: '安徽', value: Math.round(Math.random() * 1000) }, + { name: '新疆', value: Math.round(Math.random() * 1000) }, + { name: '浙江', value: Math.round(Math.random() * 1000) }, + { name: '江西', value: Math.round(Math.random() * 1000) }, + { name: '山西', value: Math.round(Math.random() * 1000) }, + { name: '内蒙古', value: Math.round(Math.random() * 1000) }, + { name: '吉林', value: Math.round(Math.random() * 1000) }, + { name: '福建', value: Math.round(Math.random() * 1000) }, + { name: '广东', value: Math.round(Math.random() * 1000) }, + { name: '西藏', value: Math.round(Math.random() * 1000) }, + { name: '四川', value: Math.round(Math.random() * 1000) }, + { name: '宁夏', value: Math.round(Math.random() * 1000) }, + { name: '香港', value: Math.round(Math.random() * 1000) }, + { name: '澳门', value: Math.round(Math.random() * 1000) } ] }, { @@ -284,79 +466,248 @@ show: true } }, - data:[ - {name: '北京',value: Math.round(Math.random()*1000)}, - {name: '天津',value: Math.round(Math.random()*1000)}, - {name: '上海',value: Math.round(Math.random()*1000)}, - {name: '广东',value: Math.round(Math.random()*1000)}, - {name: '台湾',value: Math.round(Math.random()*1000)}, - {name: '香港',value: Math.round(Math.random()*1000)}, - {name: '澳门',value: Math.round(Math.random()*1000)} + data: [ + { name: '北京', value: Math.round(Math.random() * 1000) }, + { name: '天津', value: Math.round(Math.random() * 1000) }, + { name: '上海', value: Math.round(Math.random() * 1000) }, + { name: '广东', value: Math.round(Math.random() * 1000) }, + { name: '台湾', value: Math.round(Math.random() * 1000) }, + { name: '香港', value: Math.round(Math.random() * 1000) }, + { name: '澳门', value: Math.round(Math.random() * 1000) } ] } ]; }); - app.controller('HeatmapChartController', function ($scope, $interval) { - //Adapted from https://ecomfe.github.io/echarts-examples/public/editor.html?c=heatmap-cartesian - var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', - '7a', '8a', '9a','10a','11a', - '12p', '1p', '2p', '3p', '4p', '5p', - '6p', '7p', '8p', '9p', '10p', '11p']; - var days = ['Saturday', 'Friday', 'Thursday', - 'Wednesday', 'Tuesday', 'Monday', 'Sunday']; - - var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]]; - - data = data.map(function (item) { - return [item[1], item[0], item[2] || '-']; - }); - - $scope.data = [ - { - name: 'Punch Card', - data: data - } - ]; - - $scope.config = { - title: 'Heatmap Chart', - subtitle: 'Heatmap Subtitle', - tooltip: { - position: 'top' - }, - animation: false, - grid: { - height: '50%', - y: '10%' - }, - xAxis: { - type: 'category', - data: hours, - splitArea: { - show: true - } - }, - yAxis: { - type: 'category', - data: days, - splitArea: { - show: true - } - }, - visualMap: { - min: 0, - max: 10, - calculable: true, - orient: 'horizontal', - left: 'center', - bottom: '15%' - }, - }; + app.controller('HeatmapChartController', function($scope, $interval) { + //Adapted from https://ecomfe.github.io/echarts-examples/public/editor.html?c=heatmap-cartesian + var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', + '7a', '8a', '9a', '10a', '11a', + '12p', '1p', '2p', '3p', '4p', '5p', + '6p', '7p', '8p', '9p', '10p', '11p' + ]; + var days = ['Saturday', 'Friday', 'Thursday', + 'Wednesday', 'Tuesday', 'Monday', 'Sunday' + ]; + + var data = [ + [0, 0, 5], + [0, 1, 1], + [0, 2, 0], + [0, 3, 0], + [0, 4, 0], + [0, 5, 0], + [0, 6, 0], + [0, 7, 0], + [0, 8, 0], + [0, 9, 0], + [0, 10, 0], + [0, 11, 2], + [0, 12, 4], + [0, 13, 1], + [0, 14, 1], + [0, 15, 3], + [0, 16, 4], + [0, 17, 6], + [0, 18, 4], + [0, 19, 4], + [0, 20, 3], + [0, 21, 3], + [0, 22, 2], + [0, 23, 5], + [1, 0, 7], + [1, 1, 0], + [1, 2, 0], + [1, 3, 0], + [1, 4, 0], + [1, 5, 0], + [1, 6, 0], + [1, 7, 0], + [1, 8, 0], + [1, 9, 0], + [1, 10, 5], + [1, 11, 2], + [1, 12, 2], + [1, 13, 6], + [1, 14, 9], + [1, 15, 11], + [1, 16, 6], + [1, 17, 7], + [1, 18, 8], + [1, 19, 12], + [1, 20, 5], + [1, 21, 5], + [1, 22, 7], + [1, 23, 2], + [2, 0, 1], + [2, 1, 1], + [2, 2, 0], + [2, 3, 0], + [2, 4, 0], + [2, 5, 0], + [2, 6, 0], + [2, 7, 0], + [2, 8, 0], + [2, 9, 0], + [2, 10, 3], + [2, 11, 2], + [2, 12, 1], + [2, 13, 9], + [2, 14, 8], + [2, 15, 10], + [2, 16, 6], + [2, 17, 5], + [2, 18, 5], + [2, 19, 5], + [2, 20, 7], + [2, 21, 4], + [2, 22, 2], + [2, 23, 4], + [3, 0, 7], + [3, 1, 3], + [3, 2, 0], + [3, 3, 0], + [3, 4, 0], + [3, 5, 0], + [3, 6, 0], + [3, 7, 0], + [3, 8, 1], + [3, 9, 0], + [3, 10, 5], + [3, 11, 4], + [3, 12, 7], + [3, 13, 14], + [3, 14, 13], + [3, 15, 12], + [3, 16, 9], + [3, 17, 5], + [3, 18, 5], + [3, 19, 10], + [3, 20, 6], + [3, 21, 4], + [3, 22, 4], + [3, 23, 1], + [4, 0, 1], + [4, 1, 3], + [4, 2, 0], + [4, 3, 0], + [4, 4, 0], + [4, 5, 1], + [4, 6, 0], + [4, 7, 0], + [4, 8, 0], + [4, 9, 2], + [4, 10, 4], + [4, 11, 4], + [4, 12, 2], + [4, 13, 4], + [4, 14, 4], + [4, 15, 14], + [4, 16, 12], + [4, 17, 1], + [4, 18, 8], + [4, 19, 5], + [4, 20, 3], + [4, 21, 7], + [4, 22, 3], + [4, 23, 0], + [5, 0, 2], + [5, 1, 1], + [5, 2, 0], + [5, 3, 3], + [5, 4, 0], + [5, 5, 0], + [5, 6, 0], + [5, 7, 0], + [5, 8, 2], + [5, 9, 0], + [5, 10, 4], + [5, 11, 1], + [5, 12, 5], + [5, 13, 10], + [5, 14, 5], + [5, 15, 7], + [5, 16, 11], + [5, 17, 6], + [5, 18, 0], + [5, 19, 5], + [5, 20, 3], + [5, 21, 4], + [5, 22, 2], + [5, 23, 0], + [6, 0, 1], + [6, 1, 0], + [6, 2, 0], + [6, 3, 0], + [6, 4, 0], + [6, 5, 0], + [6, 6, 0], + [6, 7, 0], + [6, 8, 0], + [6, 9, 0], + [6, 10, 1], + [6, 11, 0], + [6, 12, 2], + [6, 13, 1], + [6, 14, 3], + [6, 15, 4], + [6, 16, 0], + [6, 17, 0], + [6, 18, 0], + [6, 19, 0], + [6, 20, 1], + [6, 21, 2], + [6, 22, 2], + [6, 23, 6] + ]; + + data = data.map(function(item) { + return [item[1], item[0], item[2] || '-']; + }); + + $scope.data = [{ + name: 'Punch Card', + data: data + }]; + + $scope.config = { + title: 'Heatmap Chart', + subtitle: 'Heatmap Subtitle', + tooltip: { + position: 'top' + }, + animation: false, + grid: { + height: '50%', + y: '10%' + }, + xAxis: { + type: 'category', + data: hours, + splitArea: { + show: true + } + }, + yAxis: { + type: 'category', + data: days, + splitArea: { + show: true + } + }, + visualMap: { + min: 0, + max: 10, + calculable: true, + orient: 'horizontal', + left: 'center', + bottom: '15%' + }, + }; }); - app.controller('AjaxChartController', function ($scope, $interval) { + app.controller('AjaxChartController', function($scope, $interval) { $scope.config = { debug: true, @@ -365,10 +716,9 @@ $scope.data = './docs/data.json'; - $interval(function () { + $interval(function() { $scope.data = './docs/data.json'; }, 3000); }); -})(); - +})(); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 5925f04..4bf6356 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,6 +1,6 @@ 'use strict'; -var gulp = require('gulp'); +var gulp = require('gulp'); var plugins = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); @@ -32,7 +32,7 @@ gulp.task('browser-sync', function() { /** * Watching file change & rebuild */ -gulp.task('watch', function () { +gulp.task('watch', function() { gulp.watch(['src/**/*.js', 'docs/**/*.[js,html]'], ['build']); @@ -41,19 +41,21 @@ gulp.task('watch', function () { /** * build Tasks */ -gulp.task('build', function () { +gulp.task('build', function() { // cleanup previous builds - gulp.src('dist/*.js', {read: false}) + gulp.src('dist/*.js', { read: false }) .pipe(plugins.clean()); // build js - gulp.src(['src/directive.js', 'src/util.js', 'src/theme.js', 'src/theme/*.js']) - .pipe(plugins.removeUseStrict()) + gulp.src([ + 'src/directive.js', 'src/echart.js', + 'src/util.js', 'src/theme.js', 'src/theme/*.js' + ]).pipe(plugins.removeUseStrict()) .pipe(plugins.concat('angular-echarts.js')) .pipe(plugins.wrap('(function () {<%= contents %>})();')) .pipe(gulp.dest('dist')) - .pipe(plugins.rename({ suffix: '.min'})) + .pipe(plugins.rename({ suffix: '.min' })) .pipe(plugins.uglify({ outSourceMap: true, mangle: true, report: 'gzip' })) .pipe(plugins.size({ showFiles: true })) .pipe(gulp.dest('dist')); @@ -68,12 +70,11 @@ gulp.task('default', ['build', 'browser-sync', 'watch', 'server']); /** * publish: build then bump version */ -gulp.task('publish', ['build'], function () { +gulp.task('publish', ['build'], function() { // bump bower, npm versions gulp.src(['package.json', 'bower.json']) .pipe(plugins.bump()) .pipe(gulp.dest('.')); -}); - +}); \ No newline at end of file diff --git a/index.html b/index.html index fc54f75..3c77820 100755 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + @@ -44,6 +45,16 @@

Bar Chart

+

Echart - (using echart directive)

+
+
+ +
+
+ +
+
+

Area Chart

diff --git a/package.json b/package.json index 535e05f..aee9969 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-echarts", - "version": "1.0.2", + "version": "1.1.1", "description": "angular baidu echart directives", "main": "index.js", "scripts": { diff --git a/src/directive.js b/src/directive.js index 54c82aa..292e550 100644 --- a/src/directive.js +++ b/src/directive.js @@ -7,10 +7,10 @@ * @param {String} type, chart type */ function getLinkFunction($http, theme, util, type) { - return function (scope, element, attrs) { + return function(scope, element, attrs) { scope.config = scope.config || {}; - var ndWrapper = element.find('div')[0], + var ndWrapper = element.find('div')[0], ndParent = element.parent()[0], parentWidth = ndParent.clientWidth, parentHeight = ndParent.clientHeight, @@ -46,7 +46,7 @@ function getLinkFunction($http, theme, util, type) { show: false }, axisLabel: { - formatter: function (v) { + formatter: function(v) { return util.formatKMBT(v); } } @@ -58,15 +58,18 @@ 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) { + angular.forEach(options.xAxis, function(axis) { axis.axisLine = { show: false }; axis.axisLabel = { show: false }; axis.axisTick = { show: false }; @@ -74,7 +77,7 @@ function getLinkFunction($http, theme, util, type) { } if (!config.showYAxis) { - angular.forEach(options.yAxis, function (axis) { + angular.forEach(options.yAxis, function(axis) { axis.axisLine = { show: false }; axis.axisLabel = { show: false }; axis.axisTick = { show: false }; @@ -92,8 +95,8 @@ function getLinkFunction($http, theme, util, type) { if (config.dataZoom) { options.dataZoom = angular.extend({ - show : true, - realtime : true + show: true, + realtime: true }, config.dataZoom); } @@ -134,10 +137,10 @@ function getLinkFunction($http, theme, util, type) { } if (Array.isArray(scope.config.event)) { - scope.config.event.forEach(function (ele) { - if(!chartEvent[ele.type]) { + scope.config.event.forEach(function(ele) { + if (!chartEvent[ele.type]) { chartEvent[ele.type] = true; - chart.on(ele.type, function (param) { + chart.on(ele.type, function(param) { ele.fn(param); }); } @@ -154,7 +157,7 @@ function getLinkFunction($http, theme, util, type) { chart.showLoading({ text: scope.config.loading || '奋力加载中...', textStyle: textStyle }); // fire data request - $http.get(scope.data).then(function (response) { + $http.get(scope.data).then(function(response) { isAjaxInProgress = false; chart.hideLoading(); @@ -174,7 +177,7 @@ function getLinkFunction($http, theme, util, type) { } }); - // if data is avaliable, render immediately + // if data is avaliable, render immediately } else { options = getOptions(scope.data, scope.config, type); if (scope.config.forceClear) { @@ -191,11 +194,11 @@ function getLinkFunction($http, theme, util, type) { } // update when charts config changes - scope.$watch(function () { return scope.config; }, function (value) { + scope.$watch(function() { return scope.config; }, function(value) { if (value) { setOptions(); } }, true); - scope.$watch(function () { return scope.data; }, function (value) { + scope.$watch(function() { return scope.data; }, function(value) { if (value) { setOptions(); } }, true); @@ -208,8 +211,8 @@ function getLinkFunction($http, theme, util, type) { var app = angular.module('angular-echarts', ['angular-echarts.theme', 'angular-echarts.util']); 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) { + (function(type) { + app.directive(type + 'Chart', ['$http', 'theme', 'util', function($http, theme, util) { return { restrict: 'EA', template: '
', @@ -222,5 +225,4 @@ for (var i = 0, n = types.length; i < n; i++) { }; }]); })(types[i]); -} - +} \ No newline at end of file diff --git a/src/echart.js b/src/echart.js new file mode 100644 index 0000000..95ce687 --- /dev/null +++ b/src/echart.js @@ -0,0 +1,144 @@ +'use strict'; + +/** + * simple echarts directive + * Merge of concepts from https://github.com/liekkas/ng-echarts & + * https://github.com/wangshijun/angular-echarts + * @author lykmapipo + * //TODO support $http + * //TODO add basic charts shortcuts + */ +angular + .module('angular-echarts') + .directive('echart', [function() { + return { + restrict: 'EA', + template: '
', + 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(); + } + + }); + + } + }; + }]); \ No newline at end of file