當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【ECharts系列|01入门】从入门到天黑【入门级教程实战】

發(fā)布時(shí)間：2023/12/2 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了【ECharts系列|01入门】从入门到天黑【入门级教程实战】小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

ECharts 是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。

ECharts 遵循 Apache-2.0 開源協(xié)議，免費(fèi)商用。

ECharts 兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多種設(shè)備，可隨時(shí)隨地任性展示。

ECharts簡介

?ECharts 安裝

ECharts 配置語法

ECharts 餅圖

ECharts 樣式設(shè)置

ECharts 異步加載數(shù)據(jù)

ECharts 數(shù)據(jù)集（dataset）

ECharts 交互組件

ECharts 響應(yīng)式

ECharts 數(shù)據(jù)的視覺映射

ECharts 事件處理

ECharts 旭日圖

ECharts簡介

ECharts 包含了以下特性：

豐富的可視化類型: 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(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)千萬級的數(shù)據(jù)量。
移動端優(yōu)化: 針對移動端交互做了細(xì)致的優(yōu)化，例如移動端小屏上適于用手指在坐標(biāo)系中進(jìn)行縮放、平移。 PC 端也可以用鼠標(biāo)在圖中進(jìn)行縮放（用鼠標(biāo)滾輪）、平移等。
多渲染方案，跨平臺使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。
深度的交互式數(shù)據(jù)探索: 提供了圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、tooltip、數(shù)據(jù)刷選等開箱即用的交互組件，可以對數(shù)據(jù)進(jìn)行多維度數(shù)據(jù)篩取、視圖縮放、展示細(xì)節(jié)等交互操作。
多維數(shù)據(jù)的支持以及豐富的視覺編碼手段: 對于傳統(tǒng)的散點(diǎn)圖等，傳入的數(shù)據(jù)也可以是多個(gè)維度的。
動態(tài)數(shù)據(jù): 數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變。
絢麗的特效: 針對線數(shù)據(jù)，點(diǎn)數(shù)據(jù)等地理數(shù)據(jù)的可視化提供了吸引眼球的特效。
通過 GL 實(shí)現(xiàn)更多更強(qiáng)大絢麗的三維可視化: 在 VR，大屏場景里實(shí)現(xiàn)三維的可視化效果。
無障礙訪問（4.0+）: 支持自動根據(jù)圖表配置項(xiàng)智能生成描述，使得盲人可以在朗讀設(shè)備的幫助下了解圖表內(nèi)容，讓圖表可以被更多人群訪問！

示例

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>孫叫獸演示 ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: '孫叫獸演示 ECharts 實(shí)例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["孫叫獸","1_bit","敖丙","三太子","哪吒","games"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

?效果圖：

?ECharts 安裝

直接下載 echarts.min.js 并用?<script>?標(biāo)簽引入。

生產(chǎn)環(huán)境echarts.min.js

開發(fā)環(huán)境下可以使用源代碼版本 echarts.js 并用?<script>?標(biāo)簽引入，源碼版本包含了常見的錯(cuò)誤提示和警告。

開發(fā)版echarts.js

?ECharts 的官網(wǎng)上直接下載更多豐富的版本，包含了不同主題跟語言，下載地址：https://www.echartsjs.com/zh/download.html。

NPM 方法

安裝完成后 ECharts 和 zrender 會放在 node_modules 目錄下，我們可以直接在項(xiàng)目代碼中使用?require('echarts')?來使用。

ECharts 配置語法

第一步：創(chuàng)建 HTML 頁面

創(chuàng)建一個(gè) HTML 頁面，引入 echarts.min.js：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="echarts.min.js"></script> </head> </html>

第二步: 為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器

實(shí)例中 id 為 main 的 div 用于包含 ECharts 繪制的圖表:

第三步: 設(shè)置配置信息

ECharts 庫使用 json 格式來配置。

echarts.init(document.getElementById('main')).setOption(option);

這里 option 表示使用 json 數(shù)據(jù)格式的配置來繪制圖表。步驟如下：

標(biāo)題

為圖表配置標(biāo)題：

title: {text: '孫叫獸演示 ECharts 實(shí)例' }

提示信息

配置提示信息：

tooltip: {},

圖例組件

圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字。可以通過點(diǎn)擊圖例控制哪些系列不顯示。

legend: {data: [{name: '系列1',// 強(qiáng)制設(shè)置圖形為圓。icon: 'circle',// 設(shè)置文本為紅色textStyle: {color: 'red'}}] }

X 軸

配置要在 X 軸顯示的項(xiàng):

xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }

Y 軸

配置要在 Y 軸顯示的項(xiàng)。

yAxis: {}

系列列表

每個(gè)系列通過 type 決定自己的圖表類型:

series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容 }]

每個(gè)系列通過 type 決定自己的圖表類型：

type: 'bar'：柱狀/條形圖
type: 'line'：折線/面積圖
type: 'pie'：餅圖
type: 'scatter'：散點(diǎn)（氣泡）圖
type: 'effectScatter'：帶有漣漪特效動畫的散點(diǎn)（氣泡）
type: 'radar'：雷達(dá)圖
type: 'tree'：樹型圖
type: 'treemap'：樹型圖
type: 'sunburst'：旭日圖
type: 'boxplot'：箱形圖
type: 'candlestick'：K線圖
type: 'heatmap'：熱力圖
type: 'map'：地圖
type: 'parallel'：平行坐標(biāo)系的系列
type: 'lines'：線圖
type: 'graph'：關(guān)系圖
type: 'sankey'：桑基圖
type: 'funnel'：漏斗圖
type: 'gauge'：儀表盤
type: 'pictorialBar'：象形柱圖
type: 'themeRiver'：主題河流
type: 'custom'：自定義系列

配置項(xiàng)總結(jié)

