成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

echarts使用總結(jié)

spademan / 579人閱讀

摘要：最近一段時(shí)間做了一個(gè)使用的圖表項(xiàng)目。由于理解能力有限，使用起來(lái)并非暢通無(wú)阻。所謂好記性不如爛筆頭，現(xiàn)將一些比較關(guān)鍵的點(diǎn)記錄一下，供后續(xù)查看。

最近一段時(shí)間做了一個(gè)使用echarts的圖表項(xiàng)目。由于理解API能力有限，使用起來(lái)并非暢通無(wú)阻。
所謂好記性不如爛筆頭，現(xiàn)將一些比較關(guān)鍵的點(diǎn)記錄一下，供后續(xù)查看。

一 使用方法

項(xiàng)目：ionic+angular4+echarts

1.由于打包原因，echarts不能直接引入進(jìn)package.json的dependencies中，只能以原始的方式從index.html中引入



2.在組件的.html文件中


 


3.在組件的.ts文件中配置好pieOption的值以及點(diǎn)擊drill down的邏輯jump2Detail


4.ngx-echarts插件  --可以獲取echarts實(shí)例的service


安裝：npm install ngx-echarts
配置：AngularEchartsModule or NgxEchartsModule("ngx-echarts": "^2.1.0")      -- 根據(jù)版本不同導(dǎo)入模塊 從ngx-echarts.module.d.ts這個(gè)文件中看export哪個(gè)模塊


//app.module.ts
import { NgxEchartsModule } from "ngx-echarts";
@NgModule({
  imports:[NgxEchartsModule], //
  ...
})
  
//xxx.ts
import { NgxEchartsService } from "ngx-echarts";
  
export class xxx {
  constructor(
      private echartService:NgxEchartsService
  ){...}
    
  fn(){
      let echartInstance = this.echartsService.getInstanceByDom(xxx); //獲取echarts實(shí)例，然后可以調(diào)用內(nèi)部的方法update一些東西
        ...
  }
}



5.圖表寬度自適應(yīng) -- resize功能




使用方式：
    i.指令配置 -- 忘了
    ii.手動(dòng)代碼
    @HostListener("window:resize", ["$event"])
    resize(event) {
        setTimeout(() => {
          //存在多個(gè)圖表時(shí)，所有均需要自適應(yīng)的情況
          let echartDoms = Array.from(document.getElementsByClassName("xxx"));
          echartDoms.forEach(dom => {
            this.echartService.getInstanceByDom(dom).resize();
          })
        }, 100);
    }
   



6.圖表的事件 -- 普通鼠標(biāo)事件與圖表自定義的事件均可以通過(guò)實(shí)例綁定


  //"click"、"dblclick"、"mousedown"、"mousemove"、"mouseup"、"mouseover"、"mouseout"
  echartInstance.on("click",params => {
    ...
  });
  
  //datazoom、legendscroll、datarangeselected、...
  echartInstance.on("dataZoom",params => {
    ...
  })
  
  //有些事件在angular中有對(duì)應(yīng)的指令形式
  //chartClick、chartDbClick、chartMouseDown、chartMouseUp、chartMouseOver、chartMouseOut、chartGlobalOut、chartContextMenu、chartDataZoom
  


二 注意點(diǎn)

1.每一塊渲染區(qū)域都有一個(gè)position的設(shè)置，可以自定義離上、下、左、右的距離


grid:{
    top:...
    left:...
    bottom:...
    right:...
}

legend:{
    top:...
    left:...
    ...
}




2.每一個(gè)涉及值的顯示點(diǎn)基本都提供了formatter


