javascript - Echart bar不会显示使用json

Question

我是新手，需要您的帮助。我想使用 json 数据构建 Basic Bar 倒轴。它应该是这样的: Bar Inverted Axes ，但图表不会以某种方式显示。我正在使用 angular 构建网络应用程序，这是我的 Controller

.controller("JsonCtrl", function ($scope, $http,$location, chartBar) {
       
        $scope.data1 = {};

        $http.get('data/set.json')
            .success(function (data1) {
                 var axis1 = [],seriesa = [],seriesb = [], seriesc = [], seriesd = [], seriese = [] ;
                  data1.forEach(function(row) {
                    axis1.push(row.data1);
                    seriesa.push(row.data2);
                    seriesb.push(row.data3);
                    seriesc.push(row.data4);
                    seriesd.push(row.data5);
                    seriese.push(row.data6);
                   
                    });
   
                $scope.data1.a=axis1;
                $scope.data1.b=seriesa;
                $scope.data1.c=seriesb;
                $scope.data1.d=seriesc;
                $scope.data1.e=seriesd;
                $scope.data1.f=seriese;
             

              /**/
                console.log($scope.data1);

               
                var c = chartBar('mainb',$scope.data1);
                               //windows responsive
                window.onresize=function ()
                 {
                    c.resize()
                    
                }
                //
            })  
            .error(function (error) {
                $scope.data.error = error;
            });

    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-xs-12 col-sm-12 widget-container-col">
                <div class="widget-box">
                    <div class="widget-header">
                        <h5 class="widget-title">Barca (Bar Chart)</h5>
                        <div class="widget-toolbar">
                            <a href="#" data-action="fullscreen" class="orange2">
                                <i class="ace-icon fa fa-expand"></i>
                            </a>

                            <a href="#" data-action="collapse">
                                <i class="ace-icon fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <div id="mainb" style="height:250px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这里是 json 数据:

{
  "data1": ["Smtra", "Jawa", "Klmtn", "Sulwsi", "Maluku"]
  "data2": [149739, 244347, 54462, 59869, 6713],
  "data3": [150089, 223519, 49523, 58881, 6152],
  "data4": [141625, 200745, 46966, 54637, 6733],
  "data5": [120428, 173979, 42208, 45067, 6034],
  "data6": [114254, 164168, 39415, 38750, 5301]
}

这是构建图表的工厂:

.factory('chartBar',function(echartTheme){
        return function(element, data1){
            var echartBar = echarts.init(document.getElementById(element), echartTheme);

            echartBar.setOption({
                title: {
                    text: 'Bar Graph',
                    subtext: 'Bar'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 100,
                    data: ['2010', '2011', '2012', '2013', '2014']
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            title: "Save Image"
                        }
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'value',
                    boundaryGap: [0, 0.01]
                }],
                yAxis: [{
                    type: 'category',
                    data: data1.a
                }],
                series: [{
                    name: '2010',
                    type: 'bar',
                    data: data1.b
                }, {
                    name: '2011',
                    type: 'bar',
                    data: data1.c
                }, {
                    name: '2012',
                    type: 'bar',
                    data: data1.d
                }, {
                    name: '2013',
                    type: 'bar',
                    data: data1.e
                }, {
                    name: '2014',
                    type: 'bar',
                    data: data1.f
                }]
            });
        }
    })

我希望你能帮助我:)

Answer 1

ECharts 不会更新，直到你调用echartBar.setOption。

你可能需要类似的东西

echartBar.setOption({
    series: [{
        data: $scope.data1
    }]
});