ECharts使用心得(最初的版本)
前言
上週專案組要臨時給客戶做一個演示的原型，首頁設計的是一箇中國地圖，本來打算用谷歌的地圖，但是，做出來之後，整體的效果看起來太差了，最後就在網上搜相關的地圖呈現的控制元件，然後就找到了這個ECharts報表呈現元件，挺不錯的一個元件，而且地圖資料都是離線的，真心很贊。但是，使用起來卻頗費了一番工夫。所以就把使用中的一些心得體會跟大家分享一下。
1. 外掛的下載
以下是ECharts的下載連結，需要注意的是ECharts內部也是依賴於另一個外掛的叫ZRender，當然對於大部分圖表而言不需要ZRender的，但是對於地圖控制元件及其他複雜的呈現控制元件而已都是需要ZRender的。為了避免不要的問題出現，建議大家在下載ECharts時同時也要下載ZRender。
下載之後解壓各自的檔案目錄結構如下：
ECharts：
ZRender:
2. 外掛的引用
首先，新建一個Web應用程式，然後新增剛剛下載的檔案，具體的目錄結構如下：
這裡有以下幾點需要說明：
l 所有的跟ECharts有關的檔案全部都在echarts資料夾下
l echarts資料夾的內容分為兩部分
1) 一部分是以echarts開頭的js檔案，這些檔案全部來自於1.中的ECharts檔案目錄中的js資料夾下的檔案，也就是1.中的圖中紅框標註的js下的檔案。如下：
2) 另一部分是一個名為zrender的資料夾，這裡需要特別注意的是該資料夾的命名必須為zrender，因為在echarts的js檔案中對zrender的引用都是以zrender為根目錄的，zrender資料夾的內容即為1.中zrender檔案目錄中的src資料夾下的內容，如下：
3. 在頁面中的具體使用
按照上邊的步驟配置過之後，我們就可以在頁面中引用了，這裡我主要是演示地圖控制元件的使用方式，因為地圖的引用跟其他的基本圖形的引用不太一樣。其他的圖形的呈現也會做一個簡要的演示。
3.1 MapChart
首先在跟2中的echarts資料夾同一個目錄（也就是Modules資料夾）下新增一個aspx頁或html頁，需要注意的是，如果是在aspx頁中使用echarts時，需要把要渲染的div放在form標籤之外，否則圖形是顯示不出來的。
3.1.1 在head標籤中新增對echarts的引用如下：
- <head runat="server">
- <title></title>
- <script src="echarts/esl.js" type="text/javascript"></script>
- </head>
3.1.2 在body標記中，form標記之外，新增一個div，用來做圖表渲染的容器。如下：
- <body>
- <div id="main"style="height:500px;border:1px solid #ccc;padding:10px;"></div>
- ……………
- ……………
- </body>
3.1.3 在3.1.3中新增的div標記下，新增如下的js程式碼段，如下：
- <script type="text/javascript">
- //為模組載入器配置echarts的路徑，這裡主要是配置map圖表的路徑，其他的圖表跟map的配置還不太一樣，下邊也會做另一種型別的圖表事例。
- 這裡引用的主要是echarts資料夾下的echarts-map檔案，而其他型別的圖表引用的都是echarts資料夾下的echarts檔案。
- require.config({
- paths: {
- echarts:'./echarts/echarts',
- 'echarts/chart/map':'./echarts/echarts-map'
- }
- });
- //動態載入echarts，在回掉函式中使用，要注意保持按需載入結構定義圖表路徑
- require(
- [
- 'echarts',
- 'echarts/chart/map'
- ],
- function (ec) {
- varmyChart=ec.init(document.getElementById('main'));
- //option主要是圖示的一些設定，這不是這篇文章的重點，關於具體的設定可以參考官方的文件說明文件
- option= {
- title: {
- text:'iphone銷¨²量¢?',
- subtext:'純ä?屬º?虛¨¦構1',
- x:'center'
- },
- tooltip: {
- trigger:'item'
- },
- legend: {
- orient:'vertical',
- x:'left',
- data: ['iphone3','iphone4','iphone5']
- },
- dataRange: {
- min:0,
- max:2500,
- text: ['高?','低̨ª'], // 文?本À?，ê?默?認¨?為a數ºy值¦Ì文?本À?
- calculable:true,
- textStyle: {
- color:'orange'
- }
- },
- toolbox: {
- show:true,
- orient:'vertical',
- x:'right',
- y:'center',
- feature: {
- mark:true,
- dataView: { readOnly:false },
- restore:true,
- saveAsImage:true
- }
- },
- series: [
- {
- name:'iphone3',
- type:'map',
- mapType:'china',
- selectedMode: 'single',
- itemStyle: {
- normal: { label: { show:true },color:'#ffd700' },// for legend
- emphasis: { label: { show:true} }
- },
- data: [
- { name:'北À¡À京?',value:Math.round(Math.random() *1000) },
- { name:'天¬¨¬津¨°',value:Math.round(Math.random() *1000) },
- { name:'上¦?海¡ê',value:Math.round(Math.random() *1000) },
- { name:'重?慶¨¬',value:Math.round(Math.random() *1000) },
- { name:'河¨®北À¡À',value:Math.round(Math.random() *1000) },
- { name:'河¨®南?',value:Math.round(Math.random() *1000) },
- { name:'雲?南?',value:Math.round(Math.random() *1000) },
- { name:'遼¢¨¦寧t',value:Math.round(Math.random() *1000) },
- { name:'黑¨²龍¢¨²江-',value:Math.round(Math.random() *1000) },
- { name:'湖t南?',value:Math.round(Math.random() *1000) },
- { name:'安ã2徽?',value:Math.round(Math.random() *1000) },
- { name:'山¦?東?',value:Math.round(Math.random() *1000) },
- { name:'新?疆?',value:Math.round(Math.random() *1000) },
- { name:'江-蘇?',value:Math.round(Math.random() *1000) },
- { name:'浙?江-',value:Math.round(Math.random() *1000) },
- { name:'江-西¡Â',value:Math.round(Math.random() *1000) },
- { name:'湖t北À¡À',value:Math.round(Math.random() *1000) },
- { name:'廣?西¡Â',value:Math.round(Math.random() *1000) },
- { name:'甘¨º肅¨¤',value:Math.round(Math.random() *1000) },
- { name:'山¦?西¡Â',value:Math.round(Math.random() *1000) },
- { name:'內¨²蒙¨¦古?',value:Math.round(Math.random() *1000) },
- { name:'陝¦?西¡Â',value:Math.round(Math.random() *1000) },
- { name:'吉a林¢?',value:Math.round(Math.random() *1000) },
- { name:'福¡ê建¡§',value:Math.round(Math.random() *1000) },
- { name:'貴¨®州Y',value:Math.round(Math.random() *1000) },
- { name:'廣?東?',value:Math.round(Math.random() *1000) },
- { name:'青¨¤海¡ê',value:Math.round(Math.random() *1000) },
- { name:'西¡Â藏?',value:Math.round(Math.random() *1000) },
-
相關推薦
ECharts使用心得(最初的版本)
前言 上週專案組要臨時給客戶做一個演示的原型，首頁設計的是一箇中國地圖，本來打算用谷歌的地圖，但是，做出來之後，整體的效果看起來太差了，最後就在網上搜相關的地圖呈現的控制元件，然後就找到了這個ECharts報表呈現元件，挺不錯的一個元件，而且地圖資料都是離線的，
關於使用echarts心得，及其注意事項
第一步匯入jquery、echarts的包 程式碼如下： <script src="static/scripts/jquery/echarts.js"></script> <script src="static/scripts/jquer
ECharts 全新大版本 4.0 正式釋出
2018年1月16日，百度釋出了旗下知名開源產品 ECharts 的最新大版本 4.0，新版本在產品的效能、功能、易用性等各個方面進行了全面提升。和 ECharts 4.0 一起釋出的還有 ECharts GL 1.0正式版，ZRender 4.0全新版本，WebGL 框架
eCharts.js使用心得
series end 獲取 count 變量名 下使用 unshift tip sss 前端交流群，群文件提供大量文檔、書籍和資料。期待你的加入！群號：127768464 前端交流群，群文件提供大量文檔、書籍和資料。期待你的加入！群號：127768464 最近剛剛做了一個項
學習心得之Zblog選擇數據庫版本及Sql server2012數據庫自增量跳躍1000問題
Sql server2012 數據庫 ZBLOG 博客 學習心得讀書筆記：今天我學習的是關於ZBLOGASP2.2版本程序搭載數據庫的事項，因為最近幾年一直在寫博客，因此對於這套系統的的早期版本還是比較熟悉的，但是對於新版本和新數據庫就沒怎麽了解了。尤其是搭載MS-SQL數據庫或者PHP程序配
工作當中使用echarts提示框的一些心得
比較常見的問題就是我們顯示的提示框的樣式或者是提示框的內容要多加一些東西，這個時候很多人都很頭疼， 那麼我來給大家一種比較好理解的法子。 先來說說需要改成需要的內容 第一種： tooltip: { trigger: 'item', formatter: '{a} &l
ECharts圖表外掛(4.x版本)使用（一、關係圖force節點顯示為自定義影象/圖片，帶分類選擇）
導讀 ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺
Echarts 配置 使用心得
菜鳥記錄： 檢視大神Echarts 心得，成功實現了專案中資料圖表。 echarts 配置如下： <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
Dlib人臉識別 版本一（最初cascade）
# -*- coding: UTF-8 -*- import sys,os,dlib,glob,numpy from skimage import io if len(sys.argv) != 5: print ("請檢查引數是否正確") exit()
漢諾塔I版本心得
首先漢諾塔這道題，我們要分情況分析討論； 這道題最總會得出(2^n) - 1這個結論； 然後就可以用POW函式來求和了。 #include long long pow(int a, int b) { if( b == 0) return 1; if( b ==1
echarts使用心得以及v-charts使用小結
echarts作為圖表使用的越來越廣泛。其API也是非常詳細，官方例項也是非常詳細。這裡主要總結一下echarts中常用的幾個小點以及基於echarts封裝的適用於vue的圖表v-charts，實現更加簡單。 echarts的使用 1、引入 2、準備一個寬高的dom 3、
win101809+office2019專業版增強版本啟用和使用心得
微軟在2018年最重要的貢獻就是作業系統更新了win10 1809秋季創意版和辦公軟體推出了office2019。這兩個版本的搭配是非常完美，獲得了客戶一致好評。今天小編就為大家分享一下這兩個版本的主要特性和啟用教程和金鑰。一 . win10 1809專業版/企業版/ltbs版本下載地址和啟用金鑰。現在大家所
win101809+office2019專業版增強版本激活和使用心得
今天 聯系 pro msd 部分 獲取 msdn 都是 在線 微軟在2018年最重要的貢獻就是操作系統更新了win10 1809秋季創意版和辦公軟件推出了office2019。這兩個版本的搭配是非常完美，獲得了客戶一致好評。今天小編就為大家分享一下這兩個版本的主要特性和激活
SQL Server Management Studio 2008版本的安裝心得
在安裝vs 2010後，自動安裝了ms sqlServer 2008。ms sqlServer 2008比ms sqlServer 2005改進不少，使用更方便。但是發現SQL Server Management Studio 2005版本不能開啟ms
Echarts的使用和學習心得體會（二）
上一篇初步介紹了Echarts的下載和學習時的一些心得，這次將詳細介紹筆者在學習和使用期間碰到的一些問題和解決的辦法。 一、Echarts初始化時的基本設定 1、座標雙軸設定
Echarts使用心得
1. EChart最新的文件目錄。 首先建立一個解決方案，目錄如下： 之前的一篇文章中講到如果要使用Echarts還要下載相關的ZRender的渲染包，最新的版本已經將這些合併在一起了，只需要引用圖中紅框標註的echarts資料夾下的檔案即可。
ECharts 大版本 4.0 正式釋出：帶來 8 項全新“黑科技”特性
來源：開源中國，內容參考自：IFE連結：https://www.oschina.net/news
ECharts使用心得總結(轉載)
七月份因為做微信管理平臺第一次接觸到ECharts，對於剛入行的菜鳥見到如此生動直觀的圖表十分興奮，原來圖表可以這麼漂亮和生動。做專案相應的圖表時就想寫個部落格總結，一直沒寫拖到現在，挺多都不記得可能有些紕漏還望各位踩點的多多指導指正。專案中的圖表形式很多，基本可以在ECharts中找到相應例項，但UI設計圖
echarts散點圖的心得
注：因為工作需要，繪製了echart的幾張圖表，淺顯的研究了官方的配置檔案，將散點圖、柱形圖、跟南丁格圖設計出來了。 先呈現一下效果圖吧。 散點圖只添加了兩組資料，遇到的難點有兩個。 [1.1]geoCoordMap物件的轉換 當時為了處理這個資料花
win10 64位 unity2018.1.18版本 安裝安卓SDK 解決安卓SDK無法更新和釋出apk諸多問題解決心得
首先寫這個部落格確實自己在安裝的時候遇到很多問題，然後自己一步一步解決的，希望對大家有所幫助。 主要解決問題：win10安卓SDK配置、JDK版本過高，釋出apk錯誤和SDK Manager無法更新的問題。 Android開發環境搭建分為以下四步： 第一步、安裝JDK；