關於cechartsjs的信息

本文目錄一覽：

• 1、echarts.js是什麼
• 2、如何在django中使用Echarts的js文件
• 3、ECharts js收費嗎？
• 4、運行Echarts.js報錯，啥原因？
• 5、echarts.js一個頁面如何加載多個圖表？
• 6、echarts 怎樣用js自定義圖表數據

echarts.js是什麼

是一個 百度旗下 使用各種圖表展示統計分析結果的js插件

引入這個js，你就可以使用echarts官網上提供的所有圖表工具

官網鏈接：網頁鏈接

如圖所示：

如何在django中使用Echarts的js文件

1. 選擇正確的echarts.js，開發版選擇echarts.baidu.com上的源碼版，避免出現問題

2. 在項目主目錄中新建static文件夾，裡面建立js、css、images文件夾

3. 在settings文件中新增如下代碼配置：

複製代碼

STATIC_URL = ‘/static/’

STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)

STATICFILES_DIRS = (

(‘css’, os.path.join(STATIC_ROOT, ‘css’).replace(‘\\’, ‘/’)),

(‘js’, os.path.join(STATIC_ROOT, ‘js’).replace(‘\\’, ‘/’)),

(‘images’, os.path.join(STATIC_ROOT, ‘images’).replace(‘\\’, ‘/’)),

)

複製代碼

4. 在html頁面引入本地js文件static/js/echarts.js

script type=”text/javascript” src=”/static/js/echarts.js”/script

5. 啟動python Django服務器

python3 manage.py runserver

6. 刷新頁面，OK

成功將網絡echarts.js文件改成引用本地echarts.js文件

ECharts js收費嗎？

ECharts 是百度提供的免費開源圖表庫，不收費。

但是如果需求定製的話，可以聯繫作者或者相關服務商會收取一些費用。

運行Echarts.js報錯，啥原因？

以前使用echarts.js都是到官網上下載，然後放在項目中引用，沒有問題。

現在寫一個c++程序，想輸出一個html,引用了echarts.js,因為src的路徑填的是相對於html的js的路徑，這就導致輸出文件只能和

echarts.js在同一個文件夾下，這樣局限性很大，不方便。

嘗試了引用網絡上的echarts.js，可是出現了echarts is not defined的錯誤。

我在項目中用到了var myChart=echarts.init(document.getElementById(‘main’));這樣的語句，echarts是在js中定義了的，我自己在服務器里放了一個同樣的js，然後引用，但是還是出現一樣的錯誤。

echarts.js一個頁面如何加載多個圖表？

echarts是一個很有用，很炫，也很強大的插件，這裡用模塊化的方法來實現同一個頁面引用多個不同圖表。

1、找打文件，下載到本機。

2、把文件名改為echarts（也可以不用改，我是方便自己用才改的），然後放到自己項目里的js文件里（這裡也可以和js平級，看自已的喜好）。

3、在html文件里用script引用echarts文件，html里引用成功後，打開js文件或script標籤配置文件路徑：注意這個路徑要和剛剛引入的echarts文件路徑一致，目錄到js文件上一級就可以了。

4、這裡就是我們根據自己需要用的圖表進加載相應的文件就是你要什麼圖就是加載什麼圖，比如餅圖就是pie,柱狀圖就是bar，地圖就是map等。

5、注意這個步驟：兩個紅框框起來的是自己寫的方法的引用，傳的參數  ec  就是代表我們在實例化echarts.init()  時   的 “echarts”。

6、我們把每個圖表都用一個方法表示，就是每個圖表的具體設置。

7、最後全放入剛剛的那個“McChart”方法里

8、最終顯示效果

echarts 怎樣用js自定義圖表數據

引入ECharts

echarts提供多種引入方式，請根據你的項目類型選擇合適的方式：

模塊化包引入

如果你熟悉模塊化開發，你的項目本身就是模塊化且遵循AMD規範的，那引入echarts將很簡單，使用一個符合AMD規範的模塊加載器，如esl.js，只需要配置好packages路徑指向src即可，你將享受到圖表的按需加載等最大的靈活性，由於echarts依賴底層zrender，你需要同時下載zrender到本地，可參考demo，你需要配置如下。

需要注意的是，包引入提供了開發階段最大的靈活性，但並不適合直接上線，減少請求的文件數量是前端性能優化中最基本但很重要的規則，務必在上線時做文件的連接壓縮。

//from echarts example

