前端用echarts繪制含有多個分層的波形圖關(guān)鍵代碼
更新時間：2024年03月16日 14:10:24 作者：大嘴史努比
每次實現(xiàn)各種圖表時,總會用到echarts,不得不說確實是一個非常好用的開源庫,這篇文章主要給大家介紹了關(guān)于前端用echarts繪制含有多個分層的波形圖的相關(guān)資料,需要的朋友可以參考下
一、效果圖展示
先展示一下實際的效果圖
用戶選擇完需要的波形參數(shù)字段之后，頁面開始渲染圖表，有幾個參數(shù)就要渲染幾個grid，也就是幾行波形。
二、繪制邏輯
拿到所選的參數(shù)數(shù)據(jù)之后
1.首先是給橫坐標(biāo)軸的里程-數(shù)據(jù)注入
2.修改tooltip（跟著豎線走的卡片彈窗）里面的彈出窗的顯示，需要返回html模板字符串
3.修改datazoom（最底下的藍(lán)色滑動窗），里面初始的起點和終點
4.按照參數(shù)的個數(shù)添加grid（每一行的波形），需要疊加計算的是，距離bottom的高度，一個距離100，2個距離200
5.按照參數(shù)的個數(shù)添加xAxis里面的對象 （需要修改 gridIndex 0 1 2 ...）
只有第一個對象，要顯示X軸坐標(biāo)，且同時要判斷X軸坐標(biāo)是否包含車站
第二個對象開始不顯示xAxis坐標(biāo)軸
6.修改y軸 （可顯示刻度）（需要修改 gridIndex 0 1 2 ...）
7.最后修改series 每個參數(shù)是一個對象的配置（包括數(shù)據(jù)，線條的類型，顏色）
（值得注意的是，這套繪制，建議放置在一個函數(shù)里，然后加載時調(diào)用，重新繪制時調(diào)用，需要注意重新繪制時，除了要myChart.dispose(); //銷毀，還要重新配置option）
三、關(guān)鍵代碼
繪制邏輯代碼：
const self = this;
//重新給圖標(biāo)賦值數(shù)據(jù)
this.tableData.forEach(function (currentValue, index, array) {
// 4.按照參數(shù)的個數(shù)添加grid，需要疊加計算的是，距離bottom的高度，一個距離100，2個距離200
let height = (index+1)*100;
if(index===array.length-1){
self.option.grid.push({
show:true,
left: 50,
right: 50,
bottom: height,
height: 100, //每一個折現(xiàn)圖的高度
backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色
})
}else{
self.option.grid.push({
show:true,
left: 50,
right: 50,
bottom: height,
height: 100, //每一個折現(xiàn)圖的高度
backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色
})
}
// 5.按照參數(shù)的個數(shù)添加xAxis里面的對象 （需要修改 gridIndex 0 1 2 ...）
// !!!只有第一個對象，要顯示X軸坐標(biāo)，且同時要判斷X軸坐標(biāo)是否包含車站
// 第二個對象開始不顯示坐標(biāo)軸
if(index==0){
self.option.xAxis.push({
gridIndex: 0, //x 軸所在的 grid 的索引
type: 'category', //類目軸
boundaryGap: false, //坐標(biāo)軸兩邊留白策略，
axisLine: {
//是否顯示坐標(biāo)軸軸線。
onZero: false,
lineStyle: {
color: 'black',
width: 2,
},
},
//車站標(biāo)注
axisLabel: {
// interval: 0,//自適應(yīng)X軸間距
formatter: function (params) {
// 自定義div
// console.log(typeof(params))
let res;
if (params.includes('站')) {
res = '{abg11|' + params + '}';
} else {
res = '{abg1|' + params + '}';
}
return res;
},
rich: {
abg11: {
backgroundColor: '#2B8AFD',
width: '100%',
align: 'right',
height: 22,
borderRadius: 3,
padding: [2, 4, 2, 4],
color: '#ffffff',
},
abg1: {
color: '#595959',
},
},
},
data: xData,
show: true, //是否顯示 x 軸。
})
}else{
self.option.xAxis.push({
gridIndex: index, //x 軸所在的 grid 的索引
type: 'category', //類目軸
boundaryGap: false, //坐標(biāo)軸兩邊留白策略，
axisLine: {
onZero: true, //X 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數(shù)值軸且包含 0 刻度時有效。
lineStyle: {
color: '#979797',
},
},
data: xData,
show: true, //是否顯示 x 軸。
axisTick: {
//坐標(biāo)軸刻度相關(guān)設(shè)置
show: false,
},
axisLabel: {
//刻度標(biāo)簽
show: false,
},
})
}
// 6.修改y軸 （可顯示刻度）（需要修改 gridIndex 0 1 2 ...）
self.option.yAxis.push({
gridIndex: index, //y 軸所在的 grid 的索引
type: 'value',
// name: "PM2.5",//縱坐標(biāo)名字
// nameLocation: "middle",//縱坐標(biāo)名字的位置
// nameGap: 30,//縱坐標(biāo)名字與軸線之間的距離
position: 'left', //y軸的位置
inverse: false,
splitLine: {
//坐標(biāo)軸在 grid 區(qū)域中的分割線
show: false,
},
axisLine: {
//坐標(biāo)軸軸線相關(guān)設(shè)置 豎著那一根
show: true,
lineStyle: {
color: '#979797',
},
},
axisTick: {
//坐標(biāo)軸刻度相關(guān)設(shè)置
show: false,
},
axisLabel: {
//刻度標(biāo)簽
show: false,
},
},)
// 7.最后修改series 每個參數(shù)是一個對象
self.option.series.push({
//參數(shù)的名字-數(shù)據(jù)注入
name: currentValue.name,
type: 'line',
color: self.colorArray[index],
// 設(shè)置不顯示小圓圈
symbol: 'none',
showSymbol: false,
xAxisIndex: index, //使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
yAxisIndex: index, //使用的 y 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
symbolSize: 8, //標(biāo)記的大小
// hoverAnimation: false,
smooth: true, //平滑曲線
//每個grid的數(shù)據(jù)-數(shù)據(jù)注入
data: currentValue.data,
markLine: {
symbol: 'none', //去掉箭頭
//最大值和最小值
data: [
{
// type: 'median', //中位數(shù)。
type: 'average', //中位數(shù)。
symbol: 'none', //去掉開始的原點
label: {
//字體設(shè)置
show: 'true',
position: 'insideEndTop',
distance: 10,
formatter: currentValue.name,
color: 'inherit',
},
lineStyle: {
//橫線設(shè)置
width: 1,
},
},
],
},
lineStyle: {
shadowColor: self.colorArray[index], //透明的顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 0.8, //透明度
shadowBlur: 8, //陰影大小
type: "solid", //實線
width: 2,
},
})
});
this.getHeight(this.tableData.length)//重新獲得動態(tài)的圖表高度
//折線圖
this.$nextTick(()=>{
this.getChart();//實際繪制
})動態(tài)高度函數(shù)代碼：
//獲得動態(tài)高度
getHeight(num){
this.dynamicHeight = `${num * 100 + 150}px`;
},繪制代碼：
//繪制折線圖
getChart() {
const chartDom = document.getElementById('main-echarts');
if (myChart != null && myChart != '' && myChart != undefined) {
console.log("銷毀了");
myChart.dispose(); //銷毀
}
// // 顯示加載圖
// myChart.showLoading();
this.$nextTick(()=>{
myChart = echarts.init(chartDom);
myChart.setOption(this.option, true);//這里設(shè)置true,會每次根據(jù)數(shù)據(jù)重新繪制，設(shè)置為false之后，每次新的繪制會在原有圖表的基礎(chǔ)上再添加（不會有斷裂感，會形成流動感）
})
window.addEventListener('resize', function () {
myChart.resize();
});
}Y軸名字顯示且豎直放置：
// 6.修改y軸 （可顯示刻度）（需要修改 gridIndex 0 1 2 ...）
self.option.yAxis.push({
gridIndex: index, //y 軸所在的 grid 的索引
type: 'value',
name: currentValue.name.toString().split("").join("\n"),//縱坐標(biāo)名字豎直從上到下排列
nameRotate:0,
nameTextStyle: {
padding: 10, // 設(shè)置與坐標(biāo)軸的距離，單位為像素
color: 'black', // 這里設(shè)置顏色
},
nameLocation: "middle",//縱坐標(biāo)名字的位置
nameGap: 40,//縱坐標(biāo)名字與軸線之間的距離
position: 'left', //y軸的位置
inverse: false,
splitLine: {
//坐標(biāo)軸在 grid 區(qū)域中的分割線
show: false,
},
axisLine: {
//坐標(biāo)軸軸線相關(guān)設(shè)置 豎著那一根
show: true,
lineStyle: {
color: '#979797',
},
},
axisTick: {
//坐標(biāo)軸刻度相關(guān)設(shè)置
show: false,
},
axisLabel: {
//刻度標(biāo)簽
show: true,
showMinLabel: false, // 隱藏最小值標(biāo)簽
showMaxLabel: false, // 隱藏最大值標(biāo)簽
},
},)彈窗顯示為半透明
this.option = {
//鼠標(biāo)放上去顯示的彈窗
tooltip: {
trigger: 'axis', //坐標(biāo)系出觸發(fā)
backgroundColor: 'rgba(255, 255, 255, 0.7)', // 設(shè)置白色的半透明背景總結(jié)
到此這篇關(guān)于前端用echarts繪制含有多個分層的波形圖的文章就介紹到這了,更多相關(guān)前端echarts繪制波形圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
[紅色]仿YAHOO的一個小效果 下拉效果...2006-11-11
JavaScript實現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)輪播圖方法的相關(guān)資料,JS輪播圖的實現(xiàn)核心是使用JavaScript來控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設(shè)置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12
JavaScript正則表達(dá)式函數(shù)總結(jié)（常用）
正則表達(dá)式作為一種匹配處理字符串的利器在很多語言中都得到了廣泛實現(xiàn)和應(yīng)用.這篇文章主要介紹了JavaScript正則表達(dá)式函數(shù)總結(jié),需要的朋友可以參考下2018-02-02
下面小編就為大家?guī)硪黄猨s判斷是否為空和typeof的用法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件的問題及解決
這篇文章主要介紹了基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件,實現(xiàn)代碼可以分為兩塊一塊為組件的封裝代碼，一塊為文中實現(xiàn)效果的演示代碼，對element?UI數(shù)字區(qū)間輸入組件相關(guān)知識感興趣的朋友一起看看吧2022-05-05
這篇文章主要介紹了javascript實現(xiàn)確定和取消提示框效果的方法以及示例代碼分享，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了JS+Canvas實現(xiàn)的俄羅斯方塊游戲,結(jié)合完整實例形式分析了Canvas技術(shù)實現(xiàn)俄羅斯方塊游戲的步驟、技術(shù)難點與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
今天發(fā)現(xiàn)chrome還是有一些獨一無二的東西，基于它們，我們就可以搞出基于特征的判定了。2010-03-03
JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例
這篇文章主要介紹了JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06