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

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

var myChart = tiny.charts(document.getElementById('main'), option);比如最后這個(gè)生成圖的這段中 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, // 是否開(kāi)啟 hover 在扇區(qū)上的放大動(dòng)畫(huà)效果
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    center: ['50%', '50%'], //餅圖的中心(圓心)坐標(biāo),數(shù)組的第一項(xiàng)是橫坐標(biāo),第二項(xiàng)是縱坐標(biāo)
                    itemStyle: {
                        normal: {
                            borderWidth: 3, // 實(shí)現(xiàn)環(huán)各個(gè)項(xiàng)中間白色間距
                            borderColor: 'white'
                        }
                    },
                    data:[
                        {value:40, name:''},
                        {value:60, name:''}
                    ]
                }
            ]
        };

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

可以存對(duì)象啊

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)是因?yàn)閐om加載和js執(zhí)行順序的問(wèn)題,ng1沒(méi)有生命周期,所以只能加定時(shí)器,然后才把圖表搞出來(lái)

2017年12月23日 17:41