Angular Echarts lite

AngularJS 1.2+ directive for baidu echarts v3

Demo (updated with every release)

Quick start

Install the library

npm install --save angular-echarts-lite

Then simply include the correct file in a closing <script> tag after angularJS and echarts

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

Add dependency and declare a demo controller

angular.module("demo", ['angular-echarts-lite'])
    .controller("DemoController", function () {
        this.config = {
            title: {
                text: '对数轴示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
                left: 'left',
                data: ['3的指数']
            },
            xAxis: {
                type: 'category',
                name: 'x',
                splitLine: { show: false },
                data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'log',
                name: 'y'
            },
            series: [
                {
                    name: '3的指数',
                    type: 'line',
                    data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
                }
            ]
        };
    })

Add this markup into page

<div ng-controller="DemoController as vm">
    <lz-chart config="vm.config" style="width:480px;height:480px"></lz-chart>
</div>

That's all! Now you can get up and running the demo.

Use angular echarts lite with webpack

You can obtain angular echarts lite directly in project via webpack

require('angular-echarts-lite')

//To add dependency into your module
angular.module("ur-module", ['angular-echarts-lite'])

Usage

<lz-chart  config= theme=? instance=? unwatch></lz-chart>

You can find all possible attributes for the directive in the table below:

Attribute | Usage --- | --- config | Object, set the configuration of chart by using echarts optionsHere is some additional configuration:forceClear boolean, whether to remove chart before updatenotMerge boolean, whether not to merge with previouserrorMsg Object, configuration item while error, more detail theme | Object or string, set the theme of chart instance | Bind a function to get chart instance unwatch | Cancel scope watch for config and theme, just takes effort during directive init

Running the demo

Setup the repo:

git clone https://github.com/LeungZ9/angular-echarts-lite.git && cd angular-echarts-lite
npm i

Run the development server:

cd /path/to/angular-echarts-lite
npm run dev