Echart？
ECharts 是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。
ECharts 遵循 Apache-2.0 開源協(xié)議，免費(fèi)商用。
ECharts 兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等）及兼容多種設(shè)備，可隨時(shí)隨地任性展示。
ECharts 包含了以下特性：
- 豐富的可視化類型: 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
- 多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用: 內(nèi)置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數(shù)據(jù)源，此外還支持輸入 TypedArray 格式的數(shù)據(jù)。
- 千萬數(shù)據(jù)的前端展現(xiàn): 通過增量渲染技術(shù)（4.0+），配合各種細(xì)致的優(yōu)化，ECharts 能夠展現(xiàn)千萬級(jí)的數(shù)據(jù)量。
- 移動(dòng)端優(yōu)化: 針對(duì)移動(dòng)端交互做了細(xì)致的優(yōu)化，例如移動(dòng)端小屏上適于用手指在坐標(biāo)系中進(jìn)行縮放、平移。 PC 端也可以用鼠標(biāo)在圖中進(jìn)行縮放（用鼠標(biāo)滾輪）、平移等。
- 多渲染方案，跨平臺(tái)使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。
- 深度的交互式數(shù)據(jù)探索: 提供了 圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、tooltip、數(shù)據(jù)刷選等開箱即用的交互組件，可以對(duì)數(shù)據(jù)進(jìn)行多維度數(shù)據(jù)篩取、視圖縮放、展示細(xì)節(jié)等交互操作。
- 多維數(shù)據(jù)的支持以及豐富的視覺編碼手段: 對(duì)于傳統(tǒng)的散點(diǎn)圖等，傳入的數(shù)據(jù)也可以是多個(gè)維度的。
- 動(dòng)態(tài)數(shù)據(jù): 數(shù)據(jù)的改變驅(qū)動(dòng)圖表展現(xiàn)的改變。
- 絢麗的特效: 針對(duì)線數(shù)據(jù)，點(diǎn)數(shù)據(jù)等地理數(shù)據(jù)的可視化提供了吸引眼球的特效。
- 通過 GL 實(shí)現(xiàn)更多更強(qiáng)大絢麗的三維可視化: 在 VR，大屏場(chǎng)景里實(shí)現(xiàn)三維的可視化效果。
- 無障礙訪問（4.0+）: 支持自動(dòng)根據(jù)圖表配置項(xiàng)智能生成描述，使得盲人可以在朗讀設(shè)備的幫助下了解圖表內(nèi)容，讓圖表可以被更多人群訪問！
Echarts的基本使用及語法格式
使用Echarts需要有一個(gè)容器去填充相關(guān)的圖表圖例
-
引入cdn
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -
首先創(chuàng)建一個(gè)容器（以div盒模型為例）,需要指明寬高否則不會(huì)生效。
<div id="myEchart1" style="width:300px;height:200px;"> </div> -
獲取echarts對(duì)象及初始化option配置參數(shù)（JSON的數(shù)據(jù)格式）
分為三步：
// 1.根據(jù)id獲取dom元素，并且創(chuàng)建echart實(shí)例對(duì)象 var myEchart1 = echarts.init(document.getElementById('myEchart1')); // 2.設(shè)定配置項(xiàng)及圖表初始化數(shù)據(jù) var option = {.....} // 3.將設(shè)置的配置項(xiàng)設(shè)定到echart實(shí)例中 myEchart1.setOption(option);使用示例如下：
<script> // 1.根據(jù)id獲取dom元素，并且創(chuàng)建echart實(shí)例對(duì)象 var myEchart1 = echarts.init(document.getElementById('myEchart1')); // 2.設(shè)定配置項(xiàng)及圖表初始化數(shù)據(jù) var option = { // 標(biāo)題 title: { text: '編程語言投票', left: 'center', top: 20, textStyle: { color: 'black' } }, // 配置提示信息 tooltip: {}, // 圖例組件 legend: { data: ['編程語言'] }, // x軸要顯示的值 xAxis: { data: ["Java", "C", "Php", "Go", "Python", "JavaScript"] }, // y軸要顯示的值 yAxis: {}, //系列列表，每個(gè)系列通過 type 決定自己的圖表類型 // bar 柱狀條形圖，line折線，pie餅圖.... series: [{ name: '排名占比', type: 'bar', data: [50, 40, 36, 30, 48, 38] }] }; // 3.將設(shè)置的配置項(xiàng)設(shè)定到echart實(shí)例中 myEchart1.setOption(option); </script>
-
option配置項(xiàng)說明
參考官方文檔，里面有完整詳細(xì)的描述 https://echarts.apache.org/zh/option.html
JSON的數(shù)據(jù)格式
// 1. 標(biāo)題 title:{ } // 2.配置提示信息 tooltip:{ } // 3.圖例組件 lengend:{ // 數(shù)據(jù)項(xiàng) data:[{ }] } // 4.橫縱軸顯示 xAxis:{ } yAxis:{ } //4. series系列列表，每個(gè)系列通過 type 決定自己的圖表類型 // bar 柱狀條形圖，line折線，pie餅圖.... series: [{ name: 'xxx', // 系列名稱 type: 'xxx', // 系列圖表類型 data: [] // 系列中的數(shù)據(jù)內(nèi)容 }]series中的type可選值：
- type: ‘bar’：柱狀/條形圖 type: ‘line’：折線/面積圖
- type: ‘pie’：餅圖 type: ‘scatter’：散點(diǎn)（氣泡）圖
- type: ‘effectScatter’：帶有漣漪特效動(dòng)畫的散點(diǎn)（氣泡）
- type: ‘radar’：雷達(dá)圖 type: ‘tree’：樹型圖
- type: ‘treemap’：樹型圖 type: ‘sunburst’：旭日?qǐng)D
- type: ‘boxplot’：箱形圖 type: ‘candlestick’：K線圖
- type: ‘heatmap’：熱力圖 type: ‘map’：地圖
- type: ‘parallel’：平行坐標(biāo)系的系列 type: ‘lines’：線圖
- type: ‘graph’：關(guān)系圖 type: ‘sankey’：?；鶊D
- type: ‘funnel’：漏斗圖 type: ‘gauge’：儀表盤
- type: ‘pictorialBar’：象形柱圖 type: ‘themeRiver’：主題河流
- type: ‘custom’：自定義系列
簡(jiǎn)單圖表繪制和使用
1. 簡(jiǎn)單的餅圖繪制及選中高亮?xí)r的配置
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比，它的數(shù)據(jù)格式比柱狀圖更簡(jiǎn)單，只有一維的數(shù)值，不需要給類目。因?yàn)椴辉谥苯亲鴺?biāo)系上，所以也不需要 xAxis，yAxis。
選中高亮?xí)r的配置，即鼠標(biāo)選中該區(qū)域的一個(gè)樣式，echarts為我們提供了 emphasis 來對(duì)選中時(shí)的樣式進(jìn)行配置
emphasis: {
itemStyle: {
// 高亮?xí)r點(diǎn)的顏色
color: 'cyan'
},
label: {
show: true,
// 高亮?xí)r標(biāo)簽的文字
formatter: 'hihihi'
}
}
小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 餅圖</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="pie1" style="width:400px;height: 300px;">
</div>
<script>
var pie1 = echarts.init(document.getElementById('pie1', 'dark'));
var option = {
tooltip: {
},
series: [
{
name: '學(xué)分信息',
type: 'pie', // 設(shè)置圖表類型為餅圖
radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長(zhǎng)度。
// 高亮?xí)r的配置
emphasis: {
itemStyle: {
// 高亮?xí)r點(diǎn)的顏色
color: 'cyan'
},
label: {
show: true,
// 高亮?xí)r標(biāo)簽的文字
formatter: 'hihihi'
}
},
data: [ // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項(xiàng)名稱，value 為數(shù)據(jù)項(xiàng)值
{ value: 33.5, name: '公共必修課' },
{ value: 78, name: '公共選修課' },
{ value: 12, name: '專業(yè)選修課' },
{ value: 6, name: '專業(yè)必修課' },
],
}
]
};
pie1.setOption(option);
</script>
</body>
</html>
2. 圖例添加
圖例添加，在我們繪制圖表時(shí)經(jīng)常會(huì)使用，使用legend來進(jìn)行配置。
在echarts中圖例是圖表中對(duì)內(nèi)容區(qū)元素的注釋、用不同形狀、顏色、文字等來標(biāo)示不同數(shù)據(jù)列，通過點(diǎn)擊對(duì)應(yīng)數(shù)據(jù)列的標(biāo)記，可以顯示或隱藏該數(shù)據(jù)列。
在legend中四個(gè)方位中 bottom和top如果寫字符串的話就是對(duì)應(yīng)的center,left…，然后四個(gè)方位都可以寫數(shù)字，即表示對(duì)應(yīng)的邊距值
legend: {
// 圖例排列方式 水平或者垂直 horizontal | vertical
orient: 'vertical',
// 圖例的詳細(xì)位置信息
left: 10,
top: 'center',
bottom: 10,
right:10
},
小例子：
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<div id="pie2" style="width:400px;height:400px;">
</div>
<script>
var pie2 = echarts.init(document.getElementById('pie2'));
var option = {
legend: {
orient: 'vertical',
right: 10,
top: 'center'
},
tooltip: {
},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
pie2.setOption(option);
</script>
覺得上面的圖例樣式，太單調(diào)，可以使用legend.data來對(duì)圖例名稱(name)和圖例圖標(biāo)(icon)的設(shè)定
比如我們將上面的代碼修改如下：
legend: {
// orient: 'vertical',
// right: 10,
// top: 'center',
data: [
{
name: '2015',
icon: 'rect'
},
{
name: '2016',
icon: 'circle'
},
{
name: '2017',
icon: 'pin'
}
]
},
文章來源：http://www.zghlxwxcb.cn/news/detail-759454.html
還有好多不足，后續(xù)再補(bǔ)充！文章來源地址http://www.zghlxwxcb.cn/news/detail-759454.html
到了這里，關(guān)于Echart的使用初體驗(yàn)，Echarts的基本使用及語法格式，簡(jiǎn)單圖表繪制和使用及圖例添加【學(xué)習(xí)筆記】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
