最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

echart插件等基本使用介紹

來源：懂視網(wǎng) 責編：小OO 時間：2020-11-27 20:14:37
文檔

echart插件等基本使用介紹

1.插件的下載；以下是ECharts的下載鏈接，需要注意的是ECharts內(nèi)部也是依賴于另一個插件的叫ZRender，當然對于大部分圖表而言不需要ZRender的，但是對于地圖控件及其他復雜的呈現(xiàn)控件而已都是需要ZRender的。為了避免不要的問題出現(xiàn)，建議大家在下載ECharts時同時也要下載ZRender。ECharts下載地址： http：//echarts.baidu.com/。ZRender下載地址：http：//ecomfe.github.io/zrender/index.html。下載之后解壓各自的文件目錄結構如下：ECharts。ZRender。2.插件的引用；首先，新建一個Web應用程序，然后添加剛剛下載的文件，具體的目錄結構如下：
推薦度：
導讀1.插件的下載；以下是ECharts的下載鏈接，需要注意的是ECharts內(nèi)部也是依賴于另一個插件的叫ZRender，當然對于大部分圖表而言不需要ZRender的，但是對于地圖控件及其他復雜的呈現(xiàn)控件而已都是需要ZRender的。為了避免不要的問題出現(xiàn)，建議大家在下載ECharts時同時也要下載ZRender。ECharts下載地址： http：//echarts.baidu.com/。ZRender下載地址：http：//ecomfe.github.io/zrender/index.html。下載之后解壓各自的文件目錄結構如下：ECharts。ZRender。2.插件的引用；首先，新建一個Web應用程序，然后添加剛剛下載的文件，具體的目錄結構如下：
這篇文章主要介紹了echart簡介，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1. 插件的下載

以下是ECharts的下載鏈接，需要注意的是ECharts內(nèi)部也是依賴于另一個插件的叫ZRender，當然對于大部分圖表而言不需要ZRender的，但是對于地圖控件及其他復雜的呈現(xiàn)控件而已都是需要ZRender的。為了避免不要的問題出現(xiàn)，建議大家在下載ECharts時同時也要下載ZRender。

ECharts下載地址： http://echarts.baidu.com/

ZRender下載地址：http://ecomfe.github.io/zrender/index.html

下載之后解壓各自的文件目錄結構如下：

ECharts：

ZRender:


2. 插件的引用

首先，新建一個Web應用程序，然后添加剛剛下載的文件，具體的目錄結構如下：

這里有以下幾點需要說明：

  • 所有的跟ECharts有關的文件全部都在echarts文件夾下

  • echarts文件夾的內(nèi)容分為兩部分

    • 1) 一部分是以echarts開頭的js文件，這些文件全部來自于1.中的ECharts文件目錄中的js文件夾下的文件，也就是1.中的圖中紅框標注的js下的文件。如下：

    2)另一部分是一個名為zrender的文件夾，這里需要特別注意的是該文件夾的命名必須為zrender，因為在echarts的js文件中對zrender的引用都是以zrender為根目錄的，zrender文件夾的內(nèi)容即為1.中zrender文件目錄中的src文件夾下的內(nèi)容，如下：

    3. 在頁面中的具體使用

    按照上邊的步驟配置過之后，我們就可以在頁面中引用了，這里我主要是演示地圖控件的使用方式，因為地圖的引用跟其他的基本圖形的引用不太一樣。其他的圖形的呈現(xiàn)也會做一個簡要的演示。

    MapChart

    首先在跟2中的echarts文件夾同一個目錄（也就是Modules文件夾）下添加一個aspx頁或html頁，需要注意的是，如果是在aspx頁中使用echarts時，需要把要渲染的p放在form標簽之外，否則圖形是顯示不出來的。

    在head標簽中添加對echarts的引用如下：

    <head runat="server"> 
 <title></title> 
 <script src="echarts/esl.js" type="text/javascript"></script> 
</head>

    在body標記中，form標記之外，添加一個p，用來做圖表渲染的容器。如下：

    <body> 
 
<p id="main"style="height:500px;border:1px solid #ccc;padding:10px;"></p> 
 
…………… 
 
…………… 
 
</body>

    在上面中添加的p標記下，添加如下的js代碼段，如下：

    完成以上操作之后，效果如下圖所示：
     
    LineChart
    除了地圖圖表之外的其他的圖標的使用方式都差不多。事實上其他的圖表跟地圖圖表的區(qū)別在于對配置文件的引用。這里只做一個折線圖的示例，其它的示例都是一樣的。
    完成以上操作之后效果圖如下：
     
    聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
        

    
    
    文檔
    
    
    
        
    echart插件等基本使用介紹
    
        
    1.插件的下載；以下是ECharts的下載鏈接，需要注意的是ECharts內(nèi)部也是依賴于另一個插件的叫ZRender，當然對于大部分圖表而言不需要ZRender的，但是對于地圖控件及其他復雜的呈現(xiàn)控件而已都是需要ZRender的。為了避免不要的問題出現(xiàn)，建議大家在下載ECharts時同時也要下載ZRender。ECharts下載地址： http：//echarts.baidu.com/。ZRender下載地址：http：//ecomfe.github.io/zrender/index.html。下載之后解壓各自的文件目錄結構如下：ECharts。ZRender。2.插件的引用；首先，新建一個Web應用程序，然后添加剛剛下載的文件，具體的目錄結構如下：
    
        
    推薦度：
    
    
    
    

    
              
        
                
    
            標簽：
                        使用
                        介紹
                        插件
                    
    
                
            
            
     
                    
    
                        
    • 熱門焦點
    
                    
    
                    
    
                        
      
                            
                            
                            
                        
    
                        
                    
    
            
    
            
        
    
        
        
        
    
            
            
    
                
    最新推薦
    
                
      
                    
                
                
                
            
    
            
    
            
            
            
    
                
    猜你喜歡
    
                
      
                    
                    
                   
                    
                
    
            
    
           
            
            
           
            
    
                
    熱門推薦
    
                
      
                    
                    
                
    
            
    
           
            
        
    
        
        
    專題

    
    
    


    













    
    
    






Top