require.config({

packages: [

{

name: ‘echarts’,

location: ‘../../src’,

main: ‘echarts’

},

{

name: ‘zrender’,

location: ‘../../../zrender/src’, // zrender與echarts在同一級目錄

main: ‘zrender’

}

]

});

模塊化單文件引入（推薦）

如果你使用模塊化開發但並沒有自己的打包合併環境，或者說你不希望在你的項目里引入第三方庫的源文件，我們建議你使用單文件引入，同模塊化包引入一樣，你需要熟悉模塊化開發。

自2.1.8起，我們為echarts開發了專門的合併壓縮工具echarts-optimizer。如你所發現的，build文件夾下已經包含了由echarts-optimizer生成的單文件：

dist（文件夾） : 經過合併、壓縮的單文件

line.js : 折線圖（如需折柱動態類型切換，require時還需要echarts/chart/bar）

bar.js : 柱形圖（如需折柱動態類型切換，require時還需要echarts/chart/line）

scatter.js : 散點圖

k.js : K線圖

pie.js : 餅圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/funnel）

radar.js : 雷達圖

map.js : 地圖

force.js : 力導向布局圖（如需力導和弦動態類型切換，require時還需要echarts/chart/chord）

chord.js : 和弦圖（如需力導和弦動態類型切換，require時還需要echarts/chart/force）

funnel.js : 漏斗圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/pie）

gauge.js : 儀錶盤

eventRiver.js : 事件河流圖

treemap.js : 矩陣樹圖

venn.js : 韋恩圖

echarts.js : 這是包含AMD加載器的echarts主文件，需要通過script最先引入

chart（文件夾） : echarts-optimizer通過依賴關係分析同時去除與echarts.js的重複模塊後為echarts的每一個圖表類型單獨打包生成一個獨立文件，根據應用需求可實現圖表類型按需加載

source（文件夾） : 經過合併，但並沒有壓縮的單文件，內容同dist，可用於調試

採用單一文件使用例子見ECharts單一文件引入，存放在example/www下，首先你需要通過script標籤引入echarts主文件

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”./js/echarts.js”/script

/body

在主文件引入後你將獲得一個AMD環境，配置require.conifg如下：

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”./js/echarts.js”/script

   script type=”text/javascript”

       require.config({

           paths: {

               echarts: ‘./js/dist’

           }

       });

   /script

/body

require.config配置後就可以通過動態加載使用echarts

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”./js/echarts.js”/script

   script type=”text/javascript”

       require.config({

           paths: {

               echarts: ‘./js/dist’

           }

       });

       require(

           [

               ‘echarts’,

               ‘echarts/chart/line’,   // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表

               ‘echarts/chart/bar’

           ],

           function (ec) {

               var myChart = ec.init(document.getElementById(‘main’));

               var option = {

                   …

               }

               myChart.setOption(option);

           }

       );

   /script

/body

總結來說，模塊化單文件引入ECharts，你需要如下4步：

為ECharts準備一個具備大小（寬高）的Dom（當然可以是動態生成的）

通過script標籤引入echarts主文件

為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js所在目錄，見上述說明

動態加載echarts及所需圖表然後在回調函數中開始使用（容我羅嗦一句，當你確保同一頁面已經加載過echarts，再使用時直接require(‘echarts’).init(dom)就行）

詳見入門教程 ( Getting started ) »

標籤式單文件引入

自1.3.5開始，ECharts提供標籤式引入。如果你的項目本身並不是基於模塊化開發的，或者是基於CMD規範（如使用的是seajs），那麼引入基於AMD模塊化的echarts可能並不方便，我們建議你採用srcipt標籤式引入，忘掉require。Srcipt標籤引入echarts後將可以直接使用兩個全局的命名空間：echarts，zrender，可參考ECharts標籤式引入，需要注意的是excanvas依賴body標籤插入Canvas節點去判斷Canvas的支持，如果你把引用echarts的script標籤放置head內在IE8-的瀏覽器中會出現報錯，解決的辦法就是把標籤移動到body內（後）。

標籤式引入環境中，常用模塊的引用可通過命名空間直取，同模塊化下的路徑結構，如：

echarts.config = require(‘echarts/config’)， zrender.tool.color = require(‘zrender/tool/color’)

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”example/www2/js/dist/echarts-all.js”/script

   script

       var myChart = echarts.init(document.getElementById(‘main’));

       var option = {

           …

       }

       myChart.setOption(option);

   /script

/body