Echarts學習總結（一）-----柱狀圖
簡介javascript
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，基於【HTML5】Canvas （ZRender），純Javascript圖表庫，是百度的一個開源的數據可視化工具，業界給予了不少讚譽，這裏很少說，須要瞭解詳情的同窗參見官網。我簡略看了下，最貼切的地方在於本地化支持，好比對於中國地圖的支持。 css
名詞解釋 html
基本名詞前端
| 名詞 | 描述 |
|---|---|
| chart | 是指一個完整的圖表，如折線圖，餅圖等「基本」圖表類型或由基本圖表組合而成的「混搭」圖表，可能包括座標軸、圖例等 |
| axis | 直角座標系中的一個座標軸，座標軸可分爲類目軸和數值軸 |
| xAxis | 直角座標系中的橫軸，一般並默認爲類目軸 |
| yAxis | 直角座標系中的縱軸，一般並默認爲數值軸 |
| grid | 直角座標系中除座標軸外的繪圖網格 |
| legend | 圖例，表述數據和圖形的關聯 |
| dataRange | 值域選擇，經常使用於展示地域數據時選擇值域範圍 |
| dataZoom | 數據區域縮放，經常使用於展示大數據時選擇可視範圍 |
| toolbox | 輔助工具箱，輔助功能，如添加標線，框選縮放等 |
| tooltip | 氣泡提示框，經常使用於展示更詳細的數據 |
| timeline | 時間軸，經常使用於展示同一組數據在時間維度上的多份數據 |
| series | 數據系列，一個圖表可能包含多個系列，每個系列可能包含多個數據 |
圖表名詞java
| 名詞 | 描述 |
|---|---|
| line | 折線圖，堆積折線圖，區域圖，堆積區域圖。 |
| bar | 柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。 |
| scatter | 散點圖，氣泡圖。散點圖至少須要橫縱兩個數據，更高維度數據加入時能夠映射爲顏色或大小，當映射到大小時則爲氣泡圖 |
| k | K線圖，蠟燭圖。經常使用於展示股票交易數據。 |
| pie | 餅圖，圓環圖。餅圖支持兩種（半徑、面積）南丁格爾玫瑰圖模式。 |
| radar | 雷達圖，填充雷達圖。高維度數據展示的經常使用圖表。 |
| chord | 和絃圖。經常使用於展示關係數據，外層爲圓環圖，可體現數據佔比關係，內層爲各個扇形間相互鏈接的弦，可體現關係數據 |
| force | 力導佈局圖。經常使用於展示覆雜關係網絡聚類佈局。 |
| map | 地圖。內置世界地圖、中國及中國34個省市自治區地圖數據、可經過標準GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。 |
引入Echarts的方式node
echarts提供多種引入方式，請根據你的項目類型選擇合適的方式：git
1 模塊化包引入
須要注意的是，包引入提供了開發階段最大的靈活性，但並不適合直接上線，減小請求的文件數量是前端性能優化中最基本但很重要的規則，務必在上線時文件的連github
接壓縮。canvas
require.config({
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
},{
name:'zrender',
location:'../js/zrender',//zrender與echarts，在同一級目錄,模塊化包引入
main:'zrender'
}
]
});
首先下載Zrender到本地，和ECharts放在同一目錄下。瀏覽器
在echarts/doc/example/www文件中創建一個HTML文件，所使用的js文件都包含在js文件中。 包含echarts.js、echarts-map.js、esl.js三個，其實只用到兩個，echarts-map.js並不用。
2 模塊化單文件引入（推薦）
若是你使用模塊化開發但並無本身的打包合併環境，或者說你不但願在你的項目裏引入第三方庫的源文件，咱們建議你使用單文件引入，同模塊化包引入同樣，你須要熟悉模塊化開發，這種方式只是咱們預先幫你把經常使用圖表組合鏈接合併在一塊兒，你只需一個符合AMD規範的加載器，同時引入一個echarts相關js便可。如你所發現的，build文件夾下已經生成了不一樣組合的多個單文件見下，根據你的需求場景只須要使用其中一個便可：
例子： 在這裏咱們只是用line圖表，其餘的不用，若是你不用的話打包在一塊兒就很是浪費，這時候就能夠經過build目錄下的build.js文件來構建一個更加貼身的echarts單文件。 總結來講模塊化如何引入ECharts，你都須要以下4步： 一、引入一個模塊加載器，如esl.js或者require.js 二、爲ECharts準備一個具有大小（寬高）的Dom（固然能夠是動態生成的） 三、爲模塊加載器配置echarts的路徑，從當前頁面連接到echarts.js，見上述說明 四、動態加載echarts而後在回調函數中開始使用（容我羅嗦一句，當你確保同一頁面已經加載過echarts，再使用時直接require('echarts').init(dom)就行）
首先下載node下載完成後，安裝好node。 打開build文件夾，看到以下文件：
這裏我已經創建了一個新的build01.bat 就是單一輩子成echarts.js
node build.js optimize=true plain=false exclude=map output=echarts.js
固然也能夠在終端裏經過命令行參數方式運行 node.js構建腳本。
具體語法：
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
| 名稱 | 描述 |
|---|---|
| optimize | 是否壓縮, 默認false |
| exclude | 不打包的圖表，多個圖表使用逗號分割, 默認使用全部圖表 |
| output | 輸出打包地址，默認爲echarts.js |
| plain | 是否打包esl, 打包的話能夠直接使用scripts標籤引入, 默認false |
config-tpl.js文件修改成：
{
// appDir: './',
baseUrl: '../src',
name: 'echarts',
packages: [
{
name: 'zrender',
location: '../../zrender/src',
main: 'zrender'
},
{
name: 'echarts',
location: '.',
main: 'echarts'
}
],
include:[
'echarts/chart/line'
],
out: 'echarts.js'
}
完成後，將echarts.js拷貝到doc/example/www/js文件中，並將原有的覆蓋
HTML配置以下：
require.config({
paths: {
echarts: '../js/echarts', //echarts.js的路徑
'echarts/chart/bar' : './js/echarts', // 把所需圖表指向單文件
'echarts/chart/line': './js/echarts'
}
});
require.config配置後後就能夠經過動態加載使用echarts。
require(
[
'echarts',
'echarts/chart/line', // 按需加載所需圖表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(domMain);
var option = {
...
}
myChart.setOption(option);
}
);
3 標籤式單文件引入
若是你的項目自己並非基於模塊化開發的，或者是基於CMD規範（如使用的是seajs），那麼引入基於AMD模塊化的echarts可能並不方便，咱們建議你採用srcipt標籤
式引入，忘掉require，srcipt標籤引入echarts後將能夠直接使用兩個全局的命名空間：echarts，zrender，可是須要注意的是excanvas依賴body標籤插入Canvas節點
去判斷Canvas的支持，若是你把引用echarts的script標籤放置head內在IE8-的瀏覽器中會出現報錯，解決的辦法就是把標籤移動到body內（後）。
標籤式引入環境中，經常使用模塊的引用可經過命名空間直取，同模塊化下的路徑結構，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
能夠直接引入的單文件以下：
echarts.js : 通過壓縮，包含除地圖外的所有圖表
echarts-original.js : 未壓縮，可用於調試，包含除地圖外的所有圖表
echarts-map.js : 通過壓縮，全圖表，包含world，china以及34個省市級地圖數據
echarts-original-map.js : 未壓縮，可用於調試，全圖表，包含world，china以及34個省市級地圖數據
<script src="example/www2/js/echarts-plain.js"></script>
<script>
var myChart = echarts.init(domMain);
var option = {
...
}
myChart.setOption(option);
</script>
牛刀小試----代碼解析柱狀圖
今天在學習Echarts練習時，老是在路徑的配置上出現錯誤，做爲入門，總結一下，在此分享給你們，但願有用。
ECharts主頁： http://echarts.baidu.com/index.html
ECharts-2.2.0下載地址： http://echarts.baidu.com/build/echarts-2.2.0.zip
ECharts官方實例： http://echarts.baidu.com/doc/example.html
ECharts官方API文檔： http://echarts.baidu.com/doc/doc.html
須要注意的是ECharts內部也是依賴於另外一個插件的叫ZRender，固然對於大部分圖表而言不須要ZRender的，可是對於地圖控件及其餘複雜的呈現控件而已都是須要ZRender的。爲了不不要的問題出現，建議你們在下載ECharts時同時也要下載ZRender。
ZRender下載地址：http://ecomfe.github.io/zrender/index.html
一、項目結構
js文件夾： 下載了ECharts以後，解壓縮，如解壓後的根目錄是echarts-2.2.0，則到echarts-2.2.0\doc\example\www路徑下，把裏面的js文件夾直接複製粘貼到項目的 WebRoot根目錄下便可。ZRender插件放在與ECharts的同一目錄下，即zrender-master\src
這裏有如下幾點須要說明：
l 全部的跟ECharts有關的文件所有都在echarts文件夾下
l echarts文件夾的內容分爲兩部分
1) 一部分是以echarts開頭的js文件，這些文件所有來自於1.中的ECharts文件目錄中的js文件夾下的文件，也就是1.中的圖中紅框標註的js下的文件。以下：
2) 另外一部分是一個名爲zrender的文件夾，這裏須要特別注意的是該文件夾的命名必須爲zrender，由於在echarts的js文件中對zrender的引用都是以zrender爲根目錄的，zrender文件夾的內容即爲1.中zrender文件目錄中的src文件夾下的內容，以下：
dem1：index.html：在WebRoot根目錄下新建index.html
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="js/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: './js'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載
'echarts/chart/line'
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['銷量']
},
xAxis : [
{
type : 'category',
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:"銷量",
type:"bar",
data:[5, 20, 40, 10, 10, 20]
},//折線圖
{
name:"銷量",
type:"line",
data:[5, 20, 40, 10, 10, 20],
//繪製平均線
markLine : {
data : [
{
type : 'average',
name: '平均值'
}
]
},
//繪製最高最低點
markPoint : {
data : [
{
type : 'max',
name: '最大值'
},
{
type : 'min',
name: '最小值'
}
]
}
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>
</html>
dem2：echarts.jsp：同上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts-基本線性圖及其配置要求</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 爲ECharts準備一個具有大小（寬高）的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="width:500px;height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script src="js/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 爲模塊加載器配置echarts的路徑，從當前頁面連接到echarts.js，定義所需圖表路徑
require.config({
paths: {
echarts: './js' //echarts.js所在的路徑
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 動態加載echarts而後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {//渲染ECharts圖表 ，可單獨寫出來做爲回調函數
//--- 折柱 ---
//圖表渲染的容器對象
var chartContainer = document.getElementById("main"); //""、''這裏都可以
//加載圖表
var myChart = ec.init(chartContainer);
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸發量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
name : '月份',
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
name : '數值',
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
// --- 地圖 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
var option = {
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中國',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'廣東',selected:true}
]
}
]
};
myChart2.setOption(option); // 爲echarts對象加載數據
}
);
</script>
</body>
</html>
完成以上的步驟後，把項目發佈到服務器，在瀏覽器上訪問echarts.jsp(因爲本實例尚未跟後臺進行交互，只是先作一個前臺用法介紹，因此能夠把echart.jsp直接修改爲echarts.html文件,把它跟js文件夾放在同一級目錄下，而後直接用瀏覽器打開echarts.html)，便可看到效果。好了，此次總結就先到這裏！
- 1. echarts柱狀圖
- 2. Echarts柱狀圖
- 3. echarts 柱狀圖
- 4. Echarts柱狀圖，餅狀圖
- 5. echarts - 多柱子柱狀圖
- 6. Echarts柱狀圖學習心得體會
- 7. ECharts之柱狀圖
- 8. Echarts 柱狀圖組
- 9. Echarts柱狀圖和折線圖結合
- 10. Echarts-柱狀圖柱圖寬度設置
- 更多相關文章...
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Kotlin學習（一）基本語法
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. echarts柱狀圖
- 2. Echarts柱狀圖
- 3. echarts 柱狀圖
- 4. Echarts柱狀圖，餅狀圖
- 5. echarts - 多柱子柱狀圖
- 6. Echarts柱狀圖學習心得體會
- 7. ECharts之柱狀圖
- 8. Echarts 柱狀圖組
- 9. Echarts柱狀圖和折線圖結合
- 10. Echarts-柱狀圖柱圖寬度設置