初識Echarts:
Echarts--商業(yè)級數(shù)據(jù)圖表:商業(yè)級數(shù)據(jù)圖表仰美，它是一個純JavaScript的圖標庫持隧，兼容絕大部分的瀏覽器，底層依賴輕量級的canvas類庫ZRender，提供直觀雨膨，生動，可交互扔茅，可高度個性化定制的數(shù)據(jù)可視化圖表已旧。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖召娜、值域漫游等特性大大增強了用戶體驗运褪，賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力玖瘸。
Echarts支持的圖表秸讹？
折線圖（區(qū)域圖）、柱狀圖（條狀圖）雅倒、散點圖（氣泡圖）璃诀、K線圖、餅圖（環(huán)形圖）
雷達圖（填充雷達圖）蔑匣、和弦圖劣欢、力導向布局圖、地圖裁良、儀表盤凿将、漏斗圖、事件河流圖等12類圖表
優(yōu)缺點:
echarts的優(yōu)點：
1.國人開發(fā)趴久，文檔全丸相，便于開發(fā)和閱讀文檔。
2.圖表豐富彼棍，可以適用各種各樣的功能灭忠。
echarts的缺點：
移動端使用略卡
快速上手:(基于 webpack和 vue 和 angular 項目 中使用 ECharts)
確保安裝 Node , npm
1.npm install echarts --save
2.如何應用在項目中?
(1).可以直接在項目代碼中 require('echarts') 得到 ECharts。
(2).通過 import echarts from 'echarts' 引入 可以全局注冊,也可以按需引入,以個人實際應用為主
全局注冊:
(1)vue項目
在main.js中導入echarts, 在Vue實例直接注冊應用
(Vue.prototype.echarts = echarts. ) 在具體的vue文件中,初始化圖表容器的時候直接使用.
(2)angular項目
在所需ts文件中直接引入
import * as echarts from 'echarts';
局部注冊(vue項目和angular項目道理一樣)
在你當前要使用圖標的文件中直接引用
import echarts from 'echarts/lib/echarts' //引入Echarts主模塊
import bar from 'echarts/lib/chart/bar' // 引入柱狀圖
初始化圖表
在繪畫圖表之前,我們需要一個帶有寬高的容器來放置我們的內(nèi)容,以下是三個簡單的容器(分別對應柱狀圖,線性圖,雷達圖)
<div id="temBar" class="barStyle"></div>
<div id="temLine" class="lineStyle"></div>
<div id="temRadar" class="radarStyle"></div>
如果直接要在生命周期中初始化,在vue項目和angular項目中獲取容器不同的地方是vue在mounted鉤子中,angular是在ngAfterViewInit鉤子中,共同的特點都是在視圖初始化之后調(diào)用,通俗一點,就是我們獲取的容器dom加載完成之后去實例化我們的echrtas圖表.
下來我們看一下在vue和angular中實例化的過程和效果
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為主,對應上邊三個對應容器):
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動態(tài)循環(huán)顏色數(shù)組的方法,echarts3的寫法是講color方法寫在normal:{}對象中,多了一層屬性嵌套
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: '平均值'}
]
}
}
]
});
}
對應效果:
折線圖:
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]
}
]
});
}
效果:
雷達圖:
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在項目中簡單引入并且初始化圖表實例的過程,具體的效果和用法大家可以自己嘗試一下.
常用Echrts屬性小結(jié):
title:標題
1.id
2.show:true(boolean默認) ---標題是否展示
3.text(string)---主標題的文本內(nèi)容
4.link(string) ---主標題超鏈接
5.target(string)---指定窗口打開主題超鏈接(self:當前窗口打開,blank:新窗口打開)
6.textStyle(object)---主標題樣式(字體,顏色相關(guān))
7.subtext(string)---副標題文本
8.sublink(string)---副標題超鏈接
9.subtarget(string)---副標題指定窗口打開主題
10.subtextStyle(object)---副標題樣式
11.subtext(string)---副標題文本
12.textAlign(string)---整體標題水平對齊方式(包括主標題,副標題)
13.textVerticalAlign(string)---整體標題垂直對齊方式
14.triggerEvent(boolean)---是否觸發(fā)事件
15.padding(number)---標題內(nèi)邊距
16.itemGap(number)---主副標題間距
17.background(string)---背景顏色
18.left,right,top,bottom(string,number)
legend:圖例組件
1.type(string)---'plain':普通圖例;'scroll':可滾動翻頁的圖例
2.id(string)--- 默認不指定
3.show(boolean)---是否展示圖例(默認為:true)
4.left,top.bottom.right(string,number)---圖例組件在容器中的位置設置
5.width,height(string,number)---圖例的寬高度設置
6.orient(string)---圖例圖標的布局朝向('horizontal';'vertical')
7.itemGap(number)---圖例之間的間距
8.itemWidth,itemHeight(number)---圖例標記的圖形寬高
9.inactiveColor(string) --- 圖例關(guān)閉時候的顏色
10.textStyle(object)----圖例的公用文本樣式
11.symbolKeepAspect(boolean)---如果圖標（可能來自系列的 symbol 或用戶自定義的 legend.data.icon）是 path:// 的形式座硕，是否在縮放時保持該圖形的長寬比弛作。
12.selected(object)---圖例選中狀態(tài)表。(selected:{'系列1':true,'系列2':false})
13.backgroundColor(string)---背景色
grid:網(wǎng)格設置
1.id(string)
2.show(boolean)---是否展示
3.left,top,bottom,right(steing,number)---容器內(nèi)設置位置
4.width,height(string,number)---grid組件的寬高
5.containLabel(boolean)---grid 區(qū)域是否包含坐標軸的刻度標簽华匾。
6.backgroundColor(string)---背景顏色
7.borderWidth(number)---網(wǎng)格的邊框線寬度
8.borderColor(color)---網(wǎng)格的邊框顏色
xAxis:x軸設置
1.id(string)
2.show(boolean)---是否展示x軸
3.gridIndex(number)---x 軸所在的 grid 的索引映琳，默認位于第一個 grid。
4.position(string) ---x 軸的位置蜘拉。('top','bottom')默認 grid 中的第一個 x 軸在 grid 的下方（'bottom'）萨西，第二個 x 軸視第一個 x 軸的位置放在另一側(cè)。
5.offset(number)---X 軸相對于默認位置的偏移旭旭，在相同的 position 上有多個 X 軸的時候有用谎脯。
6.type(string)---坐標軸類型
'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)持寄。
'category' 類目軸源梭，適用于離散的類目數(shù)據(jù)娱俺，為該類型時必須通過 data 設置類目數(shù)據(jù)。
'time' 時間軸废麻，適用于連續(xù)的時序數(shù)據(jù)荠卷，與數(shù)值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同烛愧，例如會根據(jù)跨度的范圍來決定使用月油宜，星期，日還是小時范圍的刻度屑彻。
'log' 對數(shù)軸验庙。適用于對數(shù)數(shù)據(jù)。
7.name(string) --- 坐標軸名稱
8.nameLocation(string) --- 坐標軸顯示位置('start','middle'或者'center','end')
9.nameTextStyle(object)---坐標軸名稱的文字樣式
10.nameGap(number)---坐標軸名稱與軸線之間的距離社牲。默認 是15
11.nameRotate(number)---坐標軸名字旋轉(zhuǎn)角度值
12.inverse(boolean)---是否反向坐標軸
13.boundaryGap(boolean)---設置坐標軸兩側(cè)留白
14.min(number, string, function)---坐標軸刻度最小值。
可以設置成特殊值 'dataMin'悴了，此時取數(shù)據(jù)在該軸上的最小值作為最小刻度搏恤。
不設置時會自動計算最小值保證坐標軸刻度的均勻分布。
在類目軸中湃交，也可以設置為類目的序數(shù)（如類目軸 data: ['類A', '類B', '類C'] 中熟空，序數(shù) 2 表示 '類C'。也可以設置為負數(shù)搞莺，如 -3）息罗。
當設置成 function 形式時，可以根據(jù)計算得出的數(shù)據(jù)最大最小值設定坐標軸的最小值才沧。如：
min: function(value) {
return value.min - 20;
}
15.max(number, string, function)---坐標軸刻度最大值迈喉。
16.scale(boolean)---是否是脫離0值比例
只在數(shù)值軸中（type: 'value'）有效。
是否是脫離 0 值比例温圆。設置成 true 后坐標刻度不會強制包含零刻度挨摸。在雙數(shù)值軸的散點圖中比較有用。
在設置 min 和 max 之后該配置項無效岁歉。
17.minInterval,maxInterval(number)---自動計算的坐標軸最小,最大間隔得运。
自動計算的坐標軸最小間隔大小。
例如可以設置成1保證坐標軸分割刻度顯示成整數(shù)锅移。
{
minInterval: 1
}
只在數(shù)值軸或時間軸中（type: 'value' 或 'time'）有效熔掺。
例如，在時間軸（（type: 'time'））可以設置成 3600 * 24 * 1000 保證坐標軸分割刻度最大為一天非剃。
{
maxInterval: 3600 * 24 * 1000
}
只在數(shù)值軸或時間軸中（type: 'value' 或 'time'）有效置逻。
18.axisLine(object)---坐標軸線設置
19.axisLabel(object)---坐標軸刻度標簽的相關(guān)設置。
