https://github.com/wangshijun/angular-echarts

:chart: angularjs bindings for baidu echarts
https://github.com/wangshijun/angular-echarts

angular-echarts angularjs chart echarts

Last synced: 2 days ago
JSON representation

:chart: angularjs bindings for baidu echarts

• Host: GitHub
• URL: https://github.com/wangshijun/angular-echarts
• Owner: wangshijun
• Created: 2014-06-30T09:11:18.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-08-26T07:54:30.000Z (over 4 years ago)
• Last Synced: 2024-11-16T03:43:41.053Z (27 days ago)
• Topics: angular-echarts, angularjs, chart, echarts
• Language: JavaScript
• Homepage:
• Size: 208 KB
• Stars: 355
• Watchers: 29
• Forks: 141
• Open Issues: 47
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-echarts - angular-echarts - AngularJS bindings for Apache ECharts. (Frameworks / AngularJS Binding)

README

        
# eCharts + AngularJS

AngularJS directives to use [eCharts](http://ecomfe.github.io/echarts/index-en.html)

## Prerequisites

You will need the following things properly installed on your computer.

* [Node.js](http://nodejs.org/) (with NPM) and [Bower](http://bower.io/)

## Breaking Changes in V1

* `echart` support is v3.4.0;

* `angular` support is v1.6.2;

* map chart requires additional work, see below;

* custome themes are removed, all uses the build in ones;

## Building

- Preparing

`bower install` & `npm install`

- default

`gulp`

> develop with realtime monitor, automatic open browser to view example

- build

`gulp build`

> Build file to dist

- publish

`gulp publish`

> Build & bump npm versions

## Usage

Install bower dependency and save for production

```

$ bower install angular-echarts --save

```

Inject echarts and angular-echarts file into page

```

```

*Download and inject map definitions if you want a map chart: http://echarts.baidu.com/download-map.html*

Add dependency and declare a demo controller

```

var app = angular.module('demo', ['angular-echarts']);

app.controller('LineChartController', function ($scope) {

    var pageload = {

        name: 'page.load',

        datapoints: [

            { x: 2001, y: 1012 },

            { x: 2002, y: 1023 },

            { x: 2003, y: 1045 },

            { x: 2004, y: 1062 },

            { x: 2005, y: 1032 },

            { x: 2006, y: 1040 },

            { x: 2007, y: 1023 },

            { x: 2008, y: 1090 },

            { x: 2009, y: 1012 },

            { x: 2010, y: 1012 },

        ]

    };

    var firstPaint = {

        name: 'page.firstPaint',

        datapoints: [

            { x: 2001, y: 22 },

            { x: 2002, y: 13 },

            { x: 2003, y: 35 },

            { x: 2004, y: 52 },

            { x: 2005, y: 32 },

            { x: 2006, y: 40 },

            { x: 2007, y: 63 },

            { x: 2008, y: 80 },

            { x: 2009, y: 20 },

            { x: 2010, y: 25 },

        ]

    };

    $scope.config = {

        title: 'Line Chart',

        subtitle: 'Line Chart Subtitle',

        debug: true,

        showXAxis: true,

        showYAxis: true,

        showLegend: true,

        stack: false,

    };

    $scope.data = [ pageload ];

    $scope.multiple = [pageload, firstPaint ];

});

```

Use this markup for a quick demo

```



    

    



```


## Contribute

* `git clone [email protected]:wangshijun/angular-echarts.git`

* change into the new directory

* `npm install`

* `bower install`

### __Running / Development__

* open ```docs/index.html``` in browser

> Or you can use `gulp server` and visit `http://localhost:8080` in Chrome browser, to avoid `XMLHttpRequest Cross origin requests` error.