ECharts筆記

簡介

ECharts 是一個使用 JavaScript 實現的開源可視化庫，涵蓋各行業圖表，滿足各種需求。

快速入門

使用echarts

引用echarts的js
定義一個div
通過該div來初始化echarts
構建echarts的option對象
爲echarts設置option對象

搭建骨架

<html>
    <head>
        <script src=https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts-en.min.js></script>
        .......
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"/>
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(main);
        <script type="text/javascript">
            var main = document.getElementById('main');
        	$.get('/echarts/data/json',function (data) {
        			let option = generateChartOption(data);
                    myChart.setOption(option);
        	});
        </script>
    </body>
</html>

構建option對象

function createOption(data) {
	let option = {
		title: {
			// text主標題 subtext副標題 itemGap 主副標題間距默認10px target和subtarget超鏈接地址
			text: '金庸武力值排行榜',
			subtext: '百曉生著'
		},
		// 圖例組件 折線圖中的線名稱 幾條線幾個名稱 顯示在最上面
		legend: {
			type: 'plain', //默認值 'scroll'：可滾動翻頁的圖例。當圖例數量較多時可以使用。
			data: ["英雄"],
		},
		// x軸 
		// https://echarts.apache.org/zh/option.html#xAxis
		xAxis: {
			//category(適用於x軸) value(適用於y軸) time(日期) log(對數)
			type: 'category', 
			name: '人物',
            nameLocation: 'end', //軸名稱在x軸的位置 start middle end
            nameTextStyle: {} //字體樣式 fontStyle fontWeight fontSize
			data: ['張山峯','楊過','小龍女','黃蓉','郭靖'],
		},
		// y軸 y軸的data在series裏 其他跟x抽基本雷同
		yAxis: {},
		dataZoom: [{startValue: 0}, {type: 'inside'}],
		visualMap: {
			// 顏色指示器　距上面10px　距右邊10px
            top: 10,right: 10,
            // 不顯示顏色指示器 沒有series.markLine推薦打開 有也可以打開 默認打開
            show: false,
            //y軸 0到50顯示#096顏色 50到100顯示#ffde33顏色
            pieces: [{gt: 0,lte: 50,color: '#096'}, {gt: 50,lte: 100,color: '#ffde33'}],
            //y軸超出pieces設置範圍顯示#999顏色
            outOfRange: {color: '#999'} 
		},
		series: [{
			name: '英雄',
			//line(折線圖),bar(柱狀圖),pie(餅圖),tree(s樹),candlestick(k線圖),lines(路徑圖),scatter(散點氣泡圖),effectScatter(漣漪特效動畫的散點氣泡圖)
			//map(地圖),graph(關係圖),funnel(漏斗圖),gauge(儀表盤),pictorialBar(象形柱圖),radar(雷達圖),treemap(層級數據圖),sunburst(旭日圖)
			type: 'line',
			data:[100,80,70,60,80],
			//把y軸劃分區域 可以去掉y軸默認的分割線yAxis.splitLine.show: false
			markLine: {
				//圖形是否不響應和不觸發鼠標事件，默認爲 false
				silent: true,
				// y軸劃分了兩個區域 0到50 50到100 y軸有50或100的數時會顯示相應的橫線
				data: [{yAxis: 50}, {yAxis: 100}]
			},
			// 線中的區域顏色
            areaStyle: {
                 normal: {
                     color: color //改變區域顏色
                 }
            },
            //自己控制線和點的顏色
            itemStyle: {
                normal: {
                    color: color, //改變折線點的顏色
                    lineStyle: {
                        color: color //改變折線顏色
                    }
                }
            },
		}]
	}
	return option;
}

option對象解析

titile

echarts圖的標題可以省略

