水監測圖表.gif

1、項目中用到的一些屬性

const options = {

grid: {// 柱狀圖位置

top: '15px',

left: '0',

right: '0',

bottom: '10px',

containLabel: true

},

dataZoom: {

type: 'inside'//隱式滾動條：即不顯示滾動條，通過鼠標滾動來縮放縮放柱形圖間距，來查看所有的柱形圖

/**顯示滾動條，可設置其顯示位置，滾動條開始位置、結束位置，寬，高等*/

// show: true,

// realtime: true,

// bottom: '2px',

// left:'20px',

// right:'20px',

// height: 8,

// start:0,

// end:100,

// textStyle:{

// color: '#fff'

// }

},

tooltip: {// 鼠標滑上去顯示效果

trigger: 'axis',

// formatter : function(params){

// var res = 'success'; //可以在這個方法中改變鼠標滑上去顯示的內容

// return res;

// },

// axisPointer : { // 坐標軸指示器，坐標軸觸發有效

// type : 'line' // 默認為直線，可選為：'line' | 'shadow'

// }

},

xAxis: {

name:'PH',//橫軸名稱

type: 'category',

boundaryGap: false,

color: '#fff',

data: xdata,

axisLabel: {//橫軸標簽樣式設置

show: this.queryType==2?true:false,//控制標簽顯示

interval:0,

textStyle: {

color: '#fff', // 更改坐標軸文字顏色

fontSize: 10// 更改坐標軸文字大小

},

// formatter:function(value,index) {//設置橫軸坐標文字每行顯示個數，超出換行

// var ret = "";//拼接加\n返回的類目項

// var maxLength = 10;//每項顯示文字個數

// var valLength = value.length;//X軸類目項的文字個數

// var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數

// if (rowN > 1)//如果類目項的文字大于3,

// {

// 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;

// }

// }

},

axisLine: {// x軸樣式

show: true,

lineStyle: {

color: 'rgba(242,242,242,.2)',

width: 1,

type: 'solid'

}

}

// ,axisTick: {length:220}

},

yAxis: {

type: 'value',

axisLabel: {

textStyle: {

color: '#fff', // 更改坐標軸文字顏色

fontSize: 12// 更改坐標軸文字大小

}

},

axisLine: {// x軸樣式

show: true,

lineStyle: {

color: 'rgba(242,242,242,.2)',

width: 1,

type: 'solid'

}

},

splitLine: {// 格線樣式

lineStyle: {

color: 'rgba(242,242,242,.2)'

}

}

},

series: [{

data: ydata,

type: 'line',//折線圖

showAllSymbol:true,//顯示所有折線點

symbol:(val,param)=>{//根據值判斷點是否顯示以及點的顯示類型

if(this.queryType==1){

if(param.dataIndex%4==0){

return 'emptyCircle'

}else{

return 'none'

}

}

return 'emptyCircle'

}, //折線點設置為實心點

symbolSize: 12, // 折線點的大小

showBackground: true,

backgroundStyle: {

color: 'rgba(220, 220, 220, 0.8)'

},

areaStyle: {},

itemStyle: {// 柱樣式

normal: {

label:{

// show:true,

color: '#fff'

},

lineStyle: {

color: '#16B7FF', // 折線的顏色

width: 2,

type: 'solid'// 'dotted'虛線 'solid'實線

},

borderColor: '#1EB0FC',

color: new echarts.graphic.LinearGradient(//折線顯示顏色，可設置漸變色

0, 0, 0, 1,

[

// {offset: 0, color: '#44F0FF'},

{ offset: 0, color: '#42E9F8' },

{ offset: 0.7, color: '#122C45' },

{ offset: 1, color: '#021132' }

]

),

opacity: 1

}

}

}]

}

2、echart初始化的時候獲取不到節點

這是因為頁面dom節點未初始化完成，所以可能會拿不到dom節點，可以用下面vue方法等待節點渲染完成或者setTimeout加一個延時獲取該節點

this.$nextTick(() => {

this.domTop = echarts.init(document.getElementById('water-chart-top'))

})

3、echart渲染的canvas高度，寬度為0

有時候需要動態的渲染echart，會用到用vue的v-show或者v-if語法，這時候會遇到寬高為0的情況。寬度設置100%,內部會把100%轉化為100px哦(自行了解)。這時候你可以在頁面初始化的時候獲取一個在頁面一直顯示的父級節點的高度。然后在echart渲染的時候重新設置寬高

created() {

//頁面渲染的時候，獲取一個頁面存在的父級節點的寬高

var container=document.getElementById('app')

this.height=container.offsetHeight-97

this.width=container.offsetWidth

},

...

//echart圖表v-show為true的時候重新設置寬高

this.line_echart=echarts.init(document.getElementById('line-echart'))

this.line_echart.resize({height:this.height-40,width:this.width})

4、echart圖表出現之前的縱軸數據

當你的縱軸數據是動態變化的時候，圖表數據需要更新，有時候會出現之前的數據沒有消失，和當前的數據混合在一起展示。這時候可以在給你圖表設置配置項的時候，加個true就可以解決這個問題。

this.line_echart.setOption(option,true)

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的echart高级使用_Echart使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。