在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ echarts中如何使用遍歷的id而不是固定的id

echarts中如何使用遍歷的id而不是固定的id

var myChart = tiny.charts(document.getElementById('main'), option);比如最后這個生成圖的這段中 id不是固定的main 而是遍歷的

html:<div class="details-box">

        <div class="details" ng-repeat="item in detailsList">
            <div class="details-top">
                <span class="details-color"></span>
                <span class="details-title">Cluster</span>
                <ti-action-menu items="operation.items2"
                    max-width="operation.maxWidth2"
                    space="operation.space"
                    menu-text="operation.menuText">
                </ti-action-menu>
            </div>
            <div class="details-content">
                <div class="details-content-left">
                    <div id="{{item.id}}" class="details-charts">這邊放圖表</div>
                    <div class="title">Health</div>
                </div>
                    
                    

js:$scope.detailsList = [{

                time:'9 days,15 hours,4 minutes',
                NodeStatus:'',
                status:'',
                type:'Gauss200 OLAP V100R007C00',
                alarm:'',
                id:'charts1',
                color1:'#ff4c4c',
                color2:'#ff8833',
                color3:'#ffd939',
                color4:'#94c94f'
            },{
                time:'9 days,15 hours,4 minutes',
                NodeStatus:'',
                status:'',
                type:'Gauss200 OLAP V100R007C00',
                alarm:'',
                id:'charts2',
                color1:'#ff4c4c',
                color2:'#ff8833',
                color3:'#ffd939',
                color4:'#94c94f'
            },{
                time:'9 days,15 hours,4 minutes',
                NodeStatus:'',
                status:'',
                type:'Gauss200 OLAP V100R007C00',
                alarm:'',
                id:'charts3',
                color1:'#ff4c4c',
                color2:'#ff8833',
                color3:'#ffd939',
                color4:'#94c94f'
            },{
                time:'9 days,15 hours,4 minutes',
                NodeStatus:'',
                status:'',
                type:'Gauss200 OLAP V100R007C00',
                alarm:'',
                id:'charts4',
                color1:'#ff4c4c',
                color2:'#ff8833',
                color3:'#ffd939',
                color4:'#94c94f'
            },{
                time:'9 days,15 hours,4 minutes',
                NodeStatus:'',
                status:'',
                type:'Gauss200 OLAP V100R007C00',
                alarm:'',
                id:'charts5',
                color1:'#ff4c4c',
                color2:'#ff8833',
                color3:'#ffd939',
                color4:'#94c94f'
            },{
                time:'9 days,15 hours,4 minutes',
                NodeStatus:'',
                status:'',
                type:'Gauss200 OLAP V100R007C00',
                alarm:'',
                id:'charts6',
                color1:'#ff4c4c',
                color2:'#ff8833',
                color3:'#ffd939',
                color4:'#94c94f'
            }
        ];
        var option = {
            legend: {
                left: '50%',
                top: '35%',
                orient: 'vertical',
                itemWidth: 0,
                icon: 'react',
                align: 'left',
                data:['heath']
            },
            series: [
                {
                    type:'pie',
                    radius: ['80%', '100%'], // 內(nèi)外半徑
                    hoverAnimation: false, // 是否開啟 hover 在扇區(qū)上的放大動畫效果
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    center: ['50%', '50%'], //餅圖的中心(圓心)坐標(biāo),數(shù)組的第一項是橫坐標(biāo),第二項是縱坐標(biāo)
                    itemStyle: {
                        normal: {
                            borderWidth: 3, // 實現(xiàn)環(huán)各個項中間白色間距
                            borderColor: 'white'
                        }
                    },
                    data:[
                        {value:40, name:''},
                        {value:60, name:''}
                    ]
                }
            ]
        };

        // 基于準(zhǔn)備好的dom,初始化echarts實例
        var myChart = tiny.charts(document.getElementById(''), option);
    }
               
回答
編輯回答
尕筱澄

可以存對象啊

const chart = {}
for (let i = 0; i <  $scope.detailsList.length; i++) {
  chart[$scope.detailsList[i].id] = tiny.charts({document.getElementById($scope.detailsList[i].id), option})
}

clipboard.png

2018年5月21日 04:08
編輯回答
好難瘦

最后我發(fā)現(xiàn)是因為dom加載和js執(zhí)行順序的問題,ng1沒有生命周期,所以只能加定時器,然后才把圖表搞出來

2017年12月23日 17:41