theme = {// 全圖默認(rèn)背景// backgroundColor: 'rgba(0,0,0,0)',// 默認(rèn)色板color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],// 圖表標(biāo)題title: {x: 'left', // 水平安放位置，默認(rèn)為左對齊，可選為：// 'center' | 'left' | 'right'// | {number}（x坐標(biāo)，單位px）y: 'top', // 垂直安放位置，默認(rèn)為全圖頂端，可選為：// 'top' | 'bottom' | 'center'// | {number}（y坐標(biāo)，單位px）//textAlign: null // 水平對齊方式，默認(rèn)根據(jù)x設(shè)置自動調(diào)整backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc', // 標(biāo)題邊框顏色borderWidth: 0, // 標(biāo)題邊框線寬，單位px，默認(rèn)為0（無邊框）padding: 5, // 標(biāo)題內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，// 接受數(shù)組分別設(shè)定上右下左邊距，同cssitemGap: 10, // 主副標(biāo)題縱向間隔，單位px，默認(rèn)為10，textStyle: {fontSize: 18,fontWeight: 'bolder',color: '#333' // 主標(biāo)題文字顏色},subtextStyle: {color: '#aaa' // 副標(biāo)題文字顏色}},// 圖例legend: {orient: 'horizontal', // 布局方式，默認(rèn)為水平布局，可選為：// 'horizontal' | 'vertical'x: 'center', // 水平安放位置，默認(rèn)為全圖居中，可選為：// 'center' | 'left' | 'right'// | {number}（x坐標(biāo)，單位px）y: 'top', // 垂直安放位置，默認(rèn)為全圖頂端，可選為：// 'top' | 'bottom' | 'center'// | {number}（y坐標(biāo)，單位px）backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc', // 圖例邊框顏色borderWidth: 0, // 圖例邊框線寬，單位px，默認(rèn)為0（無邊框）padding: 5, // 圖例內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，// 接受數(shù)組分別設(shè)定上右下左邊距，同cssitemGap: 10, // 各個(gè)item之間的間隔，單位px，默認(rèn)為10，// 橫向布局時(shí)為水平間隔，縱向布局時(shí)為縱向間隔itemWidth: 20, // 圖例圖形寬度itemHeight: 14, // 圖例圖形高度textStyle: {color: '#333' // 圖例文字顏色}},// 值域dataRange: {orient: 'vertical', // 布局方式，默認(rèn)為垂直布局，可選為：// 'horizontal' | 'vertical'x: 'left', // 水平安放位置，默認(rèn)為全圖左對齊，可選為：// 'center' | 'left' | 'right'// | {number}（x坐標(biāo)，單位px）y: 'bottom', // 垂直安放位置，默認(rèn)為全圖底部，可選為：// 'top' | 'bottom' | 'center'// | {number}（y坐標(biāo)，單位px）backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc', // 值域邊框顏色borderWidth: 0, // 值域邊框線寬，單位px，默認(rèn)為0（無邊框）padding: 5, // 值域內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，// 接受數(shù)組分別設(shè)定上右下左邊距，同cssitemGap: 10, // 各個(gè)item之間的間隔，單位px，默認(rèn)為10，// 橫向布局時(shí)為水平間隔，縱向布局時(shí)為縱向間隔itemWidth: 20, // 值域圖形寬度，線性漸變水平布局寬度為該值 * 10itemHeight: 14, // 值域圖形高度，線性漸變垂直布局高度為該值 * 10splitNumber: 5, // 分割段數(shù)，默認(rèn)為5，為0時(shí)為線性漸變color:['#1e90ff','#f0ffff'],//顏色 //text:['高','低'], // 文本，默認(rèn)為數(shù)值文本textStyle: {color: '#333' // 值域文字顏色}},toolbox: {orient: 'horizontal', // 布局方式，默認(rèn)為水平布局，可選為：// 'horizontal' | 'vertical'x: 'right', // 水平安放位置，默認(rèn)為全圖右對齊，可選為：// 'center' | 'left' | 'right'// | {number}（x坐標(biāo)，單位px）y: 'top', // 垂直安放位置，默認(rèn)為全圖頂端，可選為：// 'top' | 'bottom' | 'center'// | {number}（y坐標(biāo)，單位px）color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色borderColor: '#ccc', // 工具箱邊框顏色borderWidth: 0, // 工具箱邊框線寬，單位px，默認(rèn)為0（無邊框）padding: 5, // 工具箱內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，// 接受數(shù)組分別設(shè)定上右下左邊距，同cssitemGap: 10, // 各個(gè)item之間的間隔，單位px，默認(rèn)為10，// 橫向布局時(shí)為水平間隔，縱向布局時(shí)為縱向間隔itemSize: 16, // 工具箱圖形寬度featureImageIcon : {}, // 自定義圖片iconfeatureTitle : {mark : '輔助線開關(guān)',markUndo : '刪除輔助線',markClear : '清空輔助線',dataZoom : '區(qū)域縮放',dataZoomReset : '區(qū)域縮放后退',dataView : '數(shù)據(jù)視圖',lineChart : '折線圖切換',barChart : '柱形圖切換',restore : '還原',saveAsImage : '保存為圖片'}},// 提示框tooltip: {trigger: 'item', // 觸發(fā)類型，默認(rèn)數(shù)據(jù)觸發(fā)，見下圖，可選為：'item' | 'axis'showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位mshideDelay: 100, // 隱藏延遲，單位mstransitionDuration : 0.4, // 動畫變換時(shí)間，單位sbackgroundColor: 'rgba(0,0,0,0.7)', // 提示背景顏色，默認(rèn)為透明度為0.7的黑色borderColor: '#333', // 提示邊框顏色borderRadius: 4, // 提示邊框圓角，單位px，默認(rèn)為4borderWidth: 0, // 提示邊框線寬，單位px，默認(rèn)為0（無邊框）padding: 5, // 提示內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，// 接受數(shù)組分別設(shè)定上右下左邊距，同cssaxisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效type : 'line', // 默認(rèn)為直線，可選為：'line' | 'shadow'lineStyle : { // 直線指示器樣式設(shè)置color: '#48b',width: 2,type: 'solid'},shadowStyle : { // 陰影指示器樣式設(shè)置width: 'auto', // 陰影大小color: 'rgba(150,150,150,0.3)' // 陰影顏色}},textStyle: {color: '#fff'}},// 區(qū)域縮放控制器dataZoom: {orient: 'horizontal', // 布局方式，默認(rèn)為水平布局，可選為：// 'horizontal' | 'vertical'// x: {number}, // 水平安放位置，默認(rèn)為根據(jù)grid參數(shù)適配，可選為：// {number}（x坐標(biāo)，單位px）// y: {number}, // 垂直安放位置，默認(rèn)為根據(jù)grid參數(shù)適配，可選為：// {number}（y坐標(biāo)，單位px）// width: {number}, // 指定寬度，橫向布局時(shí)默認(rèn)為根據(jù)grid參數(shù)適配// height: {number}, // 指定高度，縱向布局時(shí)默認(rèn)為根據(jù)grid參數(shù)適配backgroundColor: 'rgba(0,0,0,0)', // 背景顏色dataBackgroundColor: '#eee', // 數(shù)據(jù)背景顏色fillerColor: 'rgba(144,197,237,0.2)', // 填充顏色handleColor: 'rgba(70,130,180,0.8)' // 手柄顏色},// 網(wǎng)格grid: {x: 80,y: 60,x2: 80,y2: 60,// width: {totalWidth} - x - x2,// height: {totalHeight} - y - y2,backgroundColor: 'rgba(0,0,0,0)',borderWidth: 1,borderColor: '#ccc'},// 類目軸categoryAxis: {position: 'bottom', // 位置nameLocation: 'end', // 坐標(biāo)軸名字位置，支持'start' | 'end'boundaryGap: true, // 類目起始和結(jié)束兩端空白策略axisLine: { // 坐標(biāo)軸線show: true, // 默認(rèn)顯示，屬性show控制顯示與否lineStyle: { // 屬性lineStyle控制線條樣式color: '#48b',width: 2,type: 'solid'}},axisTick: { // 坐標(biāo)軸小標(biāo)記show: true, // 屬性show控制顯示與否，默認(rèn)不顯示interval: 'auto',// onGap: null,inside : false, // 控制小標(biāo)記是否在grid里 length :5, // 屬性length控制線長lineStyle: { // 屬性lineStyle控制線條樣式color: '#333',width: 1}},axisLabel: { // 坐標(biāo)軸文本標(biāo)簽，詳見axis.axisLabelshow: true,interval: 'auto',rotate: 0,margin: 8,// formatter: null,textStyle: { // 其余屬性默認(rèn)使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},splitLine: { // 分隔線show: true, // 默認(rèn)顯示，屬性show控制顯示與否// onGap: null,lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式color: ['#ccc'],width: 1,type: 'solid'}},splitArea: { // 分隔區(qū)域show: false, // 默認(rèn)不顯示，屬性show控制顯示與否// onGap: null,areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區(qū)域樣式color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}}},// 數(shù)值型坐標(biāo)軸默認(rèn)參數(shù)valueAxis: {position: 'left', // 位置nameLocation: 'end', // 坐標(biāo)軸名字位置，支持'start' | 'end'nameTextStyle: {}, // 坐標(biāo)軸文字樣式，默認(rèn)取全局樣式boundaryGap: [0, 0], // 數(shù)值起始和結(jié)束兩端空白策略splitNumber: 5, // 分割段數(shù)，默認(rèn)為5axisLine: { // 坐標(biāo)軸線show: true, // 默認(rèn)顯示，屬性show控制顯示與否lineStyle: { // 屬性lineStyle控制線條樣式color: '#48b',width: 2,type: 'solid'}},axisTick: { // 坐標(biāo)軸小標(biāo)記show: false, // 屬性show控制顯示與否，默認(rèn)不顯示inside : false, // 控制小標(biāo)記是否在grid里 length :5, // 屬性length控制線長lineStyle: { // 屬性lineStyle控制線條樣式color: '#333',width: 1}},axisLabel: { // 坐標(biāo)軸文本標(biāo)簽，詳見axis.axisLabelshow: true,rotate: 0,margin: 8,// formatter: null,textStyle: { // 其余屬性默認(rèn)使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},splitLine: { // 分隔線show: true, // 默認(rèn)顯示，屬性show控制顯示與否lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式color: ['#ccc'],width: 1,type: 'solid'}},splitArea: { // 分隔區(qū)域show: false, // 默認(rèn)不顯示，屬性show控制顯示與否areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區(qū)域樣式color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}}},polar : {center : ['50%', '50%'], // 默認(rèn)全局居中radius : '75%',startAngle : 90,splitNumber : 5,name : {show: true,textStyle: { // 其余屬性默認(rèn)使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},axisLine: { // 坐標(biāo)軸線show: true, // 默認(rèn)顯示，屬性show控制顯示與否lineStyle: { // 屬性lineStyle控制線條樣式color: '#ccc',width: 1,type: 'solid'}},axisLabel: { // 坐標(biāo)軸文本標(biāo)簽，詳見axis.axisLabelshow: false,textStyle: { // 其余屬性默認(rèn)使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},splitArea : {show : true,areaStyle : {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}},splitLine : {show : true,lineStyle : {width : 1,color : '#ccc'}}},// 柱形圖默認(rèn)參數(shù)bar: {barMinHeight: 0, // 最小高度改為0// barWidth: null, // 默認(rèn)自適應(yīng)barGap: '30%', // 柱間距離，默認(rèn)為柱形寬度的30%，可設(shè)固定值barCategoryGap : '20%', // 類目間柱形距離，默認(rèn)為類目間距的20%，可設(shè)固定值itemStyle: {normal: {// color: '各異',barBorderColor: '#fff', // 柱條邊線barBorderRadius: 0, // 柱條邊線圓角，單位px，默認(rèn)為0barBorderWidth: 1, // 柱條邊線線寬，單位px，默認(rèn)為1label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}},emphasis: {// color: '各異',barBorderColor: 'rgba(0,0,0,0)', // 柱條邊線barBorderRadius: 0, // 柱條邊線圓角，單位px，默認(rèn)為0barBorderWidth: 1, // 柱條邊線線寬，單位px，默認(rèn)為1label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}}}},// 折線圖默認(rèn)參數(shù)line: {itemStyle: {normal: {// color: 各異,label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},lineStyle: {width: 2,type: 'solid',shadowColor : 'rgba(0,0,0,0)', //默認(rèn)透明shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3}},emphasis: {// color: 各異,label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}}},//smooth : false,//symbol: null, // 拐點(diǎn)圖形類型symbolSize: 2, // 拐點(diǎn)圖形大小//symbolRotate : null, // 拐點(diǎn)圖形旋轉(zhuǎn)控制showAllSymbol: false // 標(biāo)志圖形默認(rèn)只有主軸顯示（隨主軸標(biāo)簽間隔隱藏策略）},// K線圖默認(rèn)參數(shù)k: {// barWidth : null // 默認(rèn)自適應(yīng)// barMaxWidth : null // 默認(rèn)自適應(yīng) itemStyle: {normal: {color: '#fff', // 陽線填充顏色color0: '#00aa11', // 陰線填充顏色lineStyle: {width: 1,color: '#ff3200', // 陽線邊框顏色color0: '#00aa11' // 陰線邊框顏色}},emphasis: {// color: 各異,// color0: 各異}}},// 散點(diǎn)圖默認(rèn)參數(shù)scatter: {//symbol: null, // 圖形類型symbolSize: 4, // 圖形大小，半寬（半徑）參數(shù)，當(dāng)圖形為方向或菱形則總寬度為symbolSize * 2//symbolRotate : null, // 圖形旋轉(zhuǎn)控制large: false, // 大規(guī)模散點(diǎn)圖largeThreshold: 2000,// 大規(guī)模閥值，large為true且數(shù)據(jù)量>largeThreshold才啟用大規(guī)模模式itemStyle: {normal: {// color: 各異,label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}},emphasis: {// color: '各異'label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}}}},// 雷達(dá)圖默認(rèn)參數(shù)radar : {itemStyle: {normal: {// color: 各異,label: {show: false},lineStyle: {width: 2,type: 'solid'}},emphasis: {// color: 各異,label: {show: false}}},//symbol: null, // 拐點(diǎn)圖形類型symbolSize: 2 // 可計(jì)算特性參數(shù)，空數(shù)據(jù)拖拽提示圖形大小//symbolRotate : null, // 圖形旋轉(zhuǎn)控制},// 餅圖默認(rèn)參數(shù)pie: {center : ['50%', '50%'], // 默認(rèn)全局居中radius : [0, '75%'],clockWise : false, // 默認(rèn)逆時(shí)針startAngle: 90,minAngle: 0, // 最小角度改為0selectedOffset: 10, // 選中是扇區(qū)偏移量itemStyle: {normal: {// color: 各異,borderColor: '#fff',borderWidth: 1,label: {show: true,position: 'outer'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},labelLine: {show: true,length: 20,lineStyle: {// color: 各異,width: 1,type: 'solid'}}},emphasis: {// color: 各異,borderColor: 'rgba(0,0,0,0)',borderWidth: 1,label: {show: false// position: 'outer'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},labelLine: {show: false,length: 20,lineStyle: {// color: 各異,width: 1,type: 'solid'}}}}},map: {mapType: 'china', // 各省的mapType暫時(shí)都用中文mapLocation: {x : 'center',y : 'center'// width // 自適應(yīng)// height // 自適應(yīng)},showLegendSymbol : true, // 顯示圖例顏色標(biāo)識（系列標(biāo)識的小圓點(diǎn)），存在legend時(shí)生效itemStyle: {normal: {// color: 各異,borderColor: '#fff',borderWidth: 1,areaStyle: {color: '#ccc'//rgba(135,206,250,0.8)},label: {show: false,textStyle: {color: 'rgba(139,69,19,1)'}}},emphasis: { // 也是選中樣式// color: 各異,borderColor: 'rgba(0,0,0,0)',borderWidth: 1,areaStyle: {color: 'rgba(255,215,0,0.8)'},label: {show: false,textStyle: {color: 'rgba(139,69,19,1)'}}}}},force : {// 數(shù)據(jù)map到圓的半徑的最小值和最大值minRadius : 10,maxRadius : 20,density : 1.0,attractiveness : 1.0,// 初始化的隨機(jī)大小位置initSize : 300,// 向心力因子，越大向心力越大centripetal : 1,// 冷卻因子coolDown : 0.99,// 分類里如果有樣式會覆蓋節(jié)點(diǎn)默認(rèn)樣式itemStyle: {normal: {// color: 各異,label: {show: false// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},nodeStyle : {brushType : 'both',color : '#f08c2e',strokeColor : '#5182ab'},linkStyle : {strokeColor : '#5182ab'}},emphasis: {// color: 各異,label: {show: false// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},nodeStyle : {},linkStyle : {}}}},chord : {radius : ['65%', '75%'],center : ['50%', '50%'],padding : 2,sort : 'none', // can be 'none', 'ascending', 'descending'sortSub : 'none', // can be 'none', 'ascending', 'descending'startAngle : 90,clockWise : false,showScale : false,showScaleText : false,itemStyle : {normal : {label : {show : true// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},lineStyle : {width : 0,color : '#000'},chordStyle : {lineStyle : {width : 1,color : '#666'}}},emphasis : {lineStyle : {width : 0,color : '#000'},chordStyle : {lineStyle : {width : 2,color : '#333'}}}}},island: {r: 15,calculateStep: 0.1 // 滾輪可計(jì)算步長 0.1 = 10%},markPoint : {symbol: 'pin', // 標(biāo)注類型symbolSize: 10, // 標(biāo)注大小，半寬（半徑）參數(shù)，當(dāng)圖形為方向或菱形則總寬度為symbolSize * 2//symbolRotate : null, // 標(biāo)注旋轉(zhuǎn)控制itemStyle: {normal: {// color: 各異，// borderColor: 各異, // 標(biāo)注邊線顏色，優(yōu)先于color borderWidth: 2, // 標(biāo)注邊線線寬，單位px，默認(rèn)為1label: {show: true,position: 'inside' // 可選為'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}},emphasis: {// color: 各異label: {show: true// position: 'inside' // 'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE}}}},markLine : {// 標(biāo)線起始和結(jié)束的symbol介紹類型，如果都一樣，可以直接傳stringsymbol: ['circle', 'arrow'], // 標(biāo)線起始和結(jié)束的symbol大小，半寬（半徑）參數(shù)，當(dāng)圖形為方向或菱形則總寬度為symbolSize * 2symbolSize: [2, 4],// 標(biāo)線起始和結(jié)束的symbol旋轉(zhuǎn)控制//symbolRotate : null,itemStyle: {normal: {// color: 各異, // 標(biāo)線主色，線色，symbol主色// borderColor: 隨color, // 標(biāo)線symbol邊框顏色，優(yōu)先于color borderWidth: 2, // 標(biāo)線symbol邊框線寬，單位px，默認(rèn)為2label: {show: false,// 可選為 'start'|'end'|'left'|'right'|'top'|'bottom'position: 'inside', textStyle: { // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},lineStyle: {// color: 隨borderColor, // 主色，線色，優(yōu)先級高于borderColor和color// width: 隨borderWidth, // 優(yōu)先于borderWidthtype: 'solid',shadowColor : 'rgba(0,0,0,0)', //默認(rèn)透明shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3}},emphasis: {// color: 各異label: {show: false// position: 'inside' // 'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE},lineStyle : {}}}},textStyle: {decoration: 'none',fontFamily: 'Arial, Verdana, sans-serif',fontFamily2: '微軟雅黑', // IE8- 字體模糊并且不支持不同字體混排，額外指定一份fontSize: 12,fontStyle: 'normal',fontWeight: 'normal'},// 默認(rèn)標(biāo)志圖形類型列表symbolList : ['circle', 'rectangle', 'triangle', 'diamond','emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'],loadingText : 'Loading...',// 可計(jì)算特性配置，孤島，提示顏色calculable: false, // 默認(rèn)關(guān)閉可計(jì)算特性calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示邊框顏色calculableHolderColor: '#ccc', // 可計(jì)算占位提示顏色nameConnector: ' & ',valueConnector: ' : ',animation: true,animationThreshold: 2500, // 動畫元素閥值，產(chǎn)生的圖形原素超過2500不出動畫addDataAnimation: true, // 動態(tài)數(shù)據(jù)接口是否開啟動畫效果animationDuration: 2000,animationEasing: 'ExponentialOut' //BounceOut }

ECharts 餅圖

餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比，它的數(shù)據(jù)格式比柱狀圖更簡單，只有一維的數(shù)值，不需要給類目。因?yàn)椴辉谥苯亲鴺?biāo)系上，所以也不需要 xAxis，yAxis。

