1. 引入Echarts
Echarts是基於canvas的數據可視化產品，由百度公司推出
參考官方文檔，引入教程示例即可，注意有兩種引入方式：
（1）直接引入
（2）模塊化引入
2. 基本API使用
（1）設置整個圖表的大小位置使用grid屬性
grid: { 設置圖標整體的大小
// x: '20%', x,y表示左上角的相對位置，
// y: 100,
// x2: 200, x2,y2表示右下角的相對位
// y2: 100,
width: '50%', 寬度設置
left: '30%', left設置
// containLabel: true
},
（2）坐標軸xAxis、yAxis
xAxis: {
show: true, 設置顯示隱藏坐標軸
type: 'category', 設置坐標軸類型，共category，value，time三種類型
boundaryGap: true, 設置是否在圖形開始處於y軸留有間距
// position:'top', 設置x軸的位置在頂端
axisLine: {
onZero: false, 設置x軸不以y軸的0點開始
lineStyle: { 設置 x軸的樣式
color: 'red',
width: 2,
type: 'solid'
}
},
axisTick: {
show: true, 設置x軸上標點顯示
length: 10, 設置x軸上標點顯示長度
lineStyle: { 設置x軸上標點顯示樣式
color: 'red',
width: 2,
type: 'solid'
}
},
axisLabel: { 設置標點內容顯示樣式
show: true,
rotate: 45, 設置標點內容45度傾斜顯示
margin: 30,
textStyle: {
color: 'blue',
fontFamily: '微軟雅黑'
},
formatter: function(val) { 設置顯示data中的內容，可以傳函數val是data中元素
return val + '函數'
}
},
splitLine: { 設置x軸標點分割線樣式
show: true,
lineStyle: {
color: 'skyblue',
type: 'dashed',
width: 1
}
},
splitArea: { 設置x軸標點分割區域樣式
show: true,
},
name: '星期',
data: ['周一', '周二', { 可以將數據設置成對象，單獨設置樣式
value: '周三',
textStyle: {
color: 'red',
fontSize: 30,
fontWeight: 'bold'
}
}, '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
max: 20, 設置y軸的最大值
axisLabel: {
formatter: '{value} °C'
}
},
（3）數據顯示series
① 折線顯示
series: [{
name: '最低氣溫',
type: 'line', 設置數據顯示為折線
symbol: 'image://https://www.baidu.com/img/bd_logo1.png',
設置折線上標記點的樣式，可以引用圖片，也可以寫star
symbolSize: 30, 設置標記大小
showAllSymbol: true, 設置顯示所有標記
smooth: true, 設置折線圖平滑顯示
legendHoverLink: false, 關閉選擇不同折線圖時的高亮效果
data: [1, -2, 2, 5, { 單獨設置某個數據的樣式
value: 3,
symbolSize: 50
}, 2, 0],
itemStyle: { 設置折線圖的樣式
normal: { 設置默認樣式
color: 'black',
lineStyle: {
width: 3,
color: 'green'
},
areaStyle: { 設置折線圖與坐標進行填充
color: 'yellow'
},
label: {
show: true,
position: 'bottom', 設置折線上標記數據在下方顯示
textStyle: {
color: 'red'
}
}
},
emphasis: { 設置鼠標移動到數據上時的，強調顯示效果
label: {
show: true,
position: 'top',
textStyle: {
color: 'gray'
}
}
}
}
}]
② 柱形圖顯示
dataZoom: { 開啟數據圖縮放功能
show: true
},
series: [{
name: '蒸發量',
type: 'bar',
barGap: '-50%', 設置相同標記位柱形圖之間的相對位置
barCategoryGap: '20%', 設置不同標記位柱形圖之間的位置
barWidth: 10, 設置柱形圖的寬度
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
（4）title標題
title: {
text: '某地區蒸\n發量和降水量', \n表示換行
subtext: '純屬虛構', 副標題
x: 100, x,y表示標題的位置設置，可以為left等
y: 200
},
（5）legend圖例
legend: {
data: [{ 可單獨設置數據的樣式，加入””空字符串可實現換行
name: '蒸發量',
icon:'image://https://www.baidu.com/img/bd_logo1.png', 替換圖標
textStyle: {
color: 'green',
fontWeight:'bold'
}
}, '降水量'],
borderColor: 'red',
formatter:'{name}Echarts', 設置模板顯示，也可以寫函數
itemWidth: 20, 設置圖例樣式的寬
itemHeight: 20, 設置圖例樣式的高
selected:{'降水量':false},
textStyle:{color:'blue'} 設置圖例文字的顏色
},
（6）數據拖拽顯示條dataZoom
dataZoom: {
show: true,
realtime: false, 關閉實時變化功能
start: 40, 設置開始和結束的范圍
end: 60,
zoomLock: true 開啟鎖定范圍的功能
},
（7）數據顯示提示框tooltip（可自定義formatter，多級顯示）
tooltip: {
// trigger: 'axis',
trigger: 'item', 只當鼠標經過數據時顯示
showContent: false, 關閉數據詳細信息框
showDelay: 0, 關閉顯示延遲
transitionDuration: 0, 關閉動畫延遲效果
hideDelay:1000, 設置鼠標離開后延遲消失效果
axisPointer: { 設置背景提示樣式，有cross、line、shadow三種
type: 'shadow',
lineStyle: { 設置line樣式的具體內容
color: 'red'
},
crossStyle: {
color: 'green'
},
shadowStyle: {
color: 'rgba(150, 150, 150, 0.3)'
}
}
},
（8）餅圖
{
name: '訪問來源',
type: 'pie',
radius: ['40%', '55%'], 設置兩個值，可變為環形圖
// startAngle: 0, 設置起始角度
clockWise: false, 設置逆時針轉動
data: [{
value: 335,
name: '直達'
}, {
value: 310,
name: '郵件營銷'
}, {
value: 234,
name: '聯盟廣告'
}, {
value: 135,
name: '視頻廣告'
}, {
value: 1048,
name: '百度',
textStyle: {
align: 'left'
}
}, {
value: 251,
name: '谷歌'
}, {
value: 147,
name: '必應'
}, {
value: 102,
name: '其他'
}]
}