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);}