liekkas / ng-echarts

:tiger: angularjs + echarts

angularjs版echarts 支持最新Apache ECharts (incubating) 3.x

更新说明

支持ECharts3.x,如果想用ECharts2.x,请用V2.0.0版本

3.x主题API发生了改变,去掉了内置的主题

下载

npm i ng-echarts --save-dev

组件构建

• git clone https://github.com/liekkas/ng-echarts.git
• npm i
• gulp

在线DEMO

组件应用

ng-echarts只需要两个变量：

• ecOption：也就是echarts中的option，因此你直接可以把官网的例子拷进来用
• ecConfig：其他参数的配置项 * theme：图表主题名称, * event：绑定事件 * dataLoaded：数据是否加载（用于Loading）

注意事项

• ECharts3.0没有内置地图,如果想用地图组件,需要先引入地图数据,点这里
• ECharts3.0主题设置也发生了,变化,需要先引入主题数据,点这里

一个简单示例： html中

<div ng-controller="Ctrl1">
     <ng-echarts class="col-md-6 echarts" ec-config="lineConfig" ec-option="lineOption" ></ng-echarts>
</div>

js中

    .controller('Ctrl1',function($scope,$interval,$timeout){
            function onClick(params){
                console.log(params);
            };
            
            $scope.lineConfig = {
                                theme:'default',
                                event: [{click:onClick}],
                                dataLoaded:true
                            };
    
            $scope.lineOption = {
                title : {
                    text: '未来一周气温变化(5秒后自动轮询)',
                    subtext: '纯属虚构'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['最高气温','最低气温']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series : [
                    {
                        name:'最高气温',
                        type:'line',
                        data:[11, 11, 15, 13, 12, 13, 10],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint : {
                            data : [
                                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
        })

ng-echarts's Issues

关于loading

可以在每次实例化的时候，数据还没有返回的时候可以显示loading 这样更友好一点

在chrome浏览器中打开时，发现图表不显示

ng-echarts 中 如何使用 词云

visualMap 无法正常工作

设置了visualMap 分段式 不同的颜色。 但是在画出来的点线图里， 只有点的颜色是根据visualMap的设定， 线的颜色不变， 始终是缺省颜色。

visualMap: {
top:5,
right:5,
type: 'piecewise',
dimension: 1,
pieces: [

                {min: 46, color: 'red'},

                {min: 42, max:46, color: 'orange'},
                {min: 32, max:38, color: 'green'},
                {min: 28, max:32, color: 'orange'},
                {max: 28, color: 'red'}

            ],
            outOfRange: {
                color: '#999'
            },
            textStyle: {
                color: '#222'
            }
        },

是否可以支持echarts 3.0 版本

谢谢， 可以升级到3.0 版本吗？

Are there examples with angularjs 2?

How to get the value of selected area?

For example,in a map (type='china '), when I clicked a province , how can I get the name of the province selected?

如何运用echarts dispatchaction功能

看ng-echarts.js并没有封装dispatchaction功能，我修改了之后可以用，但每次跳index都会刷新chart使得浏览器自动关闭，而不是像官网的dispatch demo并没有刷新chart。
请问可以怎样改呢？

/**

• Created by liekkas.zeng on 2015/1/7.
  */
  angular.module('ng-echarts',[])
  .directive('ngEcharts',[function(){
  return {
  link: function(scope,element,attrs,ctrl,$window){
  function refreshChart(){
  var theme = (scope.config && scope.config.theme)
  ? scope.config.theme : 'default';
  var chart = echarts.init(element[0],theme);
  var app = {};

               if(scope.config && scope.config.dataLoaded === false){
                   chart.showLoading();
               }
  
               if(scope.config && scope.config.dataLoaded){
                   chart.setOption(scope.option);
                   chart.resize();
                   chart.hideLoading();
               }
  
               if(scope.config && scope.config.event){
                   if(angular.isArray(scope.config.event)){
                       angular.forEach(scope.config.event,function(value,key){
                           for(var e in value){
                               chart.on(e,value[e]);
                           }
                       });
                   }
               }
  

// chart.dispatchAction({
// type: 'downplay',
// seriesIndex: 0,
// dataIndex: scope.currentIndex;
// });

                if(angular.isDefined(scope.currentIndex)){
                	
                	chart.dispatchAction({
    			        type: 'highlight',
    			        seriesIndex: 0,
    			        dataIndex: scope.currentIndex
    			    });
    			    
                    chart.dispatchAction({
    			        type: 'showTip',
    			        seriesIndex: 0,
    			        dataIndex: scope.currentIndex
    			    });                        	
                }                                     
            };

            scope.$watch(
                function () { return scope.config; },
                function (value) {if (value) {refreshChart();                  
                }},
                true
            );


            scope.$watch(
                function () { return scope.option; },
                function (value) {if (value) {refreshChart();
               
                }},
                true
            );
            scope.$watch(
                    function () { return scope.currentIndex; },
                    function (value) {if (value) {refreshChart();
                   
                    }},
                    true
                );

// scope.$watch(
// function () { return scope.windowSize; },
// function (value) {
// console.log("directive watch window size");
// if (value) {refreshChart();
//
// }},
// true
// );

        },
        scope:{
            option:'=ecOption',
            config:'=ecConfig',
            currentIndex: '=ecCurrentIndex'
           // windowSize: '=ecWindowSize'
        },
        restrict:'EA'
    }
}]);

外部容器大小变化，里面的echarts图不能同步改变

这个问题我已经用调用内部的refreshChart方法解决，但是当外部容器缩小到一定程度echart图的宽高就变成0了

能否同步顯示多圖

請教一下，是否能夠同步顯示多圖？看官網上的例子是使用connect把不同的echart連接起來的。謝謝

不能保存为图片吗？

toolbox里面设置了，还是不能保存，请问怎么处理

1

当我在一个指令中，添加两个ng-echarts指令的时候，只会渲染出来一个

例如：

<ng-echarts class="col-lg-12 echarts"
                                style="min-height:300px;width:840px;padding:0"
                                ng-if="pc.panel.panel_type<=4"
                                ec-config="pc.ecConfig"
                                ec-option="pc.ecOption"
                                ec-resize="pc.ecResize"> </ng-echarts>
<ng-echarts class="col-lg-12 echarts"
                                style="min-height:300px;width:840px;padding:0"
                                ng-if="pc.panel.panel_type<=4"
                                ec-config="pc.ecConfig"
                                ec-option="pc.ecOption"
                                ec-resize="pc.ecResize"></ng-echarts>

只能显示一个

Angular 2

Hello,
Are there examples with angularjs 2?

封装一下树形

可否封装一下echart里的树形

anjularjs最低版本要求？

anjularjs最低版本要求是多少？

图标不显示

我已经按照设置了图标，为什么会有图标不出现的问题，谢谢

toolTip点击一次显示再隐藏后，后续点击就无法显示了，请教原因~~

我的页面是ionic+echarts来开发，引入了ngchart；
ng-echart 嵌套在ion-item里面，此时界面点击出toolTip后，点击canvas的空白处，会导致toolTip无法显示出来，大概看了下，如果把ng-echart的 position: relative; 去掉的话就没问题，这个该怎么解决？