text 主標題文本，支持使用 \n 換行
show 是否顯示標題組件。
link 主標題文本超鏈接。
target 指定窗口打開主標題超鏈接。
- self 當前窗口打開
- blank 新窗口打開默認
textStyle 參考legend.textStyle
subtext 副標題文本，支持使用 \n 換行
sublink 副標題文本超鏈接
subtarget 指定窗口打開副標題超鏈接
subtextStyle 參考legend.textStyle
textAlign text 和 subtext的水平對齊

默認auto 可選值：‘auto’、‘left’、‘right’、‘center’
- textVerticalAlign 包括 text 和 subtext的垂直對齊默認auto
- itemGap 主副標題之間的間距默認10

legend

圖例組件折線圖就是線的名稱有幾跟線就有幾個名稱

type

圖例類型
‘plain’：普通圖例。缺省就是普通圖例。
‘scroll’：可滾動翻頁的圖例。當圖例數量較多時可以使用。
z

默認值２　控制圖像的先後順序　z值小的圖像會被z值大的圖像覆蓋　優先級低於zlevel
orient

佈局朝向　值: horizontal(默認)　vertical
align

對其方式　默認自動，根據組件的位置和 orient 決定
auto 　left 　right
itemGap

圖例每項之間的間隔。默認10 橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。
textStyle. fontStyle

文字字體的風格
可選：normal(默認) 　italic 　oblique
textStyle. fontWeight

文字字體的粗細
可選：normal(默認) 　bold 　bolder　lighter　
100 | 200 | 300 | 400…
textStyle. fontFamily = ‘sans-serif’

文字的字體系列
還可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …
textStyle.fontSize

字體大小默認12
data

圖例的數據數組。數組項通常爲一個字符串，每一項代表一個系列的 name(如果是餅圖，也可以是餅圖單個數據的 name)
圖例組件會自動根據對應系列的圖形標記（symbol）來繪製自己的顏色和標記，特殊字符串 ‘’（空字符串）或者 ‘\n’（換行字符串）用於圖例的換行。
如果 data 沒有被指定，會自動從當前系列中獲取。多數系列會取自 series.name 或者 series.encode 的 seriesName 所指定的維度。如餅圖 and 漏斗圖等會取自 series.data 中的 name。

實例
```
data:[{name: '銷量',icon: 'circle',textStyle: {color: 'red'}}]
data: ['銷量']
```
data. name

圖例項的名稱
應等於某系列的name值（如果是餅圖，也可以是餅圖單個數據的 name）。

legend.data. icon

圖例項的 icon。
取值範圍 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通過 ‘image://url’ 設置爲圖片，其中 URL 爲圖片的鏈接，或者 dataURI。
URL 爲圖片鏈接例如：
‘image://http://xxx.xxx.xxx/a/b.png’

singleAxis 單軸

可以被應用到散點圖中展現一維數據示例

xAxis與yAxis x與y軸

show 是否顯示x或y 軸
type
- category類目軸
  
  默認適用於離散的類目數據，爲該類型時必須通過 data 設置類目數據。
- time時間軸
  
  適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。
- log對數軸
  
  適用於對數數據。
name 座標軸名稱
nameLocation

座標軸名稱顯示位置。start middle|center end(默認)
nameTextStyle

參考legend.textStyle
min

座標軸刻度最小值。
可以設置成特殊值 ‘dataMin’，此時取數據在該軸上的最小值作爲最小刻度。
不設置時會自動計算最小值保證座標軸刻度的均勻分佈。
max

跟min類似
splitLine

