Echarts使用心得

1. EChart最新的文件目錄。

首先建立一個解決方案，目錄如下：

之前的一篇文章中講到如果要使用Echarts還要下載相關的ZRender的渲染包，最新的版本已經將這些合併在一起了，只需要引用圖中紅框標註的echarts資料夾下的檔案即可。各檔案的作用如下：

l Echarts-map.js :主要用來渲染跟地圖相關

l Echarts.js :基本的常規圖形相關

l Esl.js :影象引擎

Statics資料夾下的ECharts.js檔案，為我自己抽象總結出來的用於Echarts的配置檔案載入、資料處理、初始化各種影象型別的配置、影象渲染的一些方法。

2. 抽象之後的Echarts。

根據Echarts官網的講解，我把Echarts的使用歸結為一下的幾個步驟，同時這些步驟相應的實現對應到Statics資料夾下的Echarts.js，該檔案的主要程式碼目錄如下：

[javascript] view plain copy

Var ECharts={
ChartConfig:function(container,option){ …..},//載入Echarts配置檔案
ChartDataFormate:{….},//資料格式化
ChartOptionTemplates:{….},//初始化常用的圖表型別
Charts:{ RenderChart:function(option){….},//渲染圖表
RenderMap:function(option){…}//渲染地圖
}
}；

2.1 Echarts配置檔案的引入

在開始使用時，首先需要引入Echarts 的配置檔案，也就是要載入基本的影象型別，我們可以在每一個頁面都引入，但是這樣抽象化程度不高，重複使用率也不高，只需要有一個配置項在每次引用的時候載入一下即可，對應到具體的程式碼實現，如下：

[javascript] view plain copy

ChartConfig:

function (container, option) { //container:為頁面要渲染圖表的容器，option為已經初始化好的圖表型別的option配置
var chart_path = "/Statics/echarts/echarts"; //配置圖表請求路徑
var map_path = "/Statics/echarts/echarts-map";//配置地圖的請求路徑
require.config({//引入常用的圖表型別的配置
paths: {
echarts: chart_path,
'echarts/chart/bar': chart_path,
'echarts/chart/pie': chart_path,
'echarts/chart/line': chart_path,
'echarts/chart/k': chart_path,
'echarts/chart/scatter': chart_path,
'echarts/chart/radar': chart_path,
'echarts/chart/chord': chart_path,
'echarts/chart/force': chart_path,
'echarts/chart/map': map_path
}
});
this.option = { chart: {}, option: option, container: container };
returnthis.option;
}

2.2 資料格式化

為了能夠更好的展現各種的資料，在進行圖表的option配置之前，需要先對從後臺請求過來的資料進行格式化。後臺返回的資料必須是json格式的資料，且資料型別只能為以下兩種型別:

Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]

Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]

具體的程式碼實現如下：

[javascript] view plain copy

ChartDataFormate: {
FormateNOGroupData: function (data) {//data的格式如上的Result1，這種格式的資料，多用於餅圖、單一的柱形圖的資料來源
var categories = [];
var datas = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name || "");
datas.push({ name: data[i].name, value: data[i].value || 0 });
}
return { category: categories, data: datas };
},
FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type為要渲染的圖表型別：可以為line，bar，is_stack表示為是否是堆積圖，這種格式的資料多用於展示多條折線圖、分組的柱圖
var chart_type = 'line';
if (type)
chart_type = type || 'line';
var xAxis = [];
var group = [];
var series = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
if (j == xAxis.length)
xAxis.push(data[i].name);
for (var k = 0; k < group.length && group[k] != data[i].group; k++);
if (k == group.length)
group.push(data[i].group);
}
for (var i = 0; i < group.length; i++) {
var temp = [];
for (var j = 0; j < data.length; j++) {
if (group[i] == data[j].group) {
if (type == "map")
temp.push({ name: data[j].name, value: data[i].value });
else
temp.push(data[j].value);
}
}
switch (type) {
case'bar':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
break;
case'map':
var series_temp = {
name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: temp
};
break;
case'line':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
break;
default:
var series_temp = { name: group[i], data: temp, type: chart_type };
}
series.push(series_temp);
}
return { category: group, xAxis: xAxis, series: series };
相關推薦

關於使用echarts心得，及其注意事項

第一步匯入jquery、echarts的包程式碼如下： <script src="static/scripts/jquery/echarts.js"></script> <script src="static/scripts/jquer

eCharts.js使用心得

series end 獲取 count 變量名下使用 unshift tip sss 前端交流群，群文件提供大量文檔、書籍和資料。期待你的加入！群號：127768464 前端交流群，群文件提供大量文檔、書籍和資料。期待你的加入！群號：127768464 最近剛剛做了一個項

工作當中使用echarts提示框的一些心得

