Using the angular package echarts

Echarts is an open-source charting component that is rich in graphs and needs to be used to build a data presentation system at work. However, the original framework of the system is based on angular, and Echarts is based on the native JS, if the direct use of the lost angular two-way binding advantages, and subsequent code is not maintenance, so need to wrap echarts into a generic angular component.

Echarts native implementations are as follows:

<!--prepare a DOM-to-size (wide-height) for echarts<DivId="Main"style="height:400px" ></Div><!--echarts Single File Introduction-<ScriptSrc="Http://echarts.baidu.com/build/dist/echarts-all.js" ></Script><ScriptType="Text/javascript" > Initialize the Echarts chart based on the prepared DOMvar mychart = Echarts.init (document.getElementById (' main '));var option = {tooltip: {show:True}, Legend: {data:[' Sales ']}, Xaxis: [{type:' category ', data: ["Shirts","sweaters","chiffon shirts","trousers","high Heels","Socks"]}], YAxis: [{type: ' value '}], Series: [{ "name": "Sales", "type":"Bar", "Data": [5, Ten,    2, 0]}}; //Load data for Echarts object mychart.setoption (option); </script>                

The use of Echarts is relatively simple, as long as a DOM container provided by the JS provided by the Echarts object initialization can be, and the initialization of the parameter option is a JS object, it can be said that Echarts is configuration-based.

Then according to this idea, through the angular encapsulated instruction, only need to provide a data configuration interface to achieve the display of the chart, and can achieve the two-way banding data and views, using only the data to be modified to get the chart refresh.

So the custom directive is as follows:

Angular.module (' app ', []). Directive (' Echart ', [function() {functionLink($scope, Element, Attrs) {Initialize the Echarts chart based on the prepared DOMvar mychart = Echarts.init (element[0]);Monitor options changesif (attrs.uioptions) {attrs.$observe (' Uioptions ',function() {var options =$scope.$eval (attrs.uioptions);if (Angular.isobject (options)) {mychart.setoption (options);}},true); } }return {restrict:' A ', link:link}; }]). Controller (' Piecontroller ', [' $scope ',function( $scope) {function initData () {var arr = []; for (var i = 0; i < 6; i++) {Arr.push (parseint (Math.random () * 100));} return arr;} var data = InitData (); Console.log (data);  $scope. data = data;  $scope. Changdata = function Span class= "Hljs-params" > () {var data = InitData (); Console.log (data);  $scope. data = data; } }]); 

The attribute-directive is provided here, as long as the attribute is declared in the DOM tag, e-chart angular will initialize the DOM structure with Echarts, and the initialized parameter is another attribute in the directive declaration ui-options . Therefore, in the Controller, only need to bind the configuration parameters on the $scope, and then in the DOM structure to assign this parameter to the ui-options initialization, the subsequent need to update the chart directly modify the parameters on the $scope.

The HTML structure is as follows:

<Divclass="Col-xs-12"Ng-controller= "Piecontroller" > <button ng-click= "Changdata ()" >click me</< Span class= "Hljs-title" >button> <div e-chart ui-options= "{tooltip : {show:true}, Legend: {data: [' Sales ']}, Xaxis: [{type: ' Category ', data: [' shirt ', ' sweater ', ' chiffon shirt ', ' pants ', ' high heels ', ' socks ']}], YAxis: [{type: ' value '}], series: [{' Name ': ' Sales ', ' type ': ' Bar ', ' data ': {{data}}}]} "style=</div></ DIV>             

Encapsulating echarts with angular