是否顯示分隔線跟刻度相連。默認數值軸顯示(y軸)，類目軸(x軸)不顯示。
lineStyle { color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
scale

只在數值軸中（type: ‘value’）有效。
是否是脫離 0 值比例。設置成 true 後坐標刻度不會強制包含零刻度。
在雙數值軸的散點圖中比較有用。
在設置 min 和 max 之後該配置項無效。

axisTick

座標軸刻度相關設置。
show 是否顯示座標軸刻度。
inside 座標軸刻度是否朝內，默認朝外。
length 座標軸刻度的長度默認5
lineStyle 刻度線的樣式設置

lineStyle: {
   // 使用深淺的間隔色
   color: ['#aaa', '#ddd'],
   width: 100px, //分割線寬
   type: 'solid', //dashed dotted
   //圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。
   shadowColor: 'rgba(0, 0, 0, 0.5)',
   shadowBlur: 10,
   opacity: 0.6 //圖形透明度。支持從 0 到 1 的數字，爲 0 時不繪製該圖形
}

dataZoom

組件用於區域縮放，能自由關注細節的數據信息，或者概覽數據整體。

type 類型可以使用多個
- inside 內置型數據區域縮放組件
  
  內置於座標系中，使用戶可以在座標系上通過鼠標拖拽、鼠標滾輪、手指滑動（觸屏上）來縮放或漫遊座標系。
- slider 滑動條型數據區域縮放組件
  
  有單獨的滑動條，用戶在滑動條上進行縮放或漫遊。
- select 框選型數據區域縮放組件
  
  提供一個選框進行數據區域縮放。即 toolbox.feature.dataZoom，配置項在 toolbox 中。
startValue和endValue

數據窗口範圍絕對數值形式即最大值最小值
start 和 end

數據窗口範圍百分百形式
如果設置了yAxias的min或max屬性那麼start: 20 end: 80 表示 yAxias.min~yAxis.max的20%到80%
如果yAxis.min、yAxis.max 沒有設置：
如果 dataZoomX 設置爲 filterMode: ‘empty’：
那麼 dataZoomY 的 start: 20, end: 80 表示 series.data 中 dataMinY ~ dataMaxY（即上例中的 9 ~ 80）的 20% 到 80%。
如果 dataZoomX 設置爲 filterMode: ‘filter’：
那麼，因爲 dataZoomX 定義 dataZoomY 組件之前，所以 dataZoomX 的 start: 30, end: 70 表示全部數據的 30% 到 70%，而 dataZoomY 組件的 start: 20, end: 80 表示經過 dataZoomX 過濾處理後，所得數據集的 20% 到 80%。
如果需要改變這種處理順序，那麼改變 dataZoomX 和 dataZoomY 在 option 中的出現順序即可。

visualMap

是視覺映射組件，用於進行『視覺編碼』，也就是將數據映射到視覺元素（視覺通道）
人話就是把y軸分爲多段每段顯示不同的顏色

實例

visualMap: {
    // 顏色指示器　距上面10px　距右邊10px
    top: 10,
    right: 10,
    // 不顯示顏色指示器
    show: false,
    // 分段顏色
    pieces: [{
        // y軸的value 0到50顯示顏色爲#096
        gt: 0,
        lte: 50,
        color: '#096'
    }, {
        gt: 50,
        lte: 100,
        color: '#ffde33'
    }],
     // y軸的value 超出100的顯示顏色爲#999
    outOfRange: {
        color: '#999'
    }
},

tooltip

提示框組件。

tooltip: {
 // axis item none三個值
    trigger: 'axis'
}

trigger

在視圖裏鼠標移動觸發動作觸發類型默認item
- item
  
  數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
- axis
  座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
- none
  
  什麼都不觸發
axisPointer

座標軸指示器配置項
座標軸指示器是用來指示座標軸當前刻度的工具。
複雜功能可以通過 xAxis.axisPointer 或 angleAxis.axisPointer來配置

出現標線和刻度文本控制

上例中，使用了 axisPointer.link 來關聯不同的座標系中的 axisPointer。

觸屏交互方式

座標軸指示器在多軸的場景能起到輔助作用

雙X軸應用如今日昨日數據展示

toolbox

工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。

show 是否顯示工具欄組件。
orient 工具欄 icon 的佈局朝向。horizontal(默認) vertical
itemSize 工具欄 icon 的大小默認15
itemGap 工具欄 icon 每項之間的間隔。默認10
showTitle 是否在鼠標 hover 的時候顯示每個工具 icon 的標題

feature 各工具配置項

除了各個內置的工具按鈕外，還可以自定義工具按鈕。
注意，自定義的工具名字，只能以 my 開頭，例如下例中的 myTool1，myTool2：

{
    toolbox: {
        feature: {
            myTool1: {
                show: true,
                title: '自定義擴展方法1',
                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                onclick: function (){
                    alert('myToolHandler1')
                }
            },
            myTool2: {
                show: true,
                title: '自定義擴展方法',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
        }
    }
}

saveAsImage 保存爲圖片

所有子屬性 {type , name , backgroundColor , connectedBackgroundColor , excludeComponents , show , title , icon , iconStyle , emphasis , pixelRatio}
restore 配置項還原。

所有子屬性 { show , title , icon , iconStyle , emphasis }
dataView 數據視圖工具

可以展現當前圖表所用的數據，編輯後可以動態更新。
所有屬性{ show , title , icon , iconStyle , emphasis , readOnly , optionToContent , contentToOption , lang , backgroundColor , textareaColor , textareaBorderColor , textColor , buttonColor , buttonTextColor }
dataZoom 數據區域縮放。

目前只支持直角座標系的縮放。
所有屬性 { show , title , icon , iconStyle , emphasis , filterMode , xAxisIndex , yAxisIndex }

magicType 動態類型切換

所有屬性
{ show , type , title , icon , iconStyle , emphasis , option , seriesIndex }

feature: {
	    magicType: {
	        type: ['line', 'bar', 'stack', 'tiled']
	    }
	}
	```

brush 選框組件的控制按鈕。

也可以不在這裏指定，而是在 brush.toolbox 中指定。
所有屬性 { type , icon , title }
iconStyle icon樣式

brush 區域選擇組件

>用戶可以選擇圖中一部分數據，從而便於向用戶展示被選中數據，或者他們的一些統計計算結果。

geo 地理座標系組件。

地理座標系組件用於地圖的繪製，支持在地理座標系上繪製散點圖，線集。

timeline 多個echarts option操作

提供了在多個 ECharts option 間進行切換、播放等操作的功能。

series 系列列表

每個系列通過 type 決定自己的圖表類型

type

line(折線圖),bar(柱狀圖),pie(餅圖),tree(s樹),candlestick(k線圖),lines(路徑圖),scatter(散點氣泡圖),effectScatter(漣漪特效動畫的散點氣泡圖)
map(地圖),graph(關係圖),funnel(漏斗圖),gauge(儀表盤),pictorialBar(象形柱圖),radar(雷達圖),treemap(層級數據圖),sunburst(旭日圖)
,boxplot(箱形圖),heatmap(熱力圖),parallel(平行座標系),sankey(桑基圖),themeRiver(主題河流),custom(自定義)

//根據data來構造series
function generateSeries(data) {
	// data格式{keys:['武力','金錢'],values:{武力: [[張三丰,100],[楊過,80]],金錢: [[張三丰,1000],[楊過,800]]}}
    let keys = data.keys;
    let values = data.values;
    let series = [];
    for (let index in keys) {
        let key = keys[index];
        let color = getGraphColor(index);
        let item = {
            name: key,
            // https://www.jianshu.com/p/cc7d08142e8b
            type: 'line',
            // 線中的區域顏色
            // areaStyle: {
            //     normal: {
            //         color: color //改變區域顏色
            //     }
            // },
            //自己控制線和點的顏色
            itemStyle: {
                normal: {
                    color: color, //改變折線點的顏色
                    lineStyle: {
                        color: color //改變折線顏色
                    }
                }
            },
            //value[key]得到的是個數組 裏面2個元素 元素0爲x軸數據 元素1爲y軸數據
            data: values[key].map(function (item) {
                return item[1];
            }),
            // y軸劃分區域 可以去掉y軸默認的分割線yAxis.splitLine.show: false
            markLine: {
                silent: true,
                // y軸 50 100 150 200 300的位置會劃橫線
                data: [{
                    yAxis: 50
                }, {
                    yAxis: 100
                }, {
                    yAxis: 150
                }, {
                    yAxis: 200
                }, {
                    yAxis: 300
                }]
            }
        };
        series.push(item);
    }
}

let colors = {}
colors['pink'] = ['#FF6699','#ff3399'];
 colors['blue'] = ['#0066CC','#3300FF'];
 colors['green'] = ['#99FFFF','#33CCCC'];
 colors['grey'] = ['#CCCCCC','#999999'];
 colors['red'] = ['#FF0033','#990033'];
 let colorsKeys = ["pink",'blue','green','grey','red'];
 function getGraphColor(index) {
     let color = colors[colorsKeys[parseInt(index/2)]][index%2];
     return color;
 }

grid 網格圖

直角座標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。
示例

textStyle全局的字體樣式

統一設置字體樣式

實例

textStyle:{
	color: "#fff",
	fontStyle: 'normal',
	fontWeight: 'normal',
	fontFamily: 'sans-serif', //文字的字體系列
	fontSize: 12,
	textBorderColor: 'transparent', //文字本身的描邊顏色。
	textBorderWidth: 1, //文字本身的描邊寬度。
	textShadowColor: 'transparent', //文字本身的陰影顏色。
	textShadowBlur: 1 //文字本身的陰影長度。
}

animation 動畫相關配置

let option = {
	//是否開啓動畫
	animation: true, 
	//是否開啓動畫的閾值，當單個系列顯示的圖形數量大於這個閾值時會關閉動畫。
	animationThreshold: 2000,
	//初始動畫的時長，支持回調函數，可以通過每個數據返回不同的時長實現更戲劇的初始動畫效果：
	//animationDuration: 1000,
	animationDuration: function (idx) {
	  // 越往後的數據時長越大
	   return idx * 100;
	},
	//初始動畫的緩動效果。不同的緩動效果可以參考 
	//緩動示例https://echarts.apache.org/examples/zh/editor.html?c=line-easing
	animationEasing: 'cubicOut',
	//初始動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果。 
	//示例https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay
	//animationDelay: 0,
	animationDelay: function (idx) {
		// 越往後的數據延遲越大
		return idx * 100;
	},
	//數據更新動畫的時長。
	//支持回調函數，可以通過每個數據返回不同的時長實現更戲劇的更新動畫效果
	//animationDurationUpdate: 300,
	animationDurationUpdate: function (idx) {
	    // 越往後的數據時長越大
	    return idx * 100;
	}
	//數據更新動畫的緩動效果。
	animationEasingUpdate: 'cubicOut',
	//數據更新動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果。
	//animationDelayUpdate: 0,
	animationDelayUpdate: function (idx) {
	    // 越往後的數據延遲越大
	    return idx * 100;
	}
	
}

事件行爲

在 ECharts 的圖表中用戶的操作將會觸發相應的事件。開發者可以監聽這些事件，然後通過回調函數做相應的處理，比如跳轉到一個地址，或者彈出對話框，或者做數據下鑽等等。

在 ECharts 3 中綁定事件跟 2 一樣都是通過 on 方法，但是事件名稱比 2 更加簡單了。ECharts 3 中，事件名稱對應 DOM 事件名稱，均爲小寫的字符串，如下是一個綁定點擊操作的示例。

示例

myChart.on('click', function (params) {
    // 控制檯打印數據的名稱
    console.log(params.name);
});

鼠標事件的處理

ECharts 支持常規的鼠標事件類型，包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。

點擊柱狀圖後打開相應的百度搜索頁面的示例

// 基於準備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據
var option = {
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
// 處理點擊事件並且跳轉到相應的百度搜索頁面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

所有的鼠標事件包含參數 params，這是一個包含點擊圖形的數據信息的對象，如下格式：

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

如何區分鼠標點擊到了哪裏：

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

使用 query 只對指定的組件的圖形元素的觸發回調：

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，可以包含以下一個或多個屬性，每個屬性都是可選的：

{
    <mainType>Index: number // 組件 index
    <mainType>Name: string // 組件 name
    <mainType>Id: string // 組件 id
    dataIndex: number // 數據項 index
    name: string // 數據項 name
    dataType: string // 數據項 type，如關係圖中的 'node', 'edge'
    element: string // 自定義系列中的 el 的 name
}

例如：

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 爲 'uuu' 的系列中的圖形元素被 'mouseover' 時，此方法被回調。
});

例如：

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 爲 'xx' 的元素被 'mouseover' 時，此方法被回調。
});

例如：

chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 關係圖的節點被點擊時此方法被回調。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 關係圖的邊被點擊時此方法被回調。
});

例如：

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' 時，此方法被回調。
});

你可以在回調函數中獲得這個對象中的數據名、系列名稱後在自己的數據倉庫中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通過餅圖表現單個柱子中的數據分佈
                data: [detail.data]
            }]
        });
    });
});

組件交互的行爲事件

在 ECharts 中基本上所有的組件交互行爲都會觸發相應的事件，常用的事件和事件對應參數在 events 文檔中有列出

下面是監聽一個圖例開關的示例：

// 圖例開關的行爲只會觸發 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 獲取點擊圖例的選中狀態
    var isSelected = params.selected[params.name];
    // 在控制檯中打印
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
    // 打印所有圖例的狀態
    console.log(params.selected);
});

代碼觸發 ECharts 中組件的行爲

上面提到諸如’legendselectchanged’事件會由組件交互的行爲觸發，那除了用戶的交互操作，有時候也會有需要在程序裏調用方法觸發圖表的行爲，諸如顯示 tooltip，選中圖例。

在 ECharts 2.x 是通過 myChart.component.tooltip.showTip 這種形式調用相應的接口觸發圖表行爲，入口很深，而且涉及到內部組件的組織。相對地，在 ECharts 3 裏改爲通過調用 myChart.dispatchAction({ type: ‘’ }) 觸發圖表行爲，統一管理了所有動作，也可以方便地根據需要去記錄用戶的行爲路徑。

常用的動作和動作對應參數在 action 文檔中有列出。

通過dispatchAction去輪流高亮餅圖的每個扇形

官網圖介紹與實例

文檔: https://echarts.apache.org/zh/option.html# ${圖名稱} 實例: https://echarts.apache.org/examples/zh/editor.html?c=$ {圖名稱}

官方實例

折線圖(line)

柱狀圖(bar)

餅圖(pie)

散點圖(scatter)

關係圖(graph)

樹圖(tree)

實例

瀟湘閣2020年銷售數據

一條先　數據分區間　不同區間顯示不同顏色

代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://echarts.cdn.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1588792671233"></script>
</head>
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"/>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var main = document.getElementById('main');

    var width = parseInt(getStyle(document.body,"width"));
    width = parseInt(width * 0.7);
    main.style.width= width+'px';
    height = width * 0.66666666666667;
    main.style.height= height+'px';
    var myChart = echarts.init(main);

    let data = [
	['1月',90],['2月',190],['3月',280],['4月',20],['5月',10],['6月',55],['7月',245],['8月',90],['9月',370],['10月',170],['11月',270],['12月',280]
    ];

    let autoConfig = data.autoConfig;
    let option = getChartOption(data);
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
    

    //獲取style樣式的css屬性,考慮兼容;ie,火狐/谷歌;
    function getStyle(parm1,parm2) {
        return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改變的元素代替名;parm2,要改變的屬性名
    }

    function getChartOption(data) {
        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: '瀟湘閣2020年銷售數據'
            },
            tooltip: {
                // axis item none三個值
                trigger: 'axis'
            },
            legend: {
                data:['銷量']
            },
            // https://echarts.apache.org/zh/option.html#xAxis
            xAxis: {
                type: 'category',
                data: data.map(function (item) {
                    return item[0];
                }),
                name: '週期',
                // start middle end
                nameLocation: 'end',
                nameTextStyle: {
                    // normal italic oblique
                    fontStyle: 'normal',
                    fontWeight: 600,
                    fontSize: 18
                }
            },
            yAxis: {
                type: 'value',
                name: '億',
		nameLocation: 'start',
                nameTextStyle: {
                    fontStyle: 'normal',
                    fontWeight: 600,
                    fontSize: 18
                },
                splitLine: {
                    show: false
                }
            },
            dataZoom: [{
                startValue: 0
            }, {
                type: 'inside'
            }],
            visualMap: {
                // 顏色指示器　距上面10px　距右邊10px
                top: 10,
                right: 10,
                // 不顯示顏色指示器
                show: false,
                pieces: [{
                    gt: 0,
                    lte: 50,
                    color: '#096'
                }, {
                    gt: 50,
                    lte: 100,
                    color: '#ffde33'
                }, {
                    gt: 100,
                    lte: 150,
                    color: '#ff9933'
                }, {
                    gt: 150,
                    lte: 200,
                    color: '#cc0033'
                }, {
                    gt: 200,
                    lte: 300,
                    color: '#660099'
                }, {
                    gt: 300,
                    color: '#7e0023'
                }],
                outOfRange: {
                    color: '#999'
                }
            },
            series: [{
                name: '銷量',
                // https://www.jianshu.com/p/cc7d08142e8b
                type: 'line',
                data: data.map(function (item) {
                    return item[1];
                }),
                markLine: {
                    silent: true,
                    data: [{
                        yAxis: 50
                    }, {
                        yAxis: 100
                    }, {
                        yAxis: 150
                    }, {
                        yAxis: 200
                    }, {
                        yAxis: 300
                    }]
                }
            }]
        };

        return option;
    }
</script>
</body>
</html>

效果圖

hystrix bashboard

根據服務端返回的數據渲染出圖　圖的數量固定　線的條數不確定
可以自定義線的顏色

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hystrix dashboard</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <!--"https://echarts.cdn.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1588792671233"-->
        <script src=https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts-en.min.js></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="page-header">
            <h1 id="title" >hystrix bashboard</h1>
        </div>
        <!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"/>
        <script type="text/javascript">
            var title = document.getElementById("title");
            // 基於準備好的dom，初始化echarts實例
            var main = document.getElementById('main');

            var width = parseInt(getStyle(document.body,"width"));
            width = parseInt(width * 0.7);
            main.style.width= width+'px';
            height = width * 0.66666666666667;
            main.style.height= height+'px';
            var myChart = echarts.init(main);

            $.get('/feign/hystrix/json',function (data) {
                data = data.data['graph'];
                if(data.keys.length > 0){
                    let autoConfig = data.autoConfig;
                    let titleStr = autoConfig
                        ? "hystrix bashboard<small>自動配置已開啓</small>"
                        : "hystrix bashboard<small>自動配置未開啓</small>";
                    title.innerHTML=titleStr;
                    let option = getChartOption(data);
                    // 使用剛指定的配置項和數據顯示圖表。
                    myChart.setOption(option);
                }
            });

            //獲取style樣式的css屬性,考慮兼容;ie,火狐/谷歌;
            function getStyle(parm1,parm2) {
                return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改變的元素代替名;parm2,要改變的屬性名
            }

            function getChartOption(data) {
                // 指定圖表的配置項和數據
                let option = createOption(data);

                let series = option.series;
                initSeries(series,data);

                return option;
            }

            function initSeries(series, data) {
                let keys = data.keys;
                let values = data.values;
                for (let index in keys) {
                    let key = keys[index];
                    let color = getGraphColor(index);
                    let item = {
                        name: key,
                        // https://www.jianshu.com/p/cc7d08142e8b
                        type: 'line',
                        // areaStyle: {
                        //     normal: {
                        //         color: color //改變區域顏色
                        //     }
                        // },
                        itemStyle: {
                            normal: {
                                color: color, //改變折線點的顏色
                                lineStyle: {
                                    color: color //改變折線顏色
                                }
                            }
                        },
                        data: values[key].map(function (item) {
                            return item[1];
                        }),
                        markLine: {
                            silent: true,
                            data: [{
                                yAxis: 50
                            }, {
                                yAxis: 100
                            }, {
                                yAxis: 150
                            }, {
                                yAxis: 200
                            }, {
                                yAxis: 300
                            }]
                        }
                    };
                    series.push(item);
                }
            }

            function createOption(data) {
                let maxIndex = 0;
                let keys = data.keys;
                let values = data.values;
                for (let index = 1; index < keys.length; index++) {
                    if(values[keys[maxIndex]].length < values[keys[index]].length){
                        maxIndex = index;
                    }
                }
                var option = {
                    // title: {
                    //     text: data.name
                    // },
                    tooltip: {
                        // axis item none三個值
                        trigger: 'axis'
                    },
                    legend: {
                        //data: data.keys
                        data: keys
                    },
                    // https://echarts.apache.org/zh/option.html#xAxis
                    xAxis: {
                        type: 'category',
                        data: values[keys[maxIndex]].map(function (item) {
                            return item[0];
                        }),
                        name: '週期',
                        // start middle end
                        nameLocation: 'end',
                        nameTextStyle: {
                            // normal italic oblique
                            fontStyle: 'normal',
                            fontWeight: 600,
                            fontSize: 18
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        name: '數量',
                        // start middle end
                        nameLocation: 'middle',
                        nameTextStyle: {
                            // normal italic oblique
                            fontStyle: 'normal',
                            fontWeight: 600,
                            fontSize: 18
                        }
                    },
                    dataZoom: [{
                        startValue: 0
                    }, {
                        type: 'inside'
                    }],
                    series: []
                };
                return option;
            }
            let colors = {}
            colors['pink'] = ['#FF6699','#ff3399'];
            colors['blue'] = ['#0066CC','#3300FF'];
            colors['green'] = ['#99FFFF','#33CCCC'];
            colors['grey'] = ['#CCCCCC','#999999'];
            colors['red'] = ['#FF0033','#990033'];
            let colorsKeys = ["pink",'blue','green','grey','red'];
            function getGraphColor(index) {
                let color = colors[colorsKeys[parseInt(index/2)]][index%2];
                return color;
            }
        </script>
    </body>
</html>

效果圖

某站點用戶訪問來源餅狀圖

代碼

option = {
    aria: {
        show: true
    },
    title: {
        text: '某站點用戶訪問來源',
        x: 'center'
    },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            data: [
                { value: 335, name: '直接訪問' },
                { value: 310, name: '郵件營銷' },
                { value: 234, name: '聯盟廣告' },
                { value: 135, name: '視頻廣告' },
                { value: 1548, name: '搜索引擎' }
            ]
        }
    ]
};

ECharts筆記

ECharts筆記

簡介

快速入門

使用echarts

搭建骨架

構建option對象

option對象解析

titile

legend

xAxis與yAxis x與y軸

dataZoom

visualMap

示例

鼠標事件的處理

點擊柱狀圖後打開相應的百度搜索頁面的示例

組件交互的行爲事件

代碼觸發 ECharts 中組件的行爲

官網圖介紹與實例

實例

瀟湘閣2020年銷售數據

代碼

效果圖

hystrix bashboard

代碼

效果圖

某站點用戶訪問來源 餅狀圖

代碼

效果圖

資料文獻

某站點用戶訪問來源餅狀圖