比較常見的問題就是我們顯示的提示框的樣式或者是提示框的內容要多加一些東西，這個時候很多人都很頭疼，那麼我來給大家一種比較好理解的法子。先來說說需要改成需要的內容第一種： tooltip: { trigger: 'item', formatter: '{a} &l

Echarts 配置使用心得

菜鳥記錄：檢視大神Echarts 心得，成功實現了專案中資料圖表。 echarts 配置如下： <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

echarts使用心得以及v-charts使用小結

echarts作為圖表使用的越來越廣泛。其API也是非常詳細，官方例項也是非常詳細。這裡主要總結一下echarts中常用的幾個小點以及基於echarts封裝的適用於vue的圖表v-charts，實現更加簡單。 echarts的使用 1、引入 2、準備一個寬高的dom 3、

Echarts的使用和學習心得體會（二）

上一篇初步介紹了Echarts的下載和學習時的一些心得，這次將詳細介紹筆者在學習和使用期間碰到的一些問題和解決的辦法。一、Echarts初始化時的基本設定 1、座標雙軸設定

Echarts使用心得

1. EChart最新的文件目錄。首先建立一個解決方案，目錄如下：之前的一篇文章中講到如果要使用Echarts還要下載相關的ZRender的渲染包，最新的版本已經將這些合併在一起了，只需要引用圖中紅框標註的echarts資料夾下的檔案即可。

ECharts使用心得(最初的版本)

前言上週專案組要臨時給客戶做一個演示的原型，首頁設計的是一箇中國地圖，本來打算用谷歌的地圖，但是，做出來之後，整體的效果看起來太差了，最後就在網上搜相關的地圖呈現的控制元件，然後就找到了這個ECharts報表呈現元件，挺不錯的一個元件，而且地圖資料都是離線的，

ECharts使用心得總結(轉載)

七月份因為做微信管理平臺第一次接觸到ECharts，對於剛入行的菜鳥見到如此生動直觀的圖表十分興奮，原來圖表可以這麼漂亮和生動。做專案相應的圖表時就想寫個部落格總結，一直沒寫拖到現在，挺多都不記得可能有些紕漏還望各位踩點的多多指導指正。專案中的圖表形式很多，基本可以在ECharts中找到相應例項，但UI設計圖

echarts散點圖的心得

注：因為工作需要，繪製了echart的幾張圖表，淺顯的研究了官方的配置檔案，將散點圖、柱形圖、跟南丁格圖設計出來了。先呈現一下效果圖吧。散點圖只添加了兩組資料，遇到的難點有兩個。 [1.1]geoCoordMap物件的轉換當時為了處理這個資料花

Echarts的使用和學習心得體會

    因為專案的原因，最近學習了Echarts外掛，在開發過程中碰見許多的問題。問題大多數都是些無足輕重的，在這裡主要是想把自己在學習期間的心得感悟寫出來，以便大家參考和學習。一、Echar

echarts使用，一次例項的心得

<template> <div> <div class="charts" ref="charts" :style="{'height': height}"></div> </div> </tem

ECharts使用心得總結

七月份因為做微信管理平臺第一次接觸到ECharts，對於剛入行的菜鳥見到如此生動直觀的圖表十分興奮，原來圖表可以這麼漂亮和生動。做專案相應的圖表時就想寫個部落格總結，一直沒寫拖到現在，挺多都不記得可能有些紕漏還望各位踩點的多多指導指正。專案中的圖表形式很多，基本可以在EC

Echarts使用心得總結——非同步資料載入與更新（二）

上次用Echarts做了一個會員增量統計圖表，正好用到了Echarts非同步資料載入，使用的是下拉聯動+Echarts資料更新，下面把實現程式碼分享給大家。一、時間選擇器下拉聯動的實現： <div class="selects-div"> <

echarts相關使用心得

一、關於echart重新渲染的問題     只要在setOption中函式中，新增一個

STL初探——第一級配置 __malloc_alloc_template的學習心得

exception template 定義 stl 空間似的 strong cep 對象　　在第一級配置器中，一開始就定義了內存分配出錯的宏接口，如下： #ifndef __THROW_BAD_ALLOC # if defined(__STL_NO_BAD_ALLO

開班心得

一個計算挑戰準備學習自己自我介紹讓我開始　　開課第一天，同學們做了自我介紹，很高興認識了很多新的同學。通過短暫的交流，讓自己的興趣越來越濃重了。　　今天老師講了關於.net的一些大概，雖然很多東西都聽不懂，但這讓自己意識到學習才剛剛開始，計算機興趣很重要

STL初探——第二級配置器 __default_alloc_template的學習心得

空間配置 def 管理使用函數效率需求 typename [] 　　SGI STL 第二級配置器使用的是memory pool，即內存池，相比較於第一級空間配置器，第二級空間配置器多了許多限制，主要是為了防止申請小額區塊過多而造成內存碎片。當然小額區塊在配置時實際上

5.4心得

ora 出現紅叉過程 one erl 鼠標是否顯示會有 1、音頻和視頻標簽音頻：audio視頻：video 2、背景圖片和插入圖片的區別1.寫在css裏面的圖片是以背景圖形式存在的，而寫在html裏的img是以標簽形式存在的，在網頁加載的過程中，以css背景圖存在的

Echarts調整圖表上下左右的間距，Echarts調整柱狀圖左右的間距

contain div mage 收藏上下 .com baidu ron 間距 Echarts調整圖表上下左右的間距，Echarts調整柱狀圖左右的間距 >>>>>>>>>>>>>>&

1. EChart最新的文件目錄。

2. 抽象之後的Echarts。

2.2 資料格式化

相關推薦