Echarts中常用的參數(shù)總結及參數(shù)自定義示例代碼
更新時間：2023年02月18日 10:48:01 作者：不叫貓先生
Echarts中參數(shù)的配置功能很強大,對任何一項的配置都很細致,下面這篇文章主要給大家介紹了關于Echarts中常用的參數(shù)總結及參數(shù)自定義的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
本文主要講解使用Echarts時setOption里面的屬性以及常見的問題，參數(shù)都是本人項目里的具體參數(shù)。設置內(nèi)容都是在 setOption({ })中。
折線圖
圖示：
1.title
title：設置圖標標題
- text：標題名稱
- left：標題定位方向
- top、left：定位
- textStyle：標題樣式
- color：標題顏色
title: {
text: '答辯評分趨勢',
left: 'left',
top: 20,
left: 20,
textStyle: {
color: '#679CF6'
}
}
2.tooltip
tooltip：提示框
- trigger：觸發(fā)類型（axis:鼠標觸摸到軸觸發(fā)，item:鼠標觸摸到折線點觸發(fā)）
- showDelay：添加延遲時間，避免來回切換（單位ms）
- axisPointer：坐標軸指示器，坐標軸觸發(fā)有效
- type：line/shadow（默認line，設置shadow時鼠標放上去有陰影）
- shadowStyle：當設置值為shadow時
tooltip: {
trigger: 'axis',
// 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
showDelay: 200,
// 坐標軸指示器，坐標軸觸發(fā)有效
axisPointer: {
// 默認為直線，可選為：'line' | 'shadow'
type: 'show',
shadowStyle: {
shadowBlur: 1,
opacity: 0.3
}
},
},
3.grid
grid：圖表距離容器的位置
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '30%',
containLabel: true
},
- containLabel 為 false 的時候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 決定的是由坐標軸形成的矩形的尺寸和位置。- containLabel 為 true 的時候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 決定的是包括了坐標軸標簽在內(nèi)的所有內(nèi)容所形成的矩形的位置。- 這常用于『防止標簽溢出』的場景，標簽溢出指的是，標簽長度動態(tài)變化時，可能會溢出容器或者覆蓋其他組件
4.legend
legend：圖例
- data：圖例的具體文字
- textStyle：圖例的文字
- icon：圖例的形狀 （包括：circle，rect ，roundRect，triangle，diamond，pin，arrow，none）
legend: {
data: ['xx', 'xx', 'xx', 'xx'],
right: '33%',
top: '10%',
textStyle: {
fontSize: 12,
color: '#666'
},
icon: "circle",
itemWidth: 10, // 設置寬度
itemHeight: 10, // 設置高度
itemGap: 40 // 設置間距
},
5.xAxis
xAxis ：x軸設置
- name：單位
- splitLine：網(wǎng)格線
- show：false （去除網(wǎng)格線）
- data：x軸坐標顯示的數(shù)據(jù)，數(shù)組類型
- axisLine：設置x軸的軸線
- show：true（設置顯示）
- lineStyle：設置軸線的樣式
- color：顏色
- width：寬度
- type：線條類型
- axisLabel：設置x軸文字樣式
- textStyle：文字樣式，對象類型
- show：是否展示
- fontSize：字體大小
- color：文字顏色
- formatter：自定義文字，后面跟一個函數(shù)，默認會一個參數(shù)，x坐標的值
xAxis: {
type: "value",
// x軸的名字，可以理解成單位
name: "單位(K)",
nameTextStyle: {
// x軸的名字的樣式相關
color: "#BFBFBF",
nameLocation: "start",
},
splitLine: {
//去除網(wǎng)格線
show: false,
},
//去除網(wǎng)格區(qū)域，否則會有一片區(qū)域
splitArea: { show: false },
data: [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000],
axisLine: {
// 把x軸從實線變成虛線
show: true,
lineStyle: {
// 設置x軸線條樣式的顏色
color: "#BDBDBD",
width: 1,
type: "solid",
},
},
axisLabel: {
formatter: function (value) {
return value >= 5000 ? parseInt(value / 1000) + "K" : value;
},
scale: true, // 設置數(shù)據(jù)自動縮放
}
},
6.yAxis
- yAxis：與x軸基本同理
7.series
series：圖標系列，對象類型
- type：line（圖標類型為線性圖標）
- smooth：true（設置折線為光滑）
- name：圖標名稱
- areaStyle：圖標區(qū)域的樣式（本文中的圖標設置的為漸進色）
- data：圖標的數(shù)據(jù)
- markLine：基線
- symbol：none（去掉基線的箭頭）
- lable：基線的文字設置
- position：基線文字位置（start,middle,end）
- show：是否顯示基線文字
- formatter：基線文字內(nèi)容
- data：設置基線（Array類型）
- silent：鼠標懸停（true/false）
- lineStyle：基線線條設置，對象類型
- type：solid（基線線條類型）
- color：基線線條顏色
- yAxis：y軸基線的值
series: [
{
data: this.trendLineData.map(item => item.defenceScore),
type: 'line',
smooth: true,
name: "答辯評分",
areaStyle: {
normal: {
opacity: 0.3,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#679CF6'
}, {
offset: 1,
color: '#fff'
}])
}
},
// 基線設置
markLine: {
symbol: "none",
data: [{
silent: false,
lineStyle: {
type: "solid",
color: "#E34949",
},
yAxis: 3.5
},
{
silent: false,
lineStyle: {
type: "solid",
color: "#3BC9A9",
},
yAxis: 4
}
]
}
},
],
附：常見問題
1、自定義X軸文字（文字替換）
axisLabel: {
formatter: function (value) {
return value >= 5000 ? parseInt(value / 1000) + "K" : value;
},
scale: true, // 設置數(shù)據(jù)自動縮放，要不然數(shù)據(jù)多的話就堆一塊了
}
2、自定義X軸文字（文字換行）
其中this.trendLineData為后端數(shù)據(jù)，其實就是將x軸的類目項文字可以動態(tài)換行
formatter: (value) => {
if (this.trendLineData.length > 2) {
//拼接加\n返回的類目項
var ret = "";
//每項顯示文字個數(shù)
var maxLength = 12;
//X軸類目項的文字個數(shù)
var valLength = value.length;
//類目項需要換行的行數(shù)
var rowN = Math.ceil(valLength / maxLength);
if (rowN > 1)
{
for (var i = 0; i < rowN; i++) {
//每次截取的字符串
var temp = "";
//開始截取的位置
var start = i * maxLength;
//結束截取的位置
var end = start + maxLength;
//這里也可以加一個是否是最后一行的判斷
temp = value.substring(start, end) + "\n";
//拼接最終的字符串
ret += temp;
}
return ret;
}
else {
return value;
}
} else {
return value;
}
}
3、自定義tooltip
tooltip: {
trigger: 'axis',
// 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
showDelay: 200,
// 坐標軸指示器，坐標軸觸發(fā)有效
axisPointer: {
// 默認為直線，可選為：'line' | 'shadow'
type: 'shadow',
shadowStyle: {
shadowBlur: 1,
opacity: 0.3
}
},
formatter: function (data) {
var res = "<div style='display:flex;'>";
res += "<div class='left' >"
res += '答辯數(shù)' + '</br>'
data.forEach(item => {
item.value = item.value ? item.value : 0;
if (item.seriesType == 'bar') {
res += item.marker + item.seriesName + '答辯數(shù)' + '：' + item.value + '</br>';
}
});
res += " </div>"
res += "<div class='right' style='margin-left:20px'>"
res += '分數(shù)' + '</br>'
data.forEach(item => {
item.value = item.value ? item.value : 0;
if (item.seriesType == 'line') {
res += item.marker + item.seriesName + (item.seriesName == '總體' ? '平均分' : '分數(shù)') + '：' + item.value + '</br>';
}
});
res += " </div>"
res += " </div>"
return res
}
},
結果如圖所示：
總結
到此這篇關于Echarts中常用的參數(shù)總結及參數(shù)自定義的文章就介紹到這了,更多相關Echarts常用參數(shù)及參數(shù)自定義內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
js數(shù)字滑動時鐘的簡單實現(xiàn)(示例講解)
下面小編就為大家?guī)硪黄猨s數(shù)字滑動時鐘的簡單實現(xiàn)(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了js上傳圖片及預覽功能,實例分析了javascript操作圖片上傳預覽功能的實現(xiàn)方法,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關于Javascript新手入門之字符串拼接與變量應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
本文對JS判斷鼠標移入元素的方向的實現(xiàn)方法進行介紹，并分享了完整的示例代碼，有需要的朋友可以看下2016-12-12
本文主要介紹了JS電梯導航的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
詳解js對象中屬性的兩種類型之數(shù)據(jù)屬性和訪問器屬性
在理解vue底層響應式原理時，了解到，原來對象中的屬性，不單單從表面看起來那么簡單是key:value形式，而是還有隱藏的內(nèi)部特性，其中對象內(nèi)的屬性分為兩種類型的屬性：數(shù)據(jù)屬性和訪問器屬性，本文將給大家詳細介紹一下數(shù)據(jù)屬性和訪問器屬性,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了純js實現(xiàn)圖片勻速淡入淡出效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了JavaScript原型鏈示例，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了JS給Textarea文本框添加行號的方法,涉及javascript針對頁面元素結點的讀取與判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本節(jié)為大家介紹的是用JS實現(xiàn)列表與多選框選擇，并附gif演示動畫，這個例子很詳細，大家可以看看2014-10-10