echart 히스토그램

 

 

 

      initColumnCharts1 () { 
        CONST columnChart1 = echarts.init (document.getElementById를 ( 'columnChart1' )) 
        CONST columnOption1 = { 
          격자 { 
            바닥 : '35 % ' , 
            남아 '15 %' 
          } 
          제목 : { 
            텍스트 : ' '용량 (전원 타입) , 
            왼쪽 : '센터 ', // 제목 위치 
            문자 유형 : { // 메인 타이틀 속성 
              색상 :'#의 C28D21 ', // 색상 
              fontSize는 12이며, // 크기
              의 font '모노 스페이스' // 폰트 
            } 
          } 
          x 축 { 
            유형 : '장르' , 
            데이터 : "화력", "풍력", "수력 ','태양 전지 ','다른 ' ] 
            된 AxisLabel { 
              클릭 : 참으로 , 
              간격 : 0 , 
              로테이션 : 0 
            } 
          } 
          y 축 : [{ 
            상품명 : 수용량 (메가 와트) ' , 
            유형 : '값 ' , 
            nameTextStyle :{ 
              fontSize는 :12 
            } 
            SplitLine { 
              , 이는 linestyle { 
                유형 : '무' 
              } 
            } 
            axisTick { // Y 축 스케일 감추기 
              표시 : false로 
            } 
            axisLine { //가 숨기를 Y는 축 
              쇼 : false로 , 
            } 
            총수 : '왼쪽 ' // 위치는 왼쪽 
            중간': nameLocation ' // 중앙 
            nameGap : 25 // Y 축 거리 
            nameRotate : 90 // 각도
      }] 
          시리즈 [{ 
            barWidth : 30 , 
            데이터 [ 
              { 
                값 : 이 .colData.countA, 
                itemStyle { 
                  통상 {색상 : '#의 D21D2E' } 
                } 
              }, 
              { 
                값 : 이 .colData.countB, 
                itemStyle : { 
                  통상 {색상 : '#의 FCCE1A' } 
                } 
              }, 
              { 
                값 : 이.colData.countC, 
                itemStyle { 
                  통상 {색상 : "# 009850" } 
                } 
              }, 
              { 
                값 : 이 .colData.countD, 
                itemStyle { 
                  통상 {색상 : '# 0872B2' } 
                } 
              }, 
              { 
                값 : 이 .colData.countE, 
                itemStyle : { 
                  정상 : {색상 : '#의 B884B9가' } 
                } 
              }  
            ]
            입력 : '바' , 
            ItemStyle을 : { // 표시된 값보다 
              일반 : { 
                라벨 : { 
                  쇼 : true로 , // 표시 가능 
                  위치 : '최고', // 위에 표시 
                  문자 유형 : { // 값 스타일 
                    fontSize는을 : 12입니다 
                  } 
                } 
              } 
            } 
          }] 
        } 
        columnChart1.setOption (columnOption1) 
        / * 
         // X 축 이름 
         이 = CONST
        columnChart1.off ( '클릭') // 버블 링 방지 
        columnChart1.on ( '을 클릭'기능을합니다 (PARAMS) { 
          IF (! that.queryParam.data.marketId를) {// 비어 marketid의 marketidlist도 null의 경우 
            그 .queryParam.data.marketIdList = [] 
          } 
          IF (params.name === '일반 정보 변경') { 
            that.queryParam.data.membersType = '10' 
            that.queryParam.data.modificationType = '08' 
            that.pageQuery (that.queryParam) // 전원 
          } 다른 경우 (params.name === '정보 단위 선박 변경') { 
            that.queryParam.data.membersType = '10' 
            that.queryParam.data.modificationType = '04' 
            이. pageQuery (that.queryParam) // 전원 
          }는 다른 IF (params.name === '새로운 유닛' ) { 
            that.queryParam.data.membersType = '10'
            that.queryParam.data.modificationType = '05' 
            that.pageQuery (that.queryParam) //发电
          } 다른 경우 (params.name === '机组转让') { 
            that.queryParam.data.membersType = '10' 
            이 .queryParam.data.modificationType = '06' 
            that.pageQuery (that.queryParam) //发电
          } 다른 경우 (params.name === '机组注销') { 
            that.queryParam.data.membersType = '10' 
            있다. queryParam.data.modificationType = '07' 
            that.pageQuery (that.queryParam) //发电
          } 
        }) 
        * / 
        //   윈도우 크기가 다시 차트 변경할 때 또는 크기 조정을 수행
        window.onresize = columnChart1.resize 
      }