JarCasting
JarCasting JarCasting

angular-echarts

WebJar for angular-echarts

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Charts User Interface Angular Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-wangshijun-angular-echarts
Last Version

Last Version

1.0.2
Release Date

Release Date
Type

Type

jar
Description

Description

angular-echarts
WebJar for angular-echarts
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

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

Download github-com-wangshijun-angular-echarts

Filename Size
github-com-wangshijun-angular-echarts-1.0.2.pom
github-com-wangshijun-angular-echarts-1.0.2.jar 76 KB
github-com-wangshijun-angular-echarts-1.0.2-sources.jar 22 bytes
github-com-wangshijun-angular-echarts-1.0.2-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-wangshijun-angular-echarts/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-wangshijun-angular-echarts</artifactId>
    <version>1.0.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-wangshijun-angular-echarts/
implementation 'org.webjars.bower:github-com-wangshijun-angular-echarts:1.0.2'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-wangshijun-angular-echarts/
implementation ("org.webjars.bower:github-com-wangshijun-angular-echarts:1.0.2")
'org.webjars.bower:github-com-wangshijun-angular-echarts:jar:1.0.2'
<dependency org="org.webjars.bower" name="github-com-wangshijun-angular-echarts" rev="1.0.2">
  <artifact name="github-com-wangshijun-angular-echarts" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-wangshijun-angular-echarts', version='1.0.2')
)
libraryDependencies += "org.webjars.bower" % "github-com-wangshijun-angular-echarts" % "1.0.2"
[org.webjars.bower/github-com-wangshijun-angular-echarts "1.0.2"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.6,1.7)
org.webjars.bower : echarts jar [3.4,3.5)

Project Modules

There are no modules declared in this project.

eCharts + AngularJS

AngularJS directives to use eCharts

Prerequisites

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

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.

Versions

Version
1.0.2