示例：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>孫叫獸演示 ECharts 柱狀圖實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({series : [{name: '訪問來源',type: 'pie', // 設(shè)置圖表類型為餅圖radius: '60%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。data:[ // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項(xiàng)名稱，value 為數(shù)據(jù)項(xiàng)值{value:100, name:'視頻廣告'},{value:274, name:'聯(lián)盟廣告'},{value:310, name:'郵件營銷'},{value:335, name:'直接訪問'},{value:400, name:'搜索引擎'}]}]})</script> </body> </html>

效果圖：

陰影的配置

itemStyle 參數(shù)可以設(shè)置諸如陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊?#xff1a;

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>孫叫獸演示 ECharts 柱狀圖陰影實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {series : [{name: '訪問來源',type: 'pie',radius: '55%',data:[{value:235, name:'視頻廣告'},{value:274, name:'聯(lián)盟廣告'},{value:310, name:'郵件營銷'},{value:335, name:'直接訪問'},{value:400, name:'搜索引擎'}],roseType: 'angle',itemStyle: {normal: {shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

效果圖：

ECharts 樣式設(shè)置

ECharts 可以通過樣式設(shè)置來改變圖形元素或者文字的顏色、明暗、大小等。

顏色主題

ECharts4 開始，除了默認(rèn)主題外，內(nèi)置了兩套主題，分別為?light?和?dark。

var chart = echarts.init(dom, 'light');或者var chart = echarts.init(dom, 'dark');

其它主題下載：https://echarts.apache.org/zh/theme-builder.html

目前主題下載提供了 JS 版本和 JSON 版本。

如果你使用 JS 版本，可以將 JS 主題代碼保存一個(gè)?主題名.js?文件，然后在 HTML 中引用該文件，最后在代碼中使用該主題。

<script src="https://sunmenglei.blog.csdn.net/static/js/wonderland.js"></script> ...// HTML 引入 wonderland.js 文件后，在初始化的時(shí)候調(diào)用 var myChart = echarts.init(dom, 'wonderland'); // ...

調(diào)色盤

調(diào)色盤可以在 option 中設(shè)置。

調(diào)色盤給定了一組顏色，圖形、系列會自動從其中選擇顏色。

可以設(shè)置全局的調(diào)色盤，也可以設(shè)置系列自己專屬的調(diào)色盤。

option = {// 全局調(diào)色盤。color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],series: [{type: 'bar',// 此系列自己的調(diào)色盤。color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],...}, {type: 'pie',// 此系列自己的調(diào)色盤。color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],...}] }

直接的樣式設(shè)置 itemStyle, lineStyle, areaStyle, label, ...

這些的地方可以直接設(shè)置圖形元素的顏色、線寬、點(diǎn)的大小、標(biāo)簽的文字、標(biāo)簽的樣式等等。

高亮的樣式：emphasis

在鼠標(biāo)懸浮到圖形元素上時(shí)，一般會出現(xiàn)高亮的樣式。默認(rèn)情況下，高亮的樣式是根據(jù)普通樣式自動生成的。

如果要自定義高亮樣式可以通過 emphasis 屬性來定制：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個(gè) ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({series : [{name: '訪問來源',type: 'pie', // 設(shè)置圖表類型為餅圖radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。// 高亮樣式。emphasis: {itemStyle: {// 高亮?xí)r點(diǎn)的顏色color: 'red'},label: {show: true,// 高亮?xí)r標(biāo)簽的文字formatter: '高亮?xí)r顯示的標(biāo)簽內(nèi)容'}},data:[ // 數(shù)據(jù)數(shù)組，name 為數(shù)據(jù)項(xiàng)名稱，value 為數(shù)據(jù)項(xiàng)值{value:235, name:'視頻廣告'},{value:274, name:'聯(lián)盟廣告'},{value:310, name:'郵件營銷'},{value:335, name:'直接訪問'},{value:400, name:'搜索引擎'}]}]})</script> </body> </html>

ECharts 異步加載數(shù)據(jù)

ECharts 通常數(shù)據(jù)設(shè)置在 setOption 中，如果我們需要異步加載數(shù)據(jù)，可以配合 jQuery等工具，在異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項(xiàng)就行。

echarts_test_data.json 數(shù)據(jù)：

{"data_pie" : [{"value":235, "name":"視頻廣告"},{"value":274, "name":"聯(lián)盟廣告"},{"value":310, "name":"郵件營銷"},{"value":335, "name":"直接訪問"},{"value":400, "name":"搜索引擎"}] } <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個(gè) ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));$.get('https://sunmenglei.blog.csdn.net/static/js/echarts_test_data.json', function (data) {myChart.setOption({series : [{name: '訪問來源',type: 'pie', // 設(shè)置圖表類型為餅圖radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。data:data.data_pie}]})}, 'json')</script> </body>

如果異步加載需要一段時(shí)間，我們可以添加 loading 效果，ECharts 默認(rèn)有提供了一個(gè)簡單的加載動畫。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動畫：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個(gè) ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));myChart.showLoading(); // 開啟 loading 效果$.get('https://sunmenglei.blog.csdn.net/static/js/echarts_test_data.json', function (data) {alert("可以看到 loading 字樣。"); // 測試代碼，用于查看 loading 效果myChart.hideLoading(); // 隱藏 loading 效果myChart.setOption({series : [{name: '訪問來源',type: 'pie', // 設(shè)置圖表類型為餅圖radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度。data:data.data_pie}]})}, 'json');</script> </body>

數(shù)據(jù)的動態(tài)更新

ECharts 由數(shù)據(jù)驅(qū)動，數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變，因此動態(tài)數(shù)據(jù)的實(shí)現(xiàn)也變得異常簡單。

所有數(shù)據(jù)的更新都通過 setOption 實(shí)現(xiàn)，你只需要定時(shí)獲取數(shù)據(jù)，setOption 填入數(shù)據(jù)，而不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個(gè) ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var base = +new Date(2014, 9, 3);var oneDay = 24 * 3600 * 1000;var date = [];var data = [Math.random() * 150];var now = new Date(base);function addData(shift) {now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');date.push(now);data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);if (shift) {date.shift();data.shift();}now = new Date(+new Date(now) + oneDay);}for (var i = 1; i < 100; i++) {addData();}option = {xAxis: {type: 'category',boundaryGap: false,data: date},yAxis: {boundaryGap: [0, '50%'],type: 'value'},series: [{name:'成交',type:'line',smooth:true,symbol: 'none',stack: 'a',areaStyle: {normal: {}},data: data}]};setInterval(function () {addData(true);myChart.setOption({xAxis: {data: date},series: [{name:'成交',data: data}]});}, 500);// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));myChart.setOption(option)</script> </body>

ECharts 數(shù)據(jù)集（dataset）

ECharts 使用 dataset 管理數(shù)據(jù)。

dataset 組件用于單獨(dú)的數(shù)據(jù)集聲明，從而數(shù)據(jù)可以單獨(dú)管理，被多個(gè)組件復(fù)用，并且可以基于數(shù)據(jù)指定數(shù)據(jù)到視覺的映射。

下面是一個(gè)最簡單的 dataset 的例子：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>第一個(gè) ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {legend: {},tooltip: {},dataset: {// 提供一份數(shù)據(jù)。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]]},// 聲明一個(gè) X 軸，類目軸（category）。默認(rèn)情況下，類目軸對應(yīng)到 dataset 第一列。xAxis: {type: 'category'},// 聲明一個(gè) Y 軸，數(shù)值軸。yAxis: {},// 聲明多個(gè) bar 系列，默認(rèn)情況下，每個(gè)系列會自動對應(yīng)到 dataset 的每一列。series: [{type: 'bar'},{type: 'bar'},{type: 'bar'}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

效果圖：

示例：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>對象數(shù)組格式的數(shù)據(jù)集</title><script src="./js/echarts.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {legend: {},tooltip: {},dataset: {// 這里指定了維度名的順序，從而可以利用默認(rèn)的維度到坐標(biāo)軸的映射。// 如果不指定 dimensions，也可以通過指定 series.encode 完成映射，參見后文。dimensions: ['product', '2019', '2020', '2021'],source: [{product: 'Matcha Latte', '2019': 43.3, '2020': 85.8, '2021': 93.7},{product: 'Milk Tea', '2019': 83.1, '2020': 73.4, '2021': 55.1},{product: 'Cheese Cocoa', '2019': 86.4, '2020': 65.2, '2021': 82.5},{product: 'Walnut Brownie', '2019': 72.4, '2020': 53.9, '2021': 39.1}]},xAxis: {type: 'category'},yAxis: {},series: [{type: 'bar'},{type: 'bar'},{type: 'bar'}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

數(shù)據(jù)到圖形的映射

我們可以在配置項(xiàng)中將數(shù)據(jù)映射到圖形中。

我們可以使用 series.seriesLayoutBy 屬性來配置 dataset 是列（column）還是行（row）映射為圖形系列（series），默認(rèn)是按照列（column）來映射。

以下實(shí)例我們將通過 seriesLayoutBy 屬性來配置數(shù)據(jù)是使用列顯示還是按行顯示。

效果圖：

示例：?

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>數(shù)據(jù)到圖形的映射 ECharts 實(shí)例</title><script src="./js/echarts.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {legend: {},//說明或者解釋tooltip: {},//提示信息dataset: {//數(shù)據(jù)集source: [['product', '2018', '2019', '2020', '2021'],['Matcha Latte', 41.1, 30.4, 65.1, 53.3],['Milk Tea', 86.5, 92.1, 85.7, 83.1],['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]]},xAxis: [//X軸{type: 'category', gridIndex: 0},{type: 'category', gridIndex: 1}],yAxis: [//y軸{gridIndex: 0},{gridIndex: 1}],grid: [//坐標(biāo){bottom: '55%'},{top: '55%'}],series: [// 這幾個(gè)系列會在第一個(gè)直角坐標(biāo)系中，每個(gè)系列對應(yīng)到 dataset 的每一行。{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},// 這幾個(gè)系列會在第二個(gè)直角坐標(biāo)系中，每個(gè)系列對應(yīng)到 dataset 的每一列。{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}]}// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

常用圖表所描述的數(shù)據(jù)大部分是"二維表"結(jié)構(gòu)，我們可以使用 series.encode 屬性將對應(yīng)的數(shù)據(jù)映射到坐標(biāo)軸（如 X、Y 軸）：

?示例：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>series.encode 屬性將對應(yīng)的數(shù)據(jù)映射到坐標(biāo)軸（如 X、Y 軸）： ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {dataset: {source: [['score', 'amount', 'product'],[89.3, 58212, 'Matcha Latte'],[57.1, 78254, 'Milk Tea'],[74.4, 41032, 'Cheese Cocoa'],[50.1, 12755, 'Cheese Brownie'],[89.7, 20145, 'Matcha Cocoa'],[68.1, 79146, 'Tea'],[19.6, 91852, 'Orange Juice'],[10.6, 101852, 'Lemon Juice'],[32.7, 20112, 'Walnut Brownie']]},grid: {containLabel: true},xAxis: {},yAxis: {type: 'category'},series: [{type: 'bar',encode: {// 將 "amount" 列映射到 X 軸。x: 'amount',// 將 "product" 列映射到 Y 軸。y: 'product'}}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

效果圖：

encode 聲明的基本結(jié)構(gòu)如下，其中冒號左邊是坐標(biāo)系、標(biāo)簽等特定名稱，如 'x', 'y', 'tooltip' 等，冒號右邊是數(shù)據(jù)中的維度名（string 格式）或者維度的序號（number 格式，從 0 開始計(jì)數(shù)），可以指定一個(gè)或多個(gè)維度（使用數(shù)組）。通常情況下，下面各種信息不需要所有的都寫，按需寫即可。

下面是 encode 支持的屬性：

// 在任何坐標(biāo)系和系列中，都支持： encode: {// 使用 “名為 product 的維度” 和 “名為 score 的維度” 的值在 tooltip 中顯示tooltip: ['product', 'score']// 使用 “維度 1” 和 “維度 3” 的維度名連起來作為系列名。（有時(shí)候名字比較長，這可以避免在 series.name 重復(fù)輸入這些名字）seriesName: [1, 3],// 表示使用 “維度2” 中的值作為 id。這在使用 setOption 動態(tài)更新數(shù)據(jù)時(shí)有用處，可以使新老數(shù)據(jù)用 id 對應(yīng)起來，從而能夠產(chǎn)生合適的數(shù)據(jù)更新動畫。itemId: 2,// 指定數(shù)據(jù)項(xiàng)的名稱使用 “維度3” 在餅圖等圖表中有用，可以使這個(gè)名字顯示在圖例（legend）中。itemName: 3 }// 直角坐標(biāo)系（grid/cartesian）特有的屬性： encode: {// 把 “維度1”、“維度5”、“名為 score 的維度” 映射到 X 軸：x: [1, 5, 'score'],// 把“維度0”映射到 Y 軸。y: 0 }// 單軸（singleAxis）特有的屬性： encode: {single: 3 }// 極坐標(biāo)系（polar）特有的屬性： encode: {radius: 3,angle: 2 }// 地理坐標(biāo)系（geo）特有的屬性： encode: {lng: 3,lat: 2 }// 對于一些沒有坐標(biāo)系的圖表，例如餅圖、漏斗圖等，可以是： encode: {value: 3 } <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)$.get('https://www.sunjiaoshou.top/static/js/life-expectancy-table.json', function (data) {var sizeValue = '57%';var symbolSize = 2.5;option = {legend: {},tooltip: {},toolbox: {left: 'center',feature: {dataZoom: {}}},grid: [{right: sizeValue, bottom: sizeValue},{left: sizeValue, bottom: sizeValue},{right: sizeValue, top: sizeValue},{left: sizeValue, top: sizeValue}],xAxis: [{type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},{type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},{type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},{type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}],yAxis: [{type: 'value', gridIndex: 0, name: 'Life Expectancy'},{type: 'value', gridIndex: 1, name: 'Income'},{type: 'value', gridIndex: 2, name: 'Population'},{type: 'value', gridIndex: 3, name: 'Population'}],dataset: {dimensions: ['Income','Life Expectancy','Population','Country',{name: 'Year', type: 'ordinal'}],source: data},series: [{type: 'scatter',symbolSize: symbolSize,xAxisIndex: 0,yAxisIndex: 0,encode: {x: 'Income',y: 'Life Expectancy',tooltip: [0, 1, 2, 3, 4]}},{type: 'scatter',symbolSize: symbolSize,xAxisIndex: 1,yAxisIndex: 1,encode: {x: 'Country',y: 'Income',tooltip: [0, 1, 2, 3, 4]}},{type: 'scatter',symbolSize: symbolSize,xAxisIndex: 2,yAxisIndex: 2,encode: {x: 'Income',y: 'Population',tooltip: [0, 1, 2, 3, 4]}},{type: 'scatter',symbolSize: symbolSize,xAxisIndex: 3,yAxisIndex: 3,encode: {x: 'Life Expectancy',y: 'Population',tooltip: [0, 1, 2, 3, 4]}}]};myChart.setOption(option);});</script> </body> </html>

視覺通道（顏色、尺寸等）的映射

我們可以使用 visualMap 組件進(jìn)行視覺通道的映射。

視覺元素可以是：

symbol: 圖元的圖形類別。
symbolSize: 圖元的大小。
color: 圖元的顏色。
colorAlpha: 圖元的顏色的透明度。
opacity: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。
colorLightness: 顏色的明暗度。
colorSaturation: 顏色的飽和度。
colorHue: 顏色的色調(diào)。

visualMap 組件可以定義多個(gè)，從而可以同時(shí)對數(shù)據(jù)中的多個(gè)維度進(jìn)行視覺映射。

效果圖：

交互聯(lián)動

以下實(shí)例多個(gè)圖表共享一個(gè) dataset，并帶有聯(lián)動交互

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>聯(lián)動交互 ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));setTimeout(function () {option = {legend: {},tooltip: {trigger: 'axis',showContent: false},dataset: {source: [['product', '2017', '2018', '2019', '2020', '2021', '2022'],['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]]},xAxis: {type: 'category'},yAxis: {gridIndex: 0},grid: {top: '55%'},series: [{type: 'line', smooth: true, seriesLayoutBy: 'row'},{type: 'line', smooth: true, seriesLayoutBy: 'row'},{type: 'line', smooth: true, seriesLayoutBy: 'row'},{type: 'line', smooth: true, seriesLayoutBy: 'row'},{type: 'pie',id: 'pie',radius: '30%',center: ['50%', '25%'],label: {formatter: '{b}: {@2012} (ze8trgl8bvbq%)'},encode: {itemName: 'product',value: '2012',tooltip: '2012'}}]};myChart.on('updateAxisPointer', function (event) {var xAxisInfo = event.axesInfo[0];if (xAxisInfo) {var dimension = xAxisInfo.value + 1;myChart.setOption({series: {id: 'pie',label: {formatter: '{b}: {@[' + dimension + ']} (ze8trgl8bvbq%)'},encode: {value: dimension,tooltip: dimension}}});}});myChart.setOption(option);});</script> </body> </html>

效果圖：

ECharts 交互組件

ECharts 提供了很多交互組件：例組件 legend、標(biāo)題組件 title、視覺映射組件 visualMap、數(shù)據(jù)區(qū)域縮放組件 dataZoom、時(shí)間線組件 timeline。

接下來的內(nèi)容我們將介紹如何使用數(shù)據(jù)區(qū)域縮放組件 dataZoom。

dataZoom 組件可以實(shí)現(xiàn)通過鼠標(biāo)滾輪滾動，放大縮小圖表的功能。

默認(rèn)情況下 dataZoom 控制 x 軸，即對 x 軸進(jìn)行數(shù)據(jù)窗口縮放和數(shù)據(jù)窗口平移操作。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>孫叫獸dataZoom組件ECharts 實(shí)例</title><script src="js/echarts.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {xAxis: {type: 'value'},yAxis: {type: 'value'},dataZoom: [{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件start: 10, // 左邊在 10% 的位置。end: 60 // 右邊在 60% 的位置。}],series: [{type: 'scatter', // 這是個(gè)『散點(diǎn)圖』itemStyle: {opacity: 0.8},symbolSize: function (val) {return val[2] * 40;},data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]}]}// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

?效果圖：

上面的實(shí)例只能拖動 dataZoom 組件來縮小或放大圖表。如果想在坐標(biāo)系內(nèi)進(jìn)行拖動，以及用鼠標(biāo)滾輪（或移動觸屏上的兩指滑動）進(jìn)行縮放，那么需要再再加上一個(gè) inside 型的 dataZoom 組件。

在以上實(shí)例基礎(chǔ)上我們再增加?type: 'inside'?的配置信息：

dataZoom: [{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件start: 10, // 左邊在 10% 的位置。end: 60 // 右邊在 60% 的位置。},{ // 這個(gè)dataZoom組件，也控制x軸。type: 'inside', // 這個(gè) dataZoom 組件是 inside 型 dataZoom 組件start: 10, // 左邊在 10% 的位置。end: 60 // 右邊在 60% 的位置。}],

我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個(gè)或哪些數(shù)軸。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts 實(shí)例</title><script src="./js/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var data1 = [];var data2 = [];var data3 = [];var random = function (max) {return (Math.random() * max).toFixed(3);};for (var i = 0; i < 500; i++) {data1.push([random(15), random(10), random(1)]);data2.push([random(10), random(10), random(1)]);data3.push([random(15), random(10), random(1)]);}option = {animation: false,legend: {data: ['scatter', 'scatter2', 'scatter3']},tooltip: {},xAxis: {type: 'value',min: 'dataMin',max: 'dataMax',splitLine: {show: true}},yAxis: {type: 'value',min: 'dataMin',max: 'dataMax',splitLine: {show: true}},dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],start: 1,end: 35},{type: 'slider',show: true,yAxisIndex: [0],left: '93%',start: 29,end: 36},{type: 'inside',xAxisIndex: [0],start: 1,end: 35},{type: 'inside',yAxisIndex: [0],start: 29,end: 36}],series: [{name: 'scatter',type: 'scatter',itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data1},{name: 'scatter2',type: 'scatter',itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data2},{name: 'scatter3',type: 'scatter',itemStyle: {normal: {opacity: 0.8,}},symbolSize: function (val) {return val[2] * 40;},data: data3}]}// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

效果圖：

ECharts 響應(yīng)式

ECharts 圖表顯示在用戶指定高寬的 DOM 節(jié)點(diǎn)（容器）中。

有時(shí)候我們希望在 PC 和移動設(shè)備上都能夠很好的展示圖表的內(nèi)容，實(shí)現(xiàn)響應(yīng)式的設(shè)計(jì)，為了解決這個(gè)問題，ECharts 完善了組件的定位設(shè)置，并實(shí)現(xiàn)了自適應(yīng)能力。

ECharts 組件的定位和布局

大部分『組件』和『系列』會遵循兩種定位方式。

left/right/top/bottom/width/height 定位方式

這六個(gè)量中，每個(gè)量都可以是『絕對值』或者『百分比』或者『位置描述』。

絕對值

單位是瀏覽器像素（px），用?number?形式書寫（不寫單位）。例如?{left: 23, height: 400}。
百分比

表示占 DOM 容器高寬的百分之多少，用?string?形式書寫。例如?{right: '30%', bottom: '40%'}。
位置描述
- 可以設(shè)置?left: 'center'，表示水平居中。
- 可以設(shè)置?top: 'middle'，表示垂直居中。

這六個(gè)量的概念，和 CSS 中六個(gè)量的概念類似：

left：距離 DOM 容器左邊界的距離。
right：距離 DOM 容器右邊界的距離。
top：距離 DOM 容器上邊界的距離。
bottom：距離 DOM 容器下邊界的距離。
width：寬度。
height：高度。

在橫向，left、right、width 三個(gè)量中，只需兩個(gè)量有值即可，因?yàn)槿蝺蓚€(gè)量可以決定組件的位置和大小，例如 left 和 right 或者 right 和 width 都可以決定組件的位置和大小。縱向，top、bottom、height 三個(gè)量，和橫向類同不贅述。

center / radius 定位方式

center

是一個(gè)數(shù)組，表示?[x, y]，其中，x、y可以是『絕對值』或者『百分比』，含義和前述相同。
radius

是一個(gè)數(shù)組，表示?[內(nèi)半徑, 外半徑]，其中，內(nèi)外半徑可以是『絕對值』或者『百分比』，含義和前述相同。

在自適應(yīng)容器大小時(shí)，百分比設(shè)置是很有用的。

橫向（horizontal）和縱向（vertical）

ECharts的『外觀狹長』型的組件（如 legend、visualMap、dataZoom、timeline等），大多提供了『橫向布局』『縱向布局』的選擇。例如，在細(xì)長的移動端屏幕上，可能適合使用『縱向布局』；在PC寬屏上，可能適合使用『橫向布局』。

橫縱向布局的設(shè)置，一般在『組件』或者『系列』的 orient 或者 layout 配置項(xiàng)上，設(shè)置為 'horizontal' 或者 'vertical'。

要在 option 中設(shè)置 Media Query 須遵循如下格式：

option = {baseOption: { // 這里是基本的『原子option』。title: {...},legend: {...},series: [{...}, {...}, ...],...},media: [ // 這里定義了 media query 的逐條規(guī)則。{query: {...}, // 這里寫規(guī)則。option: { // 這里寫此規(guī)則滿足下的option。legend: {...},...}},{query: {...}, // 第二個(gè)規(guī)則。option: { // 第二個(gè)規(guī)則對應(yīng)的option。legend: {...},...}},{ // 這條里沒有寫規(guī)則，表示『默認(rèn)』，option: { // 即所有規(guī)則都不滿足時(shí)，采納這個(gè)option。legend: {...},...}}] };

上面的例子中，baseOption、以及 media 每個(gè) option 都是『原子 option』，即普通的含有各組件、系列定義的 option。而由『原子option』組合成的整個(gè) option，我們稱為『復(fù)合 option』。baseOption 是必然被使用的，此外，滿足了某個(gè) query 條件時(shí)，對應(yīng)的 option 會被使用 chart.mergeOption() 來 merge 進(jìn)去。

query

每個(gè) query 類似于這樣：

{minWidth: 200,maxHeight: 300,minAspectRatio: 1.3 }

現(xiàn)在支持三個(gè)屬性：width、height、aspectRatio（長寬比）。每個(gè)屬性都可以加上 min 或 max 前綴。比如，minWidth: 200 表示『大于等于200px寬度』。兩個(gè)屬性一起寫表示『并且』，比如：{minWidth: 200, maxHeight: 300} 表示『大于等于200px寬度，并且小于等于300px高度』。

option

media中的 option 既然是『原子 option』，理論上可以寫任何 option 的配置項(xiàng)。但是一般我們只寫跟布局定位相關(guān)的，例如截取上面例子中的一部分 query option：

media: [...,{query: {maxAspectRatio: 1 // 當(dāng)長寬比小于1時(shí)。},option: {legend: { // legend 放在底部中間。right: 'center',bottom: 0,orient: 'horizontal' // legend 橫向布局。},series: [ // 兩個(gè)餅圖左右布局。{radius: [20, '50%'],center: ['50%', '30%']},{radius: [30, '50%'],center: ['50%', '70%']}]}},{query: {maxWidth: 500 // 當(dāng)容器寬度小于 500 時(shí)。},option: {legend: {right: 10, // legend 放置在右側(cè)中間。top: '15%',orient: 'vertical' // 縱向布局。},series: [ // 兩個(gè)餅圖上下布局。{radius: [20, '50%'],center: ['50%', '30%']},{radius: [30, '50%'],center: ['50%', '75%']}]}},... ]

多個(gè) query 被滿足時(shí)的優(yōu)先級

注意，可以有多個(gè) query 同時(shí)被滿足，會都被 mergeOption，定義在后的后被 merge（即優(yōu)先級更高）。

默認(rèn) query

如果 media 中有某項(xiàng)不寫 query，則表示『默認(rèn)值』，即所有規(guī)則都不滿足時(shí)，采納這個(gè)option。

容器大小實(shí)時(shí)變化時(shí)的注意事項(xiàng)

在不少情況下，并不需要容器DOM節(jié)點(diǎn)任意隨著拖拽變化大小，而是只是根據(jù)不同終端設(shè)置幾個(gè)典型尺寸。

但是如果容器DOM節(jié)點(diǎn)需要能任意隨著拖拽變化大小，那么目前使用時(shí)需要注意這件事：某個(gè)配置項(xiàng)，如果在某一個(gè) query option 中出現(xiàn)，那么在其他 query option 中也必須出現(xiàn)，否則不能夠回歸到原來的狀態(tài)。（left/right/top/bottom/width/height 不受這個(gè)限制。）

『復(fù)合 option』中的 media 不支持 merge

也就是說，當(dāng)?shù)诙?#xff08;或三、四、五 ...）次 chart.setOption(rawOption) 時(shí)，如果 rawOption 是復(fù)合option（即包含 media 列表），那么新的 rawOption.media 列表不會和老的 media 列表進(jìn)行 merge，而是簡單替代。當(dāng)然，rawOption.baseOption 仍然會正常和老的 option 進(jìn)行merge。其實(shí)，很少有場景需要使用『復(fù)合 option』來多次 setOption，而我們推薦的做法是，使用 mediaQuery 時(shí)，第一次setOption使用『復(fù)合 option』，后面 setOption 時(shí)僅使用『原子 option』，也就是僅僅用 setOption 來改變 baseOption。

以下中我們使用了 jQuery 來加載外部數(shù)據(jù)，使用時(shí)我們需要引入 jQuery 庫。該實(shí)例是一個(gè)和時(shí)間軸結(jié)合的例子：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));$.when($.getScript('https://www.sunjiaoshou.com/static/js/timelineGDP.js'),$.getScript('https://www.sunjiaoshou.com/static/js/draggable.js')).done(function () {draggable.init($('div[_echarts_instance_]')[0],myChart,{width: 700,height: 630,lockY: true,throttle: 70});myChart.hideLoading();var categoryData = ['北京','天津','河北','山西','內(nèi)蒙古','遼寧','吉林','黑龍江','上海','江蘇','浙江','安徽','福建','江西','山東','河南','湖北','湖南','廣東','廣西','海南','重慶','四川','貴州','云南','西藏','陜西','甘肅','青海','寧夏','新疆'];option = {baseOption: {timeline: {axisType: 'category',autoPlay: true,playInterval: 1000,data: ['2012-01-01', '2013-01-01', '2014-01-01','2015-01-01', '2016-01-01', '2017-01-01','2018-01-01', '2019-01-01', '2020-01-01','2021-01-01'],label: {formatter : function(s) {return (new Date(s)).getFullYear();}}},title: {subtext: 'Media Query 示例'},tooltip: {trigger:'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'value',name: 'GDP（億元）',max: 30000,data: null},yAxis: {type: 'category',data: categoryData,axisLabel: {interval: 0},splitLine: {show: false}},legend: {data: ['第一產(chǎn)業(yè)', '第二產(chǎn)業(yè)', '第三產(chǎn)業(yè)', 'GDP', '金融', '房地產(chǎn)'],selected: {'GDP': false, '金融': false, '房地產(chǎn)': false}},calculable : true,series: [{name: 'GDP', type: 'bar'},{name: '金融', type: 'bar'},{name: '房地產(chǎn)', type: 'bar'},{name: '第一產(chǎn)業(yè)', type: 'bar'},{name: '第二產(chǎn)業(yè)', type: 'bar'},{name: '第三產(chǎn)業(yè)', type: 'bar'},{name: 'GDP占比', type: 'pie'}]},media: [{option: {legend: {orient: 'horizontal',left: 'right',itemGap: 10},grid: {left: '10%',top: 80,right: 90,bottom: 100},xAxis: {nameLocation: 'end',nameGap: 10,splitNumber: 5,splitLine: {show: true}},timeline: {orient: 'horizontal',inverse: false,left: '20%',right: '20%',bottom: 10,height: 40},series: [{name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}]}},{query: {maxWidth: 670, minWidth: 550},option: {legend: {orient: 'horizontal',left: 200,itemGap: 5},grid: {left: '10%',top: 80,right: 90,bottom: 100},xAxis: {nameLocation: 'end',nameGap: 10,splitNumber: 5,splitLine: {show: true}},timeline: {orient: 'horizontal',inverse: false,left: '20%',right: '20%',bottom: 10,height: 40},series: [{name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}]}},{query: {maxWidth: 550},option: {legend: {orient: 'vertical',left: 'right',itemGap: 5},grid: {left: 55,top: '32%',right: 100,bottom: 50},xAxis: {nameLocation: 'middle',nameGap: 25,splitNumber: 3},timeline: {orient: 'vertical',inverse: true,right: 10,top: 150,bottom: 10,width: 55},series: [{name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}]}}],options: [{title: {text: '2012全國宏觀經(jīng)濟(jì)指標(biāo)'},series: [{data: dataMap.dataGDP['2012']},{data: dataMap.dataFinancial['2012']},{data: dataMap.dataEstate['2012']},{data: dataMap.dataPI['2012']},{data: dataMap.dataSI['2012']},{data: dataMap.dataTI['2012']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2012sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2012sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2012sum']}]}]},{title : {text: '2013全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2013']},{data: dataMap.dataFinancial['2013']},{data: dataMap.dataEstate['2013']},{data: dataMap.dataPI['2013']},{data: dataMap.dataSI['2013']},{data: dataMap.dataTI['2013']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2013sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2013sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2013sum']}]}]},{title : {text: '2004全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2004']},{data: dataMap.dataFinancial['2004']},{data: dataMap.dataEstate['2004']},{data: dataMap.dataPI['2004']},{data: dataMap.dataSI['2004']},{data: dataMap.dataTI['2004']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2004sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2004sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2004sum']}]}]},{title : {text: '2005全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2005']},{data: dataMap.dataFinancial['2005']},{data: dataMap.dataEstate['2005']},{data: dataMap.dataPI['2005']},{data: dataMap.dataSI['2005']},{data: dataMap.dataTI['2005']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2005sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2005sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2005sum']}]}]},{title : {text: '2006全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2006']},{data: dataMap.dataFinancial['2006']},{data: dataMap.dataEstate['2006']},{data: dataMap.dataPI['2006']},{data: dataMap.dataSI['2006']},{data: dataMap.dataTI['2006']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2006sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2006sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2006sum']}]}]},{title : {text: '2007全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2007']},{data: dataMap.dataFinancial['2007']},{data: dataMap.dataEstate['2007']},{data: dataMap.dataPI['2007']},{data: dataMap.dataSI['2007']},{data: dataMap.dataTI['2007']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2007sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2007sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2007sum']}]}]},{title : {text: '2008全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2008']},{data: dataMap.dataFinancial['2008']},{data: dataMap.dataEstate['2008']},{data: dataMap.dataPI['2008']},{data: dataMap.dataSI['2008']},{data: dataMap.dataTI['2008']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2008sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2008sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2008sum']}]}]},{title : {text: '2009全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2009']},{data: dataMap.dataFinancial['2009']},{data: dataMap.dataEstate['2009']},{data: dataMap.dataPI['2009']},{data: dataMap.dataSI['2009']},{data: dataMap.dataTI['2009']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2009sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2009sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2009sum']}]}]},{title : {text: '2010全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2010']},{data: dataMap.dataFinancial['2010']},{data: dataMap.dataEstate['2010']},{data: dataMap.dataPI['2010']},{data: dataMap.dataSI['2010']},{data: dataMap.dataTI['2010']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2010sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2010sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2010sum']}]}]},{title : {text: '2011全國宏觀經(jīng)濟(jì)指標(biāo)'},series : [{data: dataMap.dataGDP['2011']},{data: dataMap.dataFinancial['2011']},{data: dataMap.dataEstate['2011']},{data: dataMap.dataPI['2011']},{data: dataMap.dataSI['2011']},{data: dataMap.dataTI['2011']},{data: [{name: '第一產(chǎn)業(yè)', value: dataMap.dataPI['2011sum']},{name: '第二產(chǎn)業(yè)', value: dataMap.dataSI['2011sum']},{name: '第三產(chǎn)業(yè)', value: dataMap.dataTI['2011sum']}]}]}]};myChart.setOption(option);});</script> </body> </html>

ECharts 數(shù)據(jù)的視覺映射

數(shù)據(jù)可視化簡單來講就是將數(shù)據(jù)用圖表的形式來展示，專業(yè)的表達(dá)方式就是數(shù)據(jù)到視覺元素的映射過程。

ECharts 的每種圖表本身就內(nèi)置了這種映射過程，我們之前學(xué)習(xí)到的柱形圖就是將數(shù)據(jù)映射到長度。

此外，ECharts 還提供了 visualMap 組件來提供通用的視覺映射。visualMap 組件中可以使用的視覺元素有：

圖形類別（symbol）
圖形大小（symbolSize）
顏色（color）
透明度（opacity）
顏色透明度（colorAlpha）
顏色明暗度（colorLightness）
顏色飽和度（colorSaturation）
色調(diào)（colorHue）

數(shù)據(jù)和維度

ECharts 中的數(shù)據(jù)，一般存放于?series.data?中。

不同的圖表類型，數(shù)據(jù)格式有所不一樣，但是他們的共同特點(diǎn)就都是數(shù)據(jù)項(xiàng)（dataItem）的集合。每個(gè)數(shù)據(jù)項(xiàng)含有數(shù)據(jù)值（value）和其他信息（可選）。每個(gè)數(shù)據(jù)值，可以是單一的數(shù)值（一維）或者一個(gè)數(shù)組（多維）。

series.data 最常見的形式是線性表，即一個(gè)普通數(shù)組：

series:?{
? ? data:?[
? ? ? ??{?? ? ??// 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）
? ? ? ? ? ? value:?2323,?// 這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）
? ? ? ? ? ? itemStyle:?{...}
? ? ? ??},
? ? ? ??1212,???// 也可以直接是 dataItem 的 value，這更常見。
? ? ? ??2323,???// 每個(gè) value 都是『一維』的。
? ? ? ??4343,
? ? ? ??3434
? ??]
}
series:?{
? ? data:?[
? ? ? ??{?? ? ? ? ? ? ? ? ? ? ? ?// 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）
? ? ? ? ? ? value:?[3434,?129,??'圣馬力諾'],?// 這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）
? ? ? ? ? ? itemStyle:?{...}
? ? ? ??},
? ? ? ??[1212,?5454,?'梵蒂岡'],???// 也可以直接是 dataItem 的 value，這更常見。
? ? ? ??[2323,?3223,?'瑙魯'],?? ??// 每個(gè) value 都是『三維』的，每列是一個(gè)維度。
? ? ? ??[4343,?23,???'圖瓦盧']?? ?// 假如是『氣泡圖』，常見第一維度映射到x軸，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 第二維度映射到y(tǒng)軸，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 第三維度映射到氣泡半徑（symbolSize）
? ??]
}

在圖表中，往往默認(rèn)把 value 的前一兩個(gè)維度進(jìn)行映射，比如取第一個(gè)維度映射到x軸，取第二個(gè)維度映射到y(tǒng)軸。如果想要把更多的維度展現(xiàn)出來，可以借助 visualMap 。

visualMap 組件

visualMap 組件定義了把數(shù)據(jù)的指定維度映射到對應(yīng)的視覺元素上。

visualMap 組件可以定義多個(gè)，從而可以同時(shí)對數(shù)據(jù)中的多個(gè)維度進(jìn)行視覺映射。

visualMap 組件可以定義為分段型（visualMapPiecewise）或連續(xù)型（visualMapContinuous），通過 type 來區(qū)分。例如：

option?=?{
? ? visualMap:?[
? ? ? ??{?// 第一個(gè) visualMap 組件
? ? ? ? ? ? type:?'continuous',?// 定義為連續(xù)型 visualMap
? ? ? ? ? ? ...
? ? ? ??},
? ? ? ??{?// 第二個(gè) visualMap 組件
? ? ? ? ? ? type:?'piecewise',?// 定義為分段型 visualMap
? ? ? ? ? ? ...
? ? ? ??}
? ??],
? ? ...
};

分段型視覺映射組件，有三種模式：

連續(xù)型數(shù)據(jù)平均分段: 依據(jù) visualMap-piecewise.splitNumber 來自動平均分割成若干塊。
連續(xù)型數(shù)據(jù)自定義分段: 依據(jù) visualMap-piecewise.pieces 來定義每塊范圍。
離散數(shù)據(jù)根據(jù)類別分段: 類別定義在 visualMap-piecewise.categories 中。

分段型視覺映射組件，展現(xiàn)形式如下圖：

?示例：

<!DOCTYPE html> <html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script><script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var geoCoordMap = {"海門":[121.15,31.89],"鄂爾多斯":[109.781327,39.608266],"招遠(yuǎn)":[120.38,37.35],"舟山":[122.207216,29.985295],"齊齊哈爾":[123.97,47.33],"鹽城":[120.13,33.38],"赤峰":[118.87,42.28],"青島":[120.33,36.07],"乳山":[121.52,36.89],"金昌":[102.188043,38.520089],"泉州":[118.58,24.93],"萊西":[120.53,36.86],"日照":[119.46,35.42],"膠南":[119.97,35.88],"南通":[121.05,32.08],"拉薩":[91.11,29.97],"云浮":[112.02,22.93],"梅州":[116.1,24.55],"文登":[122.05,37.2],"上海":[121.48,31.22],"攀枝花":[101.718637,26.582347],"威海":[122.1,37.5],"承德":[117.93,40.97],"廈門":[118.1,24.46],"汕尾":[115.375279,22.786211],"潮州":[116.63,23.68],"丹東":[124.37,40.13],"太倉":[121.1,31.45],"曲靖":[103.79,25.51],"煙臺":[121.39,37.52],"福州":[119.3,26.08],"瓦房店":[121.979603,39.627114],"即墨":[120.45,36.38],"撫順":[123.97,41.97],"玉溪":[102.52,24.35],"張家口":[114.87,40.82],"陽泉":[113.57,37.85],"萊州":[119.942327,37.177017],"湖州":[120.1,30.86],"汕頭":[116.69,23.39],"昆山":[120.95,31.39],"寧波":[121.56,29.86],"湛江":[110.359377,21.270708],"揭陽":[116.35,23.55],"榮成":[122.41,37.16],"連云港":[119.16,34.59],"葫蘆島":[120.836932,40.711052],"常熟":[120.74,31.64],"東莞":[113.75,23.04],"河源":[114.68,23.73],"淮安":[119.15,33.5],"泰州":[119.9,32.49],"南寧":[108.33,22.84],"營口":[122.18,40.65],"惠州":[114.4,23.09],"江陰":[120.26,31.91],"蓬萊":[120.75,37.8],"韶關(guān)":[113.62,24.84],"嘉峪關(guān)":[98.289152,39.77313],"廣州":[113.23,23.16],"延安":[109.47,36.6],"太原":[112.53,37.87],"清遠(yuǎn)":[113.01,23.7],"中山":[113.38,22.52],"昆明":[102.73,25.04],"壽光":[118.73,36.86],"盤錦":[122.070714,41.119997],"長治":[113.08,36.18],"深圳":[114.07,22.62],"珠海":[113.52,22.3],"宿遷":[118.3,33.96],"咸陽":[108.72,34.36],"銅川":[109.11,35.09],"平度":[119.97,36.77],"佛山":[113.11,23.05],"海口":[110.35,20.02],"江門":[113.06,22.61],"章丘":[117.53,36.72],"肇慶":[112.44,23.05],"大連":[121.62,38.92],"臨汾":[111.5,36.08],"吳江":[120.63,31.16],"石嘴山":[106.39,39.04],"沈陽":[123.38,41.8],"蘇州":[120.62,31.32],"茂名":[110.88,21.68],"嘉興":[120.76,30.77],"長春":[125.35,43.88],"膠州":[120.03336,36.264622],"銀川":[106.27,38.47],"張家港":[120.555821,31.875428],"三門峽":[111.19,34.76],"錦州":[121.15,41.13],"南昌":[115.89,28.68],"柳州":[109.4,24.33],"三亞":[109.511909,18.252847],"自貢":[104.778442,29.33903],"吉林":[126.57,43.87],"陽江":[111.95,21.85],"瀘州":[105.39,28.91],"西寧":[101.74,36.56],"宜賓":[104.56,29.77],"呼和浩特":[111.65,40.82],"成都":[104.06,30.67],"大同":[113.3,40.12],"鎮(zhèn)江":[119.44,32.2],"桂林":[110.28,25.29],"張家界":[110.479191,29.117096],"宜興":[119.82,31.36],"北海":[109.12,21.49],"西安":[108.95,34.27],"金壇":[119.56,31.74],"東營":[118.49,37.46],"牡丹江":[129.58,44.6],"遵義":[106.9,27.7],"紹興":[120.58,30.01],"揚(yáng)州":[119.42,32.39],"常州":[119.95,31.79],"濰坊":[119.1,36.62],"重慶":[106.54,29.59],"臺州":[121.420757,28.656386],"南京":[118.78,32.04],"濱州":[118.03,37.36],"貴陽":[106.71,26.57],"無錫":[120.29,31.59],"本溪":[123.73,41.3],"克拉瑪依":[84.77,45.59],"渭南":[109.5,34.52],"馬鞍山":[118.48,31.56],"寶雞":[107.15,34.38],"焦作":[113.21,35.24],"句容":[119.16,31.95],"北京":[116.46,39.92],"徐州":[117.2,34.26],"衡水":[115.72,37.72],"包頭":[110,40.58],"綿陽":[104.73,31.48],"烏魯木齊":[87.68,43.77],"棗莊":[117.57,34.86],"杭州":[120.19,30.26],"淄博":[118.05,36.78],"鞍山":[122.85,41.12],"溧陽":[119.48,31.43],"庫爾勒":[86.06,41.68],"安陽":[114.35,36.1],"開封":[114.35,34.79],"濟(jì)南":[117,36.65],"德陽":[104.37,31.13],"溫州":[120.65,28.01],"九江":[115.97,29.71],"邯鄲":[114.47,36.6],"臨安":[119.72,30.23],"蘭州":[103.73,36.03],"滄州":[116.83,38.33],"臨沂":[118.35,35.05],"南充":[106.110698,30.837793],"天津":[117.2,39.13],"富陽":[119.95,30.07],"泰安":[117.13,36.18],"諸暨":[120.23,29.71],"鄭州":[113.65,34.76],"哈爾濱":[126.63,45.75],"聊城":[115.97,36.45],"蕪湖":[118.38,31.33],"唐山":[118.02,39.63],"平頂山":[113.29,33.75],"邢臺":[114.48,37.05],"德州":[116.29,37.45],"濟(jì)寧":[116.59,35.38],"荊州":[112.239741,30.335165],"宜昌":[111.3,30.7],"義烏":[120.06,29.32],"麗水":[119.92,28.45],"洛陽":[112.44,34.7],"秦皇島":[119.57,39.95],"株洲":[113.16,27.83],"石家莊":[114.48,38.03],"萊蕪":[117.67,36.19],"常德":[111.69,29.05],"保定":[115.48,38.85],"湘潭":[112.91,27.87],"金華":[119.64,29.12],"岳陽":[113.09,29.37],"長沙":[113,28.21],"衢州":[118.88,28.97],"廊坊":[116.7,39.53],"菏澤":[115.480656,35.23375],"合肥":[117.27,31.86],"武漢":[114.31,30.52],"大慶":[125.03,46.58] };var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push(geoCoord.concat(data[i].value));}}return res; };option = {backgroundColor: '#404a59',title: {text: '全國主要城市空氣質(zhì)量',subtext: 'data from PM25.in',sublink: 'http://www.pm25.in',left: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},legend: {orient: 'vertical',top: 'bottom',left: 'right',data:['pm2.5'],textStyle: {color: '#fff'}},visualMap: {min: 0,max: 300,splitNumber: 5,color: ['#d94e5d','#eac736','#50a3ba'],textStyle: {color: '#fff'}},geo: {map: 'china',label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},series: [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'geo',data: convertData([{name: "海門", value: 9},{name: "鄂爾多斯", value: 12},{name: "招遠(yuǎn)", value: 12},{name: "舟山", value: 12},{name: "齊齊哈爾", value: 14},{name: "鹽城", value: 15},{name: "赤峰", value: 16},{name: "青島", value: 18},{name: "乳山", value: 18},{name: "金昌", value: 19},{name: "泉州", value: 21},{name: "萊西", value: 21},{name: "日照", value: 21},{name: "膠南", value: 22},{name: "南通", value: 23},{name: "拉薩", value: 24},{name: "云浮", value: 24},{name: "梅州", value: 25},{name: "文登", value: 25},{name: "上海", value: 25},{name: "攀枝花", value: 25},{name: "威海", value: 25},{name: "承德", value: 25},{name: "廈門", value: 26},{name: "汕尾", value: 26},{name: "潮州", value: 26},{name: "丹東", value: 27},{name: "太倉", value: 27},{name: "曲靖", value: 27},{name: "煙臺", value: 28},{name: "福州", value: 29},{name: "瓦房店", value: 30},{name: "即墨", value: 30},{name: "撫順", value: 31},{name: "玉溪", value: 31},{name: "張家口", value: 31},{name: "陽泉", value: 31},{name: "萊州", value: 32},{name: "湖州", value: 32},{name: "汕頭", value: 32},{name: "昆山", value: 33},{name: "寧波", value: 33},{name: "湛江", value: 33},{name: "揭陽", value: 34},{name: "榮成", value: 34},{name: "連云港", value: 35},{name: "葫蘆島", value: 35},{name: "常熟", value: 36},{name: "東莞", value: 36},{name: "河源", value: 36},{name: "淮安", value: 36},{name: "泰州", value: 36},{name: "南寧", value: 37},{name: "營口", value: 37},{name: "惠州", value: 37},{name: "江陰", value: 37},{name: "蓬萊", value: 37},{name: "韶關(guān)", value: 38},{name: "嘉峪關(guān)", value: 38},{name: "廣州", value: 38},{name: "延安", value: 38},{name: "太原", value: 39},{name: "清遠(yuǎn)", value: 39},{name: "中山", value: 39},{name: "昆明", value: 39},{name: "壽光", value: 40},{name: "盤錦", value: 40},{name: "長治", value: 41},{name: "深圳", value: 41},{name: "珠海", value: 42},{name: "宿遷", value: 43},{name: "咸陽", value: 43},{name: "銅川", value: 44},{name: "平度", value: 44},{name: "佛山", value: 44},{name: "海口", value: 44},{name: "江門", value: 45},{name: "章丘", value: 45},{name: "肇慶", value: 46},{name: "大連", value: 47},{name: "臨汾", value: 47},{name: "吳江", value: 47},{name: "石嘴山", value: 49},{name: "沈陽", value: 50},{name: "蘇州", value: 50},{name: "茂名", value: 50},{name: "嘉興", value: 51},{name: "長春", value: 51},{name: "膠州", value: 52},{name: "銀川", value: 52},{name: "張家港", value: 52},{name: "三門峽", value: 53},{name: "錦州", value: 54},{name: "南昌", value: 54},{name: "柳州", value: 54},{name: "三亞", value: 54},{name: "自貢", value: 56},{name: "吉林", value: 56},{name: "陽江", value: 57},{name: "瀘州", value: 57},{name: "西寧", value: 57},{name: "宜賓", value: 58},{name: "呼和浩特", value: 58},{name: "成都", value: 58},{name: "大同", value: 58},{name: "鎮(zhèn)江", value: 59},{name: "桂林", value: 59},{name: "張家界", value: 59},{name: "宜興", value: 59},{name: "北海", value: 60},{name: "西安", value: 61},{name: "金壇", value: 62},{name: "東營", value: 62},{name: "牡丹江", value: 63},{name: "遵義", value: 63},{name: "紹興", value: 63},{name: "揚(yáng)州", value: 64},{name: "常州", value: 64},{name: "濰坊", value: 65},{name: "重慶", value: 66},{name: "臺州", value: 67},{name: "南京", value: 67},{name: "濱州", value: 70},{name: "貴陽", value: 71},{name: "無錫", value: 71},{name: "本溪", value: 71},{name: "克拉瑪依", value: 72},{name: "渭南", value: 72},{name: "馬鞍山", value: 72},{name: "寶雞", value: 72},{name: "焦作", value: 75},{name: "句容", value: 75},{name: "北京", value: 79},{name: "徐州", value: 79},{name: "衡水", value: 80},{name: "包頭", value: 80},{name: "綿陽", value: 80},{name: "烏魯木齊", value: 84},{name: "棗莊", value: 84},{name: "杭州", value: 84},{name: "淄博", value: 85},{name: "鞍山", value: 86},{name: "溧陽", value: 86},{name: "庫爾勒", value: 86},{name: "安陽", value: 90},{name: "開封", value: 90},{name: "濟(jì)南", value: 92},{name: "德陽", value: 93},{name: "溫州", value: 95},{name: "九江", value: 96},{name: "邯鄲", value: 98},{name: "臨安", value: 99},{name: "蘭州", value: 99},{name: "滄州", value: 100},{name: "臨沂", value: 103},{name: "南充", value: 104},{name: "天津", value: 105},{name: "富陽", value: 106},{name: "泰安", value: 112},{name: "諸暨", value: 112},{name: "鄭州", value: 113},{name: "哈爾濱", value: 114},{name: "聊城", value: 116},{name: "蕪湖", value: 117},{name: "唐山", value: 119},{name: "平頂山", value: 119},{name: "邢臺", value: 119},{name: "德州", value: 120},{name: "濟(jì)寧", value: 120},{name: "荊州", value: 127},{name: "宜昌", value: 130},{name: "義烏", value: 132},{name: "麗水", value: 133},{name: "洛陽", value: 134},{name: "秦皇島", value: 136},{name: "株洲", value: 143},{name: "石家莊", value: 147},{name: "萊蕪", value: 148},{name: "常德", value: 152},{name: "保定", value: 153},{name: "湘潭", value: 154},{name: "金華", value: 157},{name: "岳陽", value: 169},{name: "長沙", value: 175},{name: "衢州", value: 177},{name: "廊坊", value: 193},{name: "菏澤", value: 194},{name: "合肥", value: 229},{name: "武漢", value: 273},{name: "大慶", value: 279}]),symbolSize: 12,label: {normal: {show: false},emphasis: {show: false}},itemStyle: {emphasis: {borderColor: '#fff',borderWidth: 1}}}] }; if (option && typeof option === "object") {myChart.setOption(option, true); }</script></body> </html>

視覺映射方式的配置

visualMap 中可以指定數(shù)據(jù)的指定維度映射到對應(yīng)的視覺元素上。

option = {visualMap: [{type: 'piecewise'min: 0,max: 5000,dimension: 3, // series.data 的第四個(gè)維度（即 value[3]）被映射seriesIndex: 4, // 對第四個(gè)系列進(jìn)行映射。inRange: { // 選中范圍中的視覺配置color: ['blue', '#121122', 'red'], // 定義了圖形顏色映射的顏色列表，// 數(shù)據(jù)最小值映射到'blue'上，// 最大值映射到'red'上，// 其余自動線性計(jì)算。symbolSize: [30, 100] // 定義了圖形尺寸的映射范圍，// 數(shù)據(jù)最小值映射到30上，// 最大值映射到100上，// 其余自動線性計(jì)算。},outOfRange: { // 選中范圍外的視覺配置symbolSize: [30, 100]}},...] }; option = {visualMap: [{...,inRange: { // 選中范圍中的視覺配置colorLightness: [0.2, 1], // 映射到明暗度上。也就是對本來的顏色進(jìn)行明暗度處理。// 本來的顏色可能是從全局色板中選取的顏色，visualMap組件并不關(guān)心。symbolSize: [30, 100]},...},...] };

ECharts 事件處理

ECharts 中我們可以通過監(jiān)聽用戶的操作行為來回調(diào)對應(yīng)的函數(shù)。

ECharts 通過?on?方法來監(jiān)聽用戶的行為，例如監(jiān)控用戶的點(diǎn)擊行為。

ECharts 中事件分為兩種類型:

用戶鼠標(biāo)操作點(diǎn)擊，如?'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'?事件。

還有一種是用戶在使用可以交互的組件后觸發(fā)的行為事件，例如在切換圖例開關(guān)時(shí)觸發(fā)的 'legendselectchanged' 事件），數(shù)據(jù)區(qū)域縮放時(shí)觸發(fā)的 'datazoom' 事件等等。

myChart.on('click', function (params) {// 在用戶點(diǎn)擊后控制臺打印數(shù)據(jù)的名稱console.log(params); });myChart.on('legendselectchanged', function (params) {console.log(params); });chart.on('click', 'series.line', function (params) {console.log(params); });chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {console.log(params); });

鼠標(biāo)事件

ECharts 支持的鼠標(biāo)事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

以下實(shí)例在點(diǎn)擊柱形圖時(shí)會彈出對話框：

所有的鼠標(biāo)事件包含參數(shù) params，這是一個(gè)包含點(diǎn)擊圖形的數(shù)據(jù)信息的對象，格式如下：

{// 當(dāng)前點(diǎn)擊的圖形元素所屬的組件名稱，// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。componentType: string,// 系列類型。值可能為：'line'、'bar'、'pie' 等。當(dāng) componentType 為 'series' 時(shí)有意義。seriesType: string,// 系列在傳入的 option.series 中的 index。當(dāng) componentType 為 'series' 時(shí)有意義。seriesIndex: number,// 系列名稱。當(dāng) componentType 為 'series' 時(shí)有意義。seriesName: string,// 數(shù)據(jù)名，類目名name: string,// 數(shù)據(jù)在傳入的 data 數(shù)組中的 indexdataIndex: number,// 傳入的原始數(shù)據(jù)項(xiàng)data: Object,// sankey、graph 等圖表同時(shí)含有 nodeData 和 edgeData 兩種 data，// dataType 的值會是 'node' 或者 'edge'，表示當(dāng)前點(diǎn)擊在 node 還是 edge 上。// 其他大部分圖表中只有一種 data，dataType 無意義。dataType: string,// 傳入的數(shù)據(jù)值value: number|Array// 數(shù)據(jù)圖形的顏色。當(dāng) componentType 為 'series' 時(shí)有意義。color: string }

如何區(qū)分鼠標(biāo)點(diǎn)擊到了哪里：

myChart.on('click', function (params) {if (params.componentType === 'markPoint') {// 點(diǎn)擊到了 markPoint 上if (params.seriesIndex === 5) {// 點(diǎn)擊到了 index 為 5 的 series 的 markPoint 上。}}else if (params.componentType === 'series') {if (params.seriesType === 'graph') {if (params.dataType === 'edge') {// 點(diǎn)擊到了 graph 的 edge（邊）上。}else {// 點(diǎn)擊到了 graph 的 node（節(jié)點(diǎn)）上。}}} });

使用 query 只對指定的組件的圖形元素的觸發(fā)回調(diào)：

chart.on(eventName, query, handler);

query 可為 string 或者 Object。

如果為 string 表示組件類型。格式可以是 'mainType' 或者 'mainType.subType'。例如：

chart.on('click', 'series', function () {...}); chart.on('click', 'series.line', function () {...}); chart.on('click', 'dataZoom', function () {...}); chart.on('click', 'xAxis.category', function () {...});

?如果為 Object，可以包含以下一個(gè)或多個(gè)屬性，每個(gè)屬性都是可選的：

chart.setOption({// ...series: {// ...type: 'custom',renderItem: function (params, api) {return {type: 'group',children: [{type: 'circle',name: 'my_el',// ...}, {// ...}]}},data: [[12, 33]]} }) chart.on('mouseup', {element: 'my_el'}, function () {// name 為 'my_el' 的元素被 'mouseup' 時(shí)，此方法被回調(diào)。 });

代碼觸發(fā) ECharts 中組件的行為

上面我們只說明了用戶的交互操作，但有時(shí)候我們也會需要在程序里調(diào)用方法并觸發(fā)圖表的行為，比如顯示 tooltip。

ECharts 通過 dispatchAction({ type: '' }) 來觸發(fā)圖表行為，統(tǒng)一管理了所有動作，也可以根據(jù)需要去記錄用戶的行為路徑。

以上實(shí)例用于輪播餅圖中的 tooltip：

效果圖：

ECharts 旭日圖

旭日圖（Sunburst）由多層的環(huán)形圖組成，在數(shù)據(jù)結(jié)構(gòu)上，內(nèi)圈是外圈的父節(jié)點(diǎn)。因此，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。

ECharts 創(chuàng)建旭日圖很簡單，只需要在 series 配置項(xiàng)中聲明類型為?sunburst?即可，data 數(shù)據(jù)結(jié)構(gòu)以樹形結(jié)構(gòu)聲明，看下一個(gè)簡單的實(shí)例：

效果圖：

顏色等樣式調(diào)整

默認(rèn)情況下會使用全局調(diào)色盤 color 分配最內(nèi)層的顏色，其余層則與其父元素同色。

在旭日圖中，扇形塊的顏色有以下三種設(shè)置方式：

在 series.data.itemStyle 中設(shè)置每個(gè)扇形塊的樣式。
在 series.levels.itemStyle 中設(shè)置每一層的樣式。
在 series.itemStyle 中設(shè)置整個(gè)旭日圖的樣式。

上述三者的優(yōu)先級是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊將會覆蓋 series.levels.itemStyle 和 series.itemStyle 的設(shè)置。

下面，我們將整體的顏色設(shè)為灰色?#aaa，將最內(nèi)層的顏色設(shè)為藍(lán)色?blue，將 Aa、B 這兩塊設(shè)為紅色?red。

按層配置樣式是一個(gè)很常用的功能，能夠很大程度上提高配置的效率。

數(shù)據(jù)下鉆

旭日圖默認(rèn)支持?jǐn)?shù)據(jù)下鉆，也就是說，當(dāng)點(diǎn)擊了扇形塊之后，將以該扇形塊的數(shù)據(jù)作為根節(jié)點(diǎn)，進(jìn)一步顯示該數(shù)據(jù)的細(xì)節(jié)。

在數(shù)據(jù)下鉆后，圖形的中間會出現(xiàn)一個(gè)用于返回上一層的圖形，該圖形的樣式可以通過 levels[0] 配置。

如果不需要數(shù)據(jù)下鉆功能，可以通過將 nodeClick 設(shè)置為 false 來關(guān)閉，也可以設(shè)為 'link'，并將 data.link 設(shè)為點(diǎn)擊扇形塊對應(yīng)打開的鏈接。

高亮相關(guān)扇形塊

旭日圖支持鼠標(biāo)移動到某扇形塊時(shí)，高亮相關(guān)數(shù)據(jù)塊的操作，可以通過設(shè)置 highlightPolicy，包括以下幾種高亮方式：

'descendant'（默認(rèn)值）：高亮鼠標(biāo)移動所在扇形塊與其后代元素；
'ancestor'：高亮鼠標(biāo)所在扇形塊與其祖先元素；
'self'：僅高亮鼠標(biāo)所在扇形塊；
'none'：不會淡化（downplay）其他元素。

上面提到的"高亮"，對于鼠標(biāo)所在的扇形塊，會使用 emphasis 樣式；對于其他相關(guān)扇形塊，則會使用 highlight 樣式。通過這種方式，可以很方便地實(shí)現(xiàn)突出顯示相關(guān)數(shù)據(jù)的需求。

具體來說，對于配置項(xiàng)：

itemStyle: {color: 'yellow',borderWidth: 2,emphasis: {color: 'red'},highlight: {color: 'orange'},downplay: {color: '#ccc'} }

highlightPolicy 為 'descendant':

highlightPolicy 為 'ancestor' :

經(jīng)典旭日圖1

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts 實(shí)例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];var bgColor = '#2E2733';var itemStyle = {star5: {color: colors[0]},star4: {color: colors[1]},star3: {color: colors[2]},star2: {color: colors[3]}};var data = [{name: '虛構(gòu)',itemStyle: {normal: {color: colors[1]}},children: [{name: '小說',children: [{name: '5☆',children: [{name: '疼'}, {name: '慈悲'}, {name: '樓下的房客'}]}, {name: '4☆',children: [{name: '虛無的十字架'}, {name: '無聲告白'}, {name: '童年的終結(jié)'}]}, {name: '3☆',children: [{name: '瘋癲老人日記'}]}]}, {name: '其他',children: [{name: '5☆',children: [{name: '納博科夫短篇小說全集'}]}, {name: '4☆',children: [{name: '安魂曲'}, {name: '人生拼圖版'}]}, {name: '3☆',children: [{name: '比起愛你，我更需要你'}]}]}]}, {name: '非虛構(gòu)',itemStyle: {color: colors[2]},children: [{name: '設(shè)計(jì)',children: [{name: '5☆',children: [{name: '無界面交互'}]}, {name: '4☆',children: [{name: '數(shù)字繪圖的光照與渲染技術(shù)'}, {name: '日本建筑解剖書'}]}, {name: '3☆',children: [{name: '奇幻世界藝術(shù)\n&RPG地圖繪制講座'}]}]}, {name: '社科',children: [{name: '5☆',children: [{name: '痛點(diǎn)'}]}, {name: '4☆',children: [{name: '卓有成效的管理者'}, {name: '進(jìn)化'}, {name: '后物欲時(shí)代的來臨',}]}, {name: '3☆',children: [{name: '瘋癲與文明'}]}]}, {name: '心理',children: [{name: '5☆',children: [{name: '我們時(shí)代的神經(jīng)癥人格'}]}, {name: '4☆',children: [{name: '皮格馬利翁效應(yīng)'}, {name: '受傷的人'}]}, {name: '3☆',}, {name: '2☆',children: [{name: '迷戀'}]}]}, {name: '居家',children: [{name: '4☆',children: [{name: '把房子住成家'}, {name: '只過必要生活'}, {name: '北歐簡約風(fēng)格'}]}]}, {name: '繪本',children: [{name: '5☆',children: [{name: '設(shè)計(jì)詩'}]}, {name: '4☆',children: [{name: '假如生活糊弄了你'}, {name: '博物學(xué)家的神秘動物圖鑒'}]}, {name: '3☆',children: [{name: '方向'}]}]}, {name: '哲學(xué)',children: [{name: '4☆',children: [{name: '人生的智慧'}]}]}, {name: '技術(shù)',children: [{name: '5☆',children: [{name: '代碼整潔之道'}]}, {name: '4☆',children: [{name: 'Three.js 開發(fā)指南'}]}]}]}];for (var j = 0; j < data.length; ++j) {var level1 = data[j].children;for (var i = 0; i < level1.length; ++i) {var block = level1[i].children;var bookScore = [];var bookScoreId;for (var star = 0; star < block.length; ++star) {var style = (function (name) {switch (name) {case '5☆':bookScoreId = 0;return itemStyle.star5;case '4☆':bookScoreId = 1;return itemStyle.star4;case '3☆':bookScoreId = 2;return itemStyle.star3;case '2☆':bookScoreId = 3;return itemStyle.star2;}})(block[star].name);block[star].label = {color: style.color,downplay: {opacity: 0.5}};if (block[star].children) {style = {opacity: 1,color: style.color};block[star].children.forEach(function (book) {book.value = 1;book.itemStyle = style;book.label = {color: style.color};var value = 1;if (bookScoreId === 0 || bookScoreId === 3) {value = 5;}if (bookScore[bookScoreId]) {bookScore[bookScoreId].value += value;}else {bookScore[bookScoreId] = {color: colors[bookScoreId],value: value};}});}}level1[i].itemStyle = {color: data[j].itemStyle.color};}}option = {backgroundColor: bgColor,color: colors,series: [{type: 'sunburst',center: ['50%', '48%'],data: data,sort: function (a, b) {if (a.depth === 1) {return b.getValue() - a.getValue();}else {return a.dataIndex - b.dataIndex;}},label: {rotate: 'radial',color: bgColor},itemStyle: {borderColor: bgColor,borderWidth: 2},levels: [{}, {r0: 0,r: 40,label: {rotate: 0}}, {r0: 40,r: 105}, {r0: 115,r: 140,itemStyle: {shadowBlur: 2,shadowColor: colors[2],color: 'transparent'},label: {rotate: 'tangential',fontSize: 10,color: colors[0]}}, {r0: 140,r: 145,itemStyle: {shadowBlur: 80,shadowColor: colors[0]},label: {position: 'outside',textShadowBlur: 5,textShadowColor: '#333',},downplay: {label: {opacity: 0.5}}}]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>

效果圖：

總結(jié)

以上是生活随笔為你收集整理的【ECharts系列|01入门】从入门到天黑【入门级教程实战】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【粉丝需求】如何把一个前端网页都搞下来？
下一篇：【ECharts系列|02可视化大屏】

编程问答

【ECharts系列|01入门】 从入门到天黑【入门级教程实战】

ECharts簡介

?ECharts 安裝

ECharts 配置語法

ECharts 餅圖

ECharts 樣式設(shè)置

ECharts 異步加載數(shù)據(jù)

ECharts 數(shù)據(jù)集（dataset）

ECharts 交互組件

ECharts 響應(yīng)式

ECharts 數(shù)據(jù)的視覺映射

ECharts 事件處理

ECharts 旭日圖

總結(jié)

【ECharts系列|01入门】从入门到天黑【入门级教程实战】