eCharts + AngularJS

AngularJS directives to use eCharts

Prerequisites

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

Node.js (with NPM) and Bower

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

<script src="path/to/bower_components/echarts/dist/echarts.js"></script>
<script src="path/to/bower_components/angular-echarts/dist/angular-echarts.min.js"></script>

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

<div class="col-md-3" ng-controller="LineChartController">
    <line-chart config="config" data="data"></line-chart>
    <line-chart config="config" data="multiple"></line-chart>
</div>

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.

wangshijun/angular-echarts

wangshijun

Reviews

Repository Details