文不如表，表不如圖，上一次，介紹了ECharts的相關概念以及使用步驟，請見
資料可視化----ECharts初體驗（一）
還有一句，就是最好的檔案在官網，看誰的博客，都不如去熟讀官網，訪問官網的方式
- 點擊這里點點點
- 官網地址：https://echarts.apache.org/zh/index.html，復制到瀏覽器打開
- 直接百度，echarts
這一次，讓我們一起來學習一下，ECharts通用配置
ECharts通用配置
- 一 title(標題)
- text (標題文本)
- textStyle(文本樣式)
- color
- fontStyle
- fontWeight
- fontSize
- 標題邊框
- borderWidth
- borderColor
- borderRadius
- 標題位置
- top
- right
- bottom
- left
- 二 tooltip（提示框組件）
- trigger
- triggerOn
- formatter
- toolbox（工具列）
- feature（ 各工具配置項）
- saveAsImage（保存為圖片）
- dataView（資料視圖）
- restore（重置）
- dataZoom（區域縮放）
- magicType（動態型別切換）
- legend
- data
一 title(標題)
標題組件，包含主標題和副標題，
text (標題文本)
text：String 主標題文本，支持使用 \n 換行，
textStyle(文本樣式)
該配置是一個物件
color
顏色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六進制格式，比如 ‘#ccc’
color：標題文本顏色
fontStyle
fontStyle：標題文本樣式
- ‘normal’
- ‘italic’
- ‘oblique’
fontWeight
fontWeight：主標題文字字體的粗細，
- ‘normal’
- ‘bold’
- ‘bolder’
- ‘lighter’
- 100 | 200 | 300 | 400…
fontSize
fontSize：主標題文字的字體大小，-----number，值為數字，注意不要寫單位
標題邊框
borderWidth
標題的邊框線寬，-----number，值為數字，注意不要寫單位
borderColor
標題的邊框顏色，
顏色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六進制格式，比如 ‘#ccc’
borderRadius
圓角半徑，單位px，支持傳入陣列分別指定 4 個圓角半徑， 如:
borderRadius: 5, // 統一設定四個角的圓角大小
borderRadius: [5, 5, 0, 0] //（順時針左上，右上，右下，左下）
標題位置
top
title 組件離容器上側的距離，
top 的值可以是像 20 這樣的具體像素值，可以是像 ‘20%’ 這樣相對于容器高寬的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’，
如果 top 的值為’top’, ‘middle’, ‘bottom’，組件會根據相應的位置自動對齊，
right
title 組件離容器右側的距離，
right 的值可以是像 20 這樣的具體像素值，可以是像 ‘20%’ 這樣相對于容器高寬的百分比，
默認自適應，
bottom
title 組件離容器下側的距離，
bottom 的值可以是像 20 這樣的具體像素值，可以是像 ‘20%’ 這樣相對于容器高寬的百分比，
默認自適應，
left
title 組件離容器左側的距離，
left 的值可以是像 20 這樣的具體像素值，可以是像 ‘20%’ 這樣相對于容器高寬的百分比，也可以是 ‘left’, ‘center’, ‘right’，
如果 left 的值為’left’, ‘center’, ‘right’，組件會根據相應的位置自動對齊，
這個title設定的就是下圖中的樣式
二 tooltip（提示框組件）
trigger
觸發型別，三個引數：
- item 滑鼠進入柱內才會觸發
- axis 滑鼠進入柱所在的軸就會觸發
- none: 怎樣都不觸發
triggerOn
提示框觸發的條件
- .click 點擊觸發
- mousemove 滑鼠滑過就會觸發，默認值
formatter
提示框浮層內容格式器，支持字串模板和回呼函式兩種形式
- 模板字串 例如：’{b}的成績是{c}’
- 回呼函式，例如：
formatter: function (arg) { //借助回呼函式中的引數
console.log(arg);
// return "hehe"
return arg.name + '的成績是：' + arg.data
}
tooltip的效果如下圖，這個效果是click和item
tooltip: {
trigger: 'axis',
triggerOn: 'mousemove',
formatter: function (arg) { //借助回呼函式中的引數
console.log(arg);
// return "hehe"
return arg.name + '的成績是：' + arg.data
}
}
axis + mousemove的效果
tooltip: {
trigger: 'axis',
triggerOn: 'mousemove',
formatter: '{b}的{a}成績是{c}'
}
toolbox（工具列）
toolbox 工具列，內置有匯出圖片，資料視圖，動態型別切換，資料區域縮放，重置五個工具，
feature（ 各工具配置項）
saveAsImage（保存為圖片）
dataView（資料視圖）
restore（重置）
dataZoom（區域縮放）
magicType（動態型別切換）
例：
toolbox: {
// 各工具配置項
feature: {
saveAsImage: {}, //保存圖片
dataView: {}, // 資料視圖
restore: {}, // 重置
dataZoom: {}, // 區域縮放
magicType: { // 動態型別切換
type: ['bar' , 'line']
}
}
}
整體的效果展示
legend
data
// legend: 圖例，用于篩選系列，需要和series配合使用
legend:{
//這里data的資料必須和series中name的值一致
data: ['語文','數學']
},
還需要series來配合
var xData = ['張三', '李四', '王五', '二嘎', '閏土', '鐵蛋', '史珍香', '狗娃'],
yData = [65, 78, 98, 100, 59, 86, 76, 89.5];
//多定義一個陣列
yData2 = [69, 82, 89, 95, 70, 95, 84, 90];
series
series: [{
name: '語文',
type: 'bar',
data: yData
},{
name: '數學',
type: 'bar',
data: yData2
}]
效果就是這樣
最后完整代碼奉上，各位大佬多多支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱狀圖</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
let oDiv = document.querySelector('div');
var xData = ['張三', '李四', '王五', '二嘎', '閏土', '鐵蛋', '史珍香', '狗娃'],
yData = [65, 78, 98, 100, 59, 86, 76, 89.5];
yData2 = [69, 82, 89, 95, 70, 95, 84, 90];
var mCharts = echarts.init(oDiv);
var option = {
title: {
// 標題文字
text: '成績展示',
// 文字樣式
textStyle: {
color: '#7c7c7c'
},
// 標題邊框
borderWidth: 5,
borderColor: '#c00',
borderRadius: 5,
// 標題所在位置
// left:400,
// top: 10
},
tooltip: {
// trigger 觸發型別 三個引數
// item 滑鼠進入柱內才會觸發
trigger: 'axis',
// axis 滑鼠進入柱所在的軸就會觸發
// trigger: 'axis',
// none: 怎樣都不觸發
// trigger: 'none'
// triggerOn 提示框觸發的條件
// 點擊觸發，默認時mousemove 滑鼠滑過就會觸發
triggerOn: 'mousemove',
// 提示框浮層內容格式器，支持字串模板和回呼函式兩種形式
// 字串模板
// formatter: '{b}的成績是{c}'
// formatter: function (arg) { //借助回呼函式中的引數
// console.log(arg);
// // return "hehe"
// return arg.name + '的成績是：' + arg.data
// }
},
// toolbox 工具列，內置有匯出圖片，資料視圖，動態型別切換，資料區域縮放，重置五個工具，
toolbox: {
// 各工具配置項
feature: {
saveAsImage: {}, //保存圖片
dataView: {}, // 資料視圖
restore: {}, // 重置
dataZoom: {}, // 區域縮放
magicType: { // 動態型別切換
type: ['bar' , 'line']
}
}
},
// legend: 圖例，用于篩選簡歷，需要和series配合使用
legend:{
data: ['語文','數學']
},
xAxis: {
type: 'category',
name: '姓名',
nameLocation: 'start',
data: xData
},
yAxis: {
name: '得分',
nameLocation: 'start',
type: 'value'
},
series: [{
name: '語文',
type: 'bar',
data: yData
},{
name: '數學',
type: 'bar',
data: yData2
}]
}
mCharts.setOption(option)
</script>
</body>
</html>
我講了這么多，還是要重復一句，學習ECharts，最重要的還是看官網，看官網，看官網！！！
逛網抓緊時間點擊配置項
你要是不會點，復制吧：https://echarts.apache.org/zh/option.html#title
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/290917.html
標籤：其他
上一篇：玩轉5G之--初探5G網路模型（OSI模型和TCP/IP模型）
下一篇：最近迷上了板子