簡單記錄一下在項目中使用全過程中遇到了的問題以及踩坑了不熟悉的配置項创橄。前期使用發(fā)現(xiàn)配置項太多了烘跺，一臉懵逼闹击，后來發(fā)現(xiàn)在實例上試配置項熟悉的快一些。以下是使用過程中摘抄官網(wǎng)以及實際使用記錄凹联。
還有很多沒有了解的待以后慢慢學(xué)習(xí)
一沐兰、簡單上手echart圖表
1.獲取ECharts.
可以通過以下4種方式獲取。
1.官網(wǎng)下載界面
目前主要使用到了其中的 方法一：從 npm 安裝蔽挠。npm install echarts3.通過 npm 獲取 echarts住闯，
npm install echarts --save，詳見“在 webpack 中使用 echarts”4.cdn引入
2.引入 ECharts
3.繪制圖表
- 在繪圖前我們需要為 ECharts 準(zhǔn)備一個具備高寬的 DOM 容器澳淑。
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大斜仍（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼偶惠。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大写菏佟（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表忽孽。
myChart.setOption(option);
</script>
</body>
</html>
二绑改、在vue項目中的使用
-
-
npm安裝echarts
在3.1.1版本之前 ECharts 在 npm 上的 package 是非官方維護(hù)的，從3.1.1開始由官方 EFE 維護(hù) npm 上 ECharts 和 zrender 的 package兄一。
使用如下命令通過 npm 安裝 ECharts:
npm install echarts --save -
- 通過 npm 安裝的 echarts 會出現(xiàn)在 myProject/node_modules 目錄下厘线，從而可以直接在項目代碼中得到 echarts，例如：
- 2.1. 使用 CommonJS - require得到echarts(引入的是全部
var echarts = require('echarts')
var echarts = require('echarts');
// 基于準(zhǔn)備好的dom出革，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
title: { text: 'ECharts 入門示例' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
- 2.2 引入Echarts使用 ES Module 得到echarts
import * as echarts from 'echarts';
三造壮、具體使用
1、繪制餅狀圖像：
-
配置項屬性
-
avoidLabel- avoidLabelOverlap -
labelLine- [labelLine](https://www.echartsjs.com/zh/option.html#series- pie.labelLine). 標(biāo)簽的視覺引導(dǎo)線樣式骂束，在 label 位置 設(shè)置為'outside'的時候會顯示視覺引導(dǎo)線
3.
legend- legend
圖例組件. 展現(xiàn)了不同系列的標(biāo)記(symbol)耳璧，顏色和名字≌瓜洌可以通過點擊圖例控制哪些系列不顯示旨枯。
image.png系列的顏色。
只能自己設(shè)置顏色數(shù)組進(jìn)而去修改混驰。color. 調(diào)色盤顏色列表攀隔。如果系列沒有設(shè)置顏色皂贩，則會依次循環(huán)從該列表中取顏色作為系列顏色。
-
tooltip. tooltip
提示框組件昆汹。tooltip.trigger string
[ default: 'item' ]
觸發(fā)類型明刷。
可選：(如下3個）
' item '
數(shù)據(jù)項圖形觸發(fā)，主要在散點圖满粗，餅圖等無類目軸的圖表中使用辈末。'axis'
坐標(biāo)軸觸發(fā)，主要在柱狀圖败潦，折線圖等會使用類目軸的圖表中使用本冲。
在 ECharts 2.x 中只支持類目軸上使用 axis trigger准脂，在 ECharts 3 中支持在 直角坐標(biāo)系和極坐標(biāo)系上的所有類型的軸劫扒。并且可以通過 axisPointer.axis 指定坐標(biāo)軸。
-
'none'什么都不觸發(fā)狸膏。
-
tooltip.**formatter**- tooltip.formatter
tooltip.formatter string, Function
提示框浮層內(nèi)容格式器沟饥，支持字符串模板和回調(diào)函數(shù)兩種形式。
1. 字符串模板
-
模板變量有 {a}, 湾戳贤旷，{c}，lblpeg2砾脑，{e}幼驶，分別表示系列名，數(shù)據(jù)名韧衣，數(shù)據(jù)值等盅藻。 在 trigger 為 'axis' 的時候，會有多個系列的數(shù)據(jù)畅铭，此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引氏淑。 不同圖表類型下的 {a}，硕噩假残，{c}，urxpe21 含義不一樣炉擅。 其中變量{a}, 辉懒, {c}, lihllrp在不同圖表類型下代表數(shù)據(jù)含義為：
折線（區(qū)域）圖、柱狀（條形）圖谍失、K線圖 :
{a}（系列名稱）眶俩，（類目值）袱贮，{c}（數(shù)值）,xxxmqwy（無）散點圖（氣泡）圖 :
{a}（系列名稱）仿便，体啰（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組）,v2cbj32（無）地圖 :
{a}（系列名稱）嗽仪，荒勇（區(qū)域名稱），{c}（合并數(shù)值）,jnnnmpn（無）餅圖闻坚、儀表盤沽翔、漏斗圖:
{a}（系列名稱），窿凤（數(shù)據(jù)項名稱）仅偎，{c}（數(shù)值）,paaptrp（百分比）
更多其它圖表模板變量的含義可以見相應(yīng)的圖表的 label.formatter 配置項。
示例：
formatter: '{b0}: {c0}<br />{b1}: {c1}'
2, 回調(diào)函數(shù)
回調(diào)函數(shù)格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一個參數(shù) params 是 formatter 需要的數(shù)據(jù)集雳殊。格式如下：
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據(jù)名橘沥，類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// 傳入的數(shù)據(jù)值。在多數(shù)系列下它和 data 相同夯秃。在一些系列下是 data 中的分量（如 map座咆、radar 中）
value: number|Array|Object,
// 坐標(biāo)軸 encode 映射信息，
// key 為坐標(biāo)軸（如 'x' 'y' 'radius' 'angle' 等）
// value 必然為數(shù)組仓洼，不會為 null/undefied介陶，表示 dimension index 。
// 其內(nèi)容如：
// {
// x: [2] // dimension index 為 2 的數(shù)據(jù)映射到 x 軸
// y: [0] // dimension index 為 0 的數(shù)據(jù)映射到 y 軸
// }
encode: Object,
// 維度名列表
dimensionNames: Array<String>,
// 數(shù)據(jù)的維度 index色建，如 0 或 1 或 2 ...
// 僅在雷達(dá)圖中使用哺呜。
dimensionIndex: number,
// 數(shù)據(jù)圖形的顏色
color: string,
// 餅圖的百分比
percent: number,
注：encode 和 dimensionNames 的使用方式，例如：
如果數(shù)據(jù)為：
dataset: {
source: [
['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]
]
}
則可這樣得到 y 軸對應(yīng)的 value：
params.value[params.encode.y[0]]
如果數(shù)據(jù)為：
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
}
等等箕戳。某残。。
-
grid漂羊。
直角坐標(biāo)系內(nèi)繪圖網(wǎng)格驾锰，單個 grid 內(nèi)最多可以放置上下兩個 X 軸，左右兩個 Y 軸走越⊥衷ィ可以在網(wǎng)格上繪制折線圖，柱狀圖旨指，散點圖（氣泡圖）赏酥。
在 ECharts 2.x 里單個 echarts 實例中最多只能存在一個 grid 組件，在 ECharts 3 中可以存在任意個 grid 組件谆构。
-
xAxis.boundaryGap-----boundaryGap
控制x軸坐標(biāo)位置裸扶。
坐標(biāo)軸兩邊留白策略，類目軸和非類目軸的設(shè)置和表現(xiàn)不一樣搬素。（category-類目）
// boundaryGap值為false的時候呵晨，折線第一個點在y軸上
boundaryGap: false,
echarts-設(shè)置折線樣式和X軸和Y軸的分割線樣式
//GMV近30天變化趨勢
trendOption: {
color: '#4359B7',
title: {
text: '支付訂單的訂單實付金額的總和',
bottom: 8,
left: 300,
textStyle: {
color: '#999',
fontWeight: 'narmal'
}
},
tooltip: {
trigger: 'axis',
formatter: '闽坡(一)<br/> {a} : {c}',
backgroundColor: '#fff',
borderColor: '#4359B7',
borderWidth: 1,
textStyle: {
color: '#666'
},
padding:[8,14]
},
xAxis: {
data: [],
type: 'category',
splitNumber: 10,
interval: 50, //強(qiáng)制設(shè)置坐標(biāo)軸分割間隔
// boundaryGap: false,
nameGap: 26,
// nameTextStyle: {
// padding: [4,5,6,7], //上 右 下 左
// shadowColor: '#f00',
// width: '100px'
// },
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: '#CCCCCC'
}
},
axisLabel: {
color: '#999'
}
},
yAxis: {
type: 'value',
data: [],
scale: true, //是否脫離0值
splitLine: { //分割線
show: true ,
lineStyle: {
color:'#ccc',
width: 1,
type: 'dotted'
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 1, //這里是為了突出顯示加上的
}
},
axisLabel: {
color: '#999'
},
// axisPointer: {
// label: {
// formatter: function (params) {
// return '降水量 ' + params.value
// + (params.seriesData.length );
// }
// }
// },
},
series: [{
name: '支付訂單的訂單實付金額的總和 ',
type: 'line',
data: [],
symbolSize: 6, //設(shè)置拐點大小
symbol:'circle', // 設(shè)置拐點為實心圓
// markLine: {
// silent: true,
// symbol: ['none', 'none'],
// data: [{
// yAxis: 0
// }, {
// yAxis: 2
// }, {
// yAxis: 4
// }, {
// yAxis: 6
// }, {
// yAxis: 8
// },{
// yAxis: 10
// }, {
// yAxis: 12
// }]
// }
}]
},
類目軸中 boundaryGap 可以配置為 true 和 false愚臀。默認(rèn)為 true，這時候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間掖棉。
非類目軸咙边，包括時間狐粱，數(shù)值拒啰，對數(shù)軸，boundaryGap是一個兩個值的數(shù)組胯舷，分別表示數(shù)據(jù)最小值和最大值的延伸范圍刻蚯，可以直接設(shè)置數(shù)值或者相對的百分比，在設(shè)置 min 和 max 后無效桑嘶。 示例：
boundaryGap: ['20%', '20%']
xAxis: {
// type: 'category', (類目
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
??好像有的不起作用炊汹。存疑
-
xAxis.axisTick.alignWithLabel- axisTick.alignWithLabel
[ default: false ]
類目軸中在boundaryGap為true的時候有效，可以保證刻度線和標(biāo)簽對齊不翩。如下圖：
image xAxis.axisLine.onZero boolean- xAxis.axisLine.onZero
xAxis.axisLine.onZero boolean
[ default: true ]
X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上兵扬，只有在另一個軸為數(shù)值軸且包含 0 刻度時有效麻裳。-
xAxis.axisLine.symbol string- xAxis.axisLine.symbol stringxAxis.axisLine.symbol string, Array[ default: 'none' ]
軸線兩邊的箭頭口蝠。可以是字符串津坑，表示兩端使用同樣的箭頭妙蔗；或者長度為 2 的字符串?dāng)?shù)組，分別表示兩端的箭頭疆瑰。默認(rèn)不顯示箭頭眉反，即 'none'。兩端都顯示箭頭可以設(shè)置為 'arrow'穆役，只在末端顯示箭頭可以設(shè)置為 ['none', 'arrow']寸五。
xAxis.axisLine.lineStyle- xAxis.axisLine.lineStyle
xAxis.axisLine.lineStyle.color Color
[ default: '#333' ]
坐標(biāo)軸線線的顏色。xAxis.axisTick.lineStyle.color- xAxis.axisTick.lineStyle.colo
xAxis.axisTick.lineStyle.color Color
刻度線的顏色耿币，默認(rèn)取 axisLine.lineStyle.color梳杏。
-
xAxis.axisLabel.formatter
xAxis.axisLabel.formatter string, Function
[ default: null ]
刻度標(biāo)簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式淹接。
示例:
// 使用字符串模板十性，模板變量為刻度默認(rèn)標(biāo)簽 {value}
formatter: '{value} kg'
// 使用函數(shù)模板，函數(shù)參數(shù)分別為刻度數(shù)值（類目）塑悼，刻度的索引
formatter: function (value, index) {
// 格式化成月/日劲适，只在第一個刻度顯示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
-
xAxis.axisLabel- xAxis.axisLabel
xAxis.axisLabel.color Color, Function
刻度標(biāo)簽文字的顏色，默認(rèn)取 axisLine.lineStyle.color厢蒜。支持回調(diào)函數(shù)霞势，格式如下
(val: string) => Color
參數(shù)是標(biāo)簽的文本烹植，返回顏色值，如下示例：
textStyle: {
color: function (value, index) {
return value >= 0 ? 'green' : 'red';
}
}
- 控制y軸坐標(biāo)折線虛線展示愕贡。
yAxis: {
// splitLine: {
// show: false
// }
},
虛線展示：
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
markLine: {
silent: true,
data: [{
yAxis: 300
}, {
yAxis: 600
}, {
yAxis: 900
}, {
yAxis: 1200
}, {
yAxis: 1500
}]
}
}]
});
折線圖 ：折線圖
折線圖中x坐標(biāo)軸展示：
情況一：
情況二：
折線圖中y軸
以上為第一次在項目中使用echarts圖表不完全小結(jié)刊橘。
