初識(shí)Echarts:
Echarts--商業(yè)級(jí)數(shù)據(jù)圖表:商業(yè)級(jí)數(shù)據(jù)圖表，它是一個(gè)純JavaScript的圖標(biāo)庫(kù)，兼容絕大部分的瀏覽器，底層依賴輕量級(jí)的canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
Echarts支持的圖表？
折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）
雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表
優(yōu)缺點(diǎn):
echarts的優(yōu)點(diǎn)：
1.國(guó)人開發(fā)，文檔全，便于開發(fā)和閱讀文檔。
2.圖表豐富，可以適用各種各樣的功能。
echarts的缺點(diǎn)：
移動(dòng)端使用略卡
快速上手:(基于 webpack和 vue 和 angular 項(xiàng)目 中使用 ECharts)
確保安裝 Node , npm
1.npm install echarts --save
2.如何應(yīng)用在項(xiàng)目中?
(1).可以直接在項(xiàng)目代碼中 require('echarts') 得到 ECharts。
(2).通過(guò) import echarts from 'echarts' 引入 可以全局注冊(cè),也可以按需引入,以個(gè)人實(shí)際應(yīng)用為主
全局注冊(cè):
(1)vue項(xiàng)目
在main.js中導(dǎo)入echarts, 在Vue實(shí)例直接注冊(cè)應(yīng)用
(Vue.prototype.echarts = echarts. ) 在具體的vue文件中,初始化圖表容器的時(shí)候直接使用.
(2)angular項(xiàng)目
在所需ts文件中直接引入
import * as echarts from 'echarts';
局部注冊(cè)(vue項(xiàng)目和angular項(xiàng)目道理一樣)
在你當(dāng)前要使用圖標(biāo)的文件中直接引用
import echarts from 'echarts/lib/echarts' //引入Echarts主模塊
import bar from 'echarts/lib/chart/bar' // 引入柱狀圖
初始化圖表
在繪畫圖表之前,我們需要一個(gè)帶有寬高的容器來(lái)放置我們的內(nèi)容,以下是三個(gè)簡(jiǎn)單的容器(分別對(duì)應(yīng)柱狀圖,線性圖,雷達(dá)圖)
<div id="temBar" class="barStyle"></div>
<div id="temLine" class="lineStyle"></div>
<div id="temRadar" class="radarStyle"></div>
如果直接要在生命周期中初始化,在vue項(xiàng)目和angular項(xiàng)目中獲取容器不同的地方是vue在mounted鉤子中,angular是在ngAfterViewInit鉤子中,共同的特點(diǎn)都是在視圖初始化之后調(diào)用,通俗一點(diǎn),就是我們獲取的容器dom加載完成之后去實(shí)例化我們的echrtas圖表.
下來(lái)我們看一下在vue和angular中實(shí)例化的過(guò)程和效果
vue代碼:()
mounted () {
this.drawLine()
},
methods: {
drawLine () {
let myChart = this.echarts.init(document.getElementById('myChart'))
myChart.setOption({
title: {
text: 'Average BMI by District Last Year'
},
tooltip: {},
xAxis: {
data: [
'Lamwo',
'Kitgum',
'Amuru',
'Nwoya',
'Gulu',
'Pader',
'Agago',
'Oyam',
'Kile',
'Lira',
'Aletyong',
'Otuke',
'Alebtong',
'Apac',
'Dokolo',
'Amolatar'
]
},
yAxis: {},
series: [
{
name: 'Average BMI',
type: 'bar',
data: this.data
}
]
})
},
},
angular初始化(主要以angular為主,對(duì)應(yīng)上邊三個(gè)對(duì)應(yīng)容器):
ngOnInit() {
this.temBarData();
this.temLineData();
this.temRadarData();
}
柱狀圖:
temBarData() {
const barChart = echarts.init(document.getElementById('temBar'));
barChart.setOption({
title : {
text: 'total',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
show: false,
data: ['total']
},
toolbox: {
show: true,
feature: {}
},
calculable: true,
xAxis : [
{
type : 'category',
data : ['BarA', 'BarB', 'BarC', 'BarD', 'BarE', 'BarF', 'BarG', 'BarH', 'BarI', 'BarJ', 'BarK', 'BarL']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: 'total',
type: 'bar',
data: [15.0, 16.0, 32.0, 20.0, 6.0, 13.0, 2.0, 6.0, 7.0, 12.0, 22.0, 13.0 ],
itemStyle: {
//此處是echarts4動(dòng)態(tài)循環(huán)顏色數(shù)組的方法,echarts3的寫法是講color方法寫在normal:{}對(duì)象中,多了一層屬性嵌套
color: function(params) {
const colorList = ['#0278FF', '#3EB177', '#FFBB32', '#6058DF', '#FF3976', '#749f83', '#ca8622'];
if (params.dataIndex >= colorList.length) {
params.dataIndex = params.dataIndex - colorList.length;
}
return colorList[params.dataIndex];
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
});
}
對(duì)應(yīng)效果:
折線圖:
temLineData() {
const lineChart = echarts.init(document.getElementById('temLine'));
lineChart.setOption({
title: {
text: 'total(month)',
},
tooltip: {
trigger: 'axis'
},
legend: {
show: false,
orient: 'horizontal',
data: ['LineA', 'LineB', 'LineC', 'LineD', 'LineE']
},
grid: {
left: '3%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'LineA',
type: 'line',
stack: '總量',
data: [230, 210, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90]
},
{
name: 'LineB',
type: 'line',
stack: '總量',
data: [330, 310, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290]
},
{
name: 'LineC',
type: 'line',
stack: '總量',
data: [410, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330]
},
{
name: 'LineD',
type: 'line',
stack: '總量',
data: [320, 101, 134, 90, 230, 210, 320, 332, 301, 334, 390, 330]
},
{
name: 'LineE',
type: 'line',
stack: '總量',
data: [1320, 101, 134, 90, 230, 210, 820, 932, 901, 934, 1290, 1330]
}
]
});
}
效果:
雷達(dá)圖:
temRadarData() {
const radarChart = echarts.init(document.getElementById('temRadar'));
radarChart.setOption({
title: {
text: 'total'
},
tooltip: {},
legend: {
data: ['違規(guī)總次數(shù)（Actual Spending)']
},
radar: {
name: {
textStyle: {
color: 'red',
backgroundColor: '#ccc',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: 'RadarA', max: 500, color: 'red'},
{ name: 'RadarB', max: 500, color: 'yellow'},
{ name: 'RadarC', max: 500, color: 'green'},
{ name: 'RadarD', max: 500, color: 'blue'},
{ name: 'RadarE', max: 500, color: 'purple'},
]
},
series: [{
name: '（Budget vs spending）',
type: 'radar',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 處的顏色
}, {
offset: 1, color: 'blue' // 100% 處的顏色
}],
global: false // 缺省為 false
},
borderColor: 'red',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
data : [
{
value : [310, 420, 210, 200, 320, 280],
name : 'Actual Spending）'
}
]
}],
});
}
效果:
以上為echrts在項(xiàng)目中簡(jiǎn)單引入并且初始化圖表實(shí)例的過(guò)程,具體的效果和用法大家可以自己嘗試一下.
常用Echrts屬性小結(jié):
title:標(biāo)題
1.id
2.show:true(boolean默認(rèn)) ---標(biāo)題是否展示
3.text(string)---主標(biāo)題的文本內(nèi)容
4.link(string) ---主標(biāo)題超鏈接
5.target(string)---指定窗口打開主題超鏈接(self:當(dāng)前窗口打開,blank:新窗口打開)
6.textStyle(object)---主標(biāo)題樣式(字體,顏色相關(guān))
7.subtext(string)---副標(biāo)題文本
8.sublink(string)---副標(biāo)題超鏈接
9.subtarget(string)---副標(biāo)題指定窗口打開主題
10.subtextStyle(object)---副標(biāo)題樣式
11.subtext(string)---副標(biāo)題文本
12.textAlign(string)---整體標(biāo)題水平對(duì)齊方式(包括主標(biāo)題,副標(biāo)題)
13.textVerticalAlign(string)---整體標(biāo)題垂直對(duì)齊方式
14.triggerEvent(boolean)---是否觸發(fā)事件
15.padding(number)---標(biāo)題內(nèi)邊距
16.itemGap(number)---主副標(biāo)題間距
17.background(string)---背景顏色
18.left,right,top,bottom(string,number)
legend:圖例組件
1.type(string)---'plain':普通圖例;'scroll':可滾動(dòng)翻頁(yè)的圖例
2.id(string)--- 默認(rèn)不指定
3.show(boolean)---是否展示圖例(默認(rèn)為:true)
4.left,top.bottom.right(string,number)---圖例組件在容器中的位置設(shè)置
5.width,height(string,number)---圖例的寬高度設(shè)置
6.orient(string)---圖例圖標(biāo)的布局朝向('horizontal';'vertical')
7.itemGap(number)---圖例之間的間距
8.itemWidth,itemHeight(number)---圖例標(biāo)記的圖形寬高
9.inactiveColor(string) --- 圖例關(guān)閉時(shí)候的顏色
10.textStyle(object)----圖例的公用文本樣式
11.symbolKeepAspect(boolean)---如果圖標(biāo)（可能來(lái)自系列的 symbol 或用戶自定義的 legend.data.icon）是 path:// 的形式，是否在縮放時(shí)保持該圖形的長(zhǎng)寬比。
12.selected(object)---圖例選中狀態(tài)表。(selected:{'系列1':true,'系列2':false})
13.backgroundColor(string)---背景色
grid:網(wǎng)格設(shè)置
1.id(string)
2.show(boolean)---是否展示
3.left,top,bottom,right(steing,number)---容器內(nèi)設(shè)置位置
4.width,height(string,number)---grid組件的寬高
5.containLabel(boolean)---grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽。
6.backgroundColor(string)---背景顏色
7.borderWidth(number)---網(wǎng)格的邊框線寬度
8.borderColor(color)---網(wǎng)格的邊框顏色
xAxis:x軸設(shè)置
1.id(string)
2.show(boolean)---是否展示x軸
3.gridIndex(number)---x 軸所在的 grid 的索引，默認(rèn)位于第一個(gè) grid。
4.position(string) ---x 軸的位置。('top','bottom')默認(rèn) grid 中的第一個(gè) x 軸在 grid 的下方（'bottom'），第二個(gè) x 軸視第一個(gè) x 軸的位置放在另一側(cè)。
5.offset(number)---X 軸相對(duì)于默認(rèn)位置的偏移，在相同的 position 上有多個(gè) X 軸的時(shí)候有用。
6.type(string)---坐標(biāo)軸類型
'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
'category' 類目軸，適用于離散的類目數(shù)據(jù)，為該類型時(shí)必須通過(guò) data 設(shè)置類目數(shù)據(jù)。
'time' 時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同，例如會(huì)根據(jù)跨度的范圍來(lái)決定使用月，星期，日還是小時(shí)范圍的刻度。
'log' 對(duì)數(shù)軸。適用于對(duì)數(shù)數(shù)據(jù)。
7.name(string) --- 坐標(biāo)軸名稱
8.nameLocation(string) --- 坐標(biāo)軸顯示位置('start','middle'或者'center','end')
9.nameTextStyle(object)---坐標(biāo)軸名稱的文字樣式
10.nameGap(number)---坐標(biāo)軸名稱與軸線之間的距離。默認(rèn) 是15
11.nameRotate(number)---坐標(biāo)軸名字旋轉(zhuǎn)角度值
12.inverse(boolean)---是否反向坐標(biāo)軸
13.boundaryGap(boolean)---設(shè)置坐標(biāo)軸兩側(cè)留白
14.min(number, string, function)---坐標(biāo)軸刻度最小值。
可以設(shè)置成特殊值 'dataMin'，此時(shí)取數(shù)據(jù)在該軸上的最小值作為最小刻度。
不設(shè)置時(shí)會(huì)自動(dòng)計(jì)算最小值保證坐標(biāo)軸刻度的均勻分布。
在類目軸中，也可以設(shè)置為類目的序數(shù)（如類目軸 data: ['類A', '類B', '類C'] 中，序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(shù)，如 -3）。
當(dāng)設(shè)置成 function 形式時(shí)，可以根據(jù)計(jì)算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如：
min: function(value) {
return value.min - 20;
}
15.max(number, string, function)---坐標(biāo)軸刻度最大值。
16.scale(boolean)---是否是脫離0值比例
只在數(shù)值軸中（type: 'value'）有效。
是否是脫離 0 值比例。設(shè)置成 true 后坐標(biāo)刻度不會(huì)強(qiáng)制包含零刻度。在雙數(shù)值軸的散點(diǎn)圖中比較有用。
在設(shè)置 min 和 max 之后該配置項(xiàng)無(wú)效。
17.minInterval,maxInterval(number)---自動(dòng)計(jì)算的坐標(biāo)軸最小,最大間隔。
自動(dòng)計(jì)算的坐標(biāo)軸最小間隔大小。
例如可以設(shè)置成1保證坐標(biāo)軸分割刻度顯示成整數(shù)。
{
minInterval: 1
}
只在數(shù)值軸或時(shí)間軸中（type: 'value' 或 'time'）有效。
例如，在時(shí)間軸（（type: 'time'））可以設(shè)置成 3600 * 24 * 1000 保證坐標(biāo)軸分割刻度最大為一天。
{
maxInterval: 3600 * 24 * 1000
}
只在數(shù)值軸或時(shí)間軸中（type: 'value' 或 'time'）有效。
18.axisLine(object)---坐標(biāo)軸線設(shè)置
19.axisLabel(object)---坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