tooltip:{
        formatter: params => { //自定義hover狀態(tài)數(shù)據(jù)顯示的情況
            let str = "";
            str += `
${params[0].name}
`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}
`;
                //item中提供了圖標(biāo)、顏色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根據(jù)值去重算數(shù)據(jù)然后顯示的情況
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ": " + Math.round(total).toLocaleString();
        }
    }



3.xAxis/yAxis 配置坐標(biāo)軸的一些屬性 刻度、坐標(biāo)軸名稱(chēng)、如何顯示坐標(biāo)信息等



4.toolbox 工具欄，內(nèi)置有導(dǎo)出圖片、數(shù)據(jù)視圖、動(dòng)態(tài)類(lèi)型切換、數(shù)據(jù)區(qū)域縮放、重置5個(gè)工具
其中導(dǎo)出圖片可以自己通過(guò)canvas的相關(guān)API 將多個(gè)圖表一并導(dǎo)出



5.dataZoom 數(shù)據(jù)區(qū)域縮放組件 -- 可以一個(gè)也可以多個(gè)


dataZoom:[
    {
        type:"inside", //內(nèi)置在坐標(biāo)系中 通過(guò)鼠標(biāo)滾輪或者手指touch進(jìn)行處罰
        ...
    },
    {
        type:"slider", //在外部 顯示為滑動(dòng)條形的一個(gè)組件，可直接拖動(dòng)使用
        ...
    }
]



6.series 系列列表，每個(gè)系列通過(guò)type決定圖表類(lèi)型 --根據(jù)不同的圖表注入不同格式的數(shù)據(jù)


series:{
    type:"line"/"pie"/"bar"/"treemap",
    ...
}



其實(shí)細(xì)分到每一個(gè)圖表都有一些細(xì)微的設(shè)置，數(shù)據(jù)以及顏色、間距等，待續(xù)...


如果bug請(qǐng)指正Thanks?(?ω?)?！
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97641.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    Echarts4.0 使用系列——折線(xiàn)圖，這里可能有你需要的
    
                                                     
    摘要：常用的類(lèi)型為，需要定義對(duì)呀的類(lèi)目數(shù)據(jù)，這個(gè)例子中的類(lèi)目數(shù)據(jù)為日期組成的數(shù)據(jù)。在使用之前覺(jué)得這個(gè)插件內(nèi)容很多，但是去看了一遍折線(xiàn)圖的后發(fā)現(xiàn)有很多都是類(lèi)似的，例如軸與軸的設(shè)置。

前言：項(xiàng)目中經(jīng)常會(huì)使用到Echarts,有的需求差不多復(fù)用性高，由于之前沒(méi)有好好總結(jié)，時(shí)間一長(zhǎng)就容易忘，所以這里總結(jié)一下Echarts折線(xiàn)圖使用，下面會(huì)列舉官網(wǎng)一些Api。
一、效果圖
showImg(https:...
    
                                                   
                          
    
                                
    
                                    mmy123456
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Echarts4.0 使用系列——折線(xiàn)圖，這里可能有你需要的
    
                                                     
    摘要：常用的類(lèi)型為，需要定義對(duì)呀的類(lèi)目數(shù)據(jù)，這個(gè)例子中的類(lèi)目數(shù)據(jù)為日期組成的數(shù)據(jù)。在使用之前覺(jué)得這個(gè)插件內(nèi)容很多，但是去看了一遍折線(xiàn)圖的后發(fā)現(xiàn)有很多都是類(lèi)似的，例如軸與軸的設(shè)置。

前言：項(xiàng)目中經(jīng)常會(huì)使用到Echarts,有的需求差不多復(fù)用性高，由于之前沒(méi)有好好總結(jié)，時(shí)間一長(zhǎng)就容易忘，所以這里總結(jié)一下Echarts折線(xiàn)圖使用，下面會(huì)列舉官網(wǎng)一些Api。
一、效果圖
showImg(https:...
    
                                                   
                          
    
                                
    
                                    hedge_hog
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue中引入echarts渲染問(wèn)題
    
                                                     
    摘要：在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲得更新后的如果不使用在切換的時(shí)候從無(wú)到有，該節(jié)點(diǎn)還沒(méi)加載，不能獲取，會(huì)報(bào)錯(cuò)

1.通過(guò)以下命令安裝echarts
npm install echarts --save
2.在main.js文件里全局引入echarts
import echarts from echartsVue.prototype.$echarts = echarts
3.單頁(yè)面引用ec...
    
                                                   
                          
    
                                
    
                                    leiyi
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    echarts 與 highcharts
    
                                                     
    摘要：渲染能力采用渲染除了對(duì)使用，一般來(lái)說(shuō)，更適合繪制圖形元素?cái)?shù)量非常大這一般是由數(shù)據(jù)量大導(dǎo)致的圖表如熱力圖地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線(xiàn)圖或散點(diǎn)圖等，也利于實(shí)現(xiàn)某些視覺(jué)特效如交通圖。

一．簡(jiǎn)介
echartsecharts是百度公司前端開(kāi)發(fā)的一個(gè)圖表庫(kù)，2013年發(fā)布第一版，主要采用canvas畫(huà)圖，目前版本3.8.4；完全免費(fèi)；
highcharthighcharts是國(guó)外的一家公司...
    
                                                   
                          
    
                                
    
                                    王笑朝
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<