angular中使用ECharts

1、Echarts的基本使用

echarts是基于canvas的绘制图形的插件。使用JavaScript语言进行绘制的。

第一步，引入依赖包

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>

或者使用npm进行下载。

npm install --save-dev echarts

第二步，创建一个id为main的div或者canvas

<div id='main' style="width:300px;height:200px"></div>

第三步，进行初始化视图

var myEchart = echart.init(document.getElementById(main));

var options = {
     tooltip: {},
    legend: {
           data:['BDS','GPS','GLO','GAL']
       },
    xAxis: {
       data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
       name: '销量',
       type: 'bar',
       data: [5, 20, 36, 10, 10, 20]
    }]
}

myChart.setOption(option);

这样就展示了一个简单的柱状图

2、Echarts在angular中的使用

在angular项目中，我们一般会把echarts包使用bower下载下来，或者使用npm下载下来。

第一步，使用服务的方式，引入echarts

angular.module('charts')
.provider("$charts",function(){
    var echarts = echarts || undefined;
    !echarts && require([
        'echarts',
        'echarts/chart/line',
        'echarts/chart/bar',
        'echarts/chart/map',
        'echarts/chart/pie',
        'echarts/chart/gauge'
    ],function(ec){
        echarts = ec;
    });

    return { 
        $get: function(){
             echart: echart
        }
    }
})

第二步：定义指令

angular.module("moduleName")
.directive('testDirective',testDirective);

function testDirective($charts,$scope){
    var echarts = $charts.ec;
    console.log(echarts);
}