angular echarts

Echarts + Angularjs

Angularjs指令使用Echarts

先决条件

您将需要在计算机上正确安装以下内容。

• Node.js（带有NPM）和Bower

破坏V1的变化

• echart支持为v3.4.0；
• angular支撑为v1.6.2;
• 地图图需要其他工作，请参见下文；
• 删除了Custome主题，所有这些主题都将其用于构建；

建筑

• 准备bower install和npm install

• 默认gulp

使用实时监视器开发，自动打开浏览器以查看示例

• 构建gulp build

构建文件

• 发布gulp publish

Build＆Bump NPM版本

用法

安装Bower依赖并保存生产

 $ bower install angular-echarts --save

注入Echarts和Angular-Acharts文件

 <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>

下载并注入地图定义如果您需要地图图表：http：//echarts.baidu.com/download-map.html

添加依赖并声明演示控制器

 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 ];

});

使用此标记进行快速演示

 <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>

贡献

• git clone git@github.com:wangshijun/angular-echarts.git
• 更改为新目录
• npm install
• bower install

跑步 /开发

• 浏览器中打开docs/index.html

或者，您可以使用gulp server并访问http://lo*c**alhost:8080在Chrome浏览器中，以避免XMLHttpRequest Cross origin requests错误。