水監(jiān)測圖表.gif
1沪铭、項(xiàng)目中用到的一些屬性
const options = {
grid: {// 柱狀圖位置
top: '15px',
left: '0',
right: '0',
bottom: '10px',
containLabel: true
},
dataZoom: {
type: 'inside'//隱式滾動(dòng)條：即不顯示滾動(dòng)條描沟，通過鼠標(biāo)滾動(dòng)來縮放縮放柱形圖間距，來查看所有的柱形圖
/**顯示滾動(dòng)條膳汪，可設(shè)置其顯示位置椒功，滾動(dòng)條開始位置彭沼、結(jié)束位置廉侧，寬肖方，高等*/
// show: true,
// realtime: true,
// bottom: '2px',
// left:'20px',
// right:'20px',
// height: 8,
// start:0,
// end:100,
// textStyle:{
// color: '#fff'
// }
},
tooltip: {// 鼠標(biāo)滑上去顯示效果
trigger: 'axis',
// formatter : function(params){
// var res = 'success'; //可以在這個(gè)方法中改變鼠標(biāo)滑上去顯示的內(nèi)容
// return res;
// },
// axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
// type : 'line' // 默認(rèn)為直線非洲，可選為：'line' | 'shadow'
// }
},
xAxis: {
name:'PH',//橫軸名稱
type: 'category',
boundaryGap: false,
color: '#fff',
data: xdata,
axisLabel: {//橫軸標(biāo)簽樣式設(shè)置
show: this.queryType==2?true:false,//控制標(biāo)簽顯示
interval:0,
textStyle: {
color: '#fff', // 更改坐標(biāo)軸文字顏色
fontSize: 10// 更改坐標(biāo)軸文字大小
},
// formatter:function(value,index) {//設(shè)置橫軸坐標(biāo)文字每行顯示個(gè)數(shù)鸭限，超出換行
// var ret = "";//拼接加\n返回的類目項(xiàng)
// var maxLength = 10;//每項(xiàng)顯示文字個(gè)數(shù)
// var valLength = value.length;//X軸類目項(xiàng)的文字個(gè)數(shù)
// var rowN = Math.ceil(valLength / maxLength); //類目項(xiàng)需要換行的行數(shù)
// if (rowN > 1)//如果類目項(xiàng)的文字大于3,
// {
// for (var i = 0; i < rowN; i++) {
// var temp = "";//每次截取的字符串
// var start = i * maxLength;//開始截取的位置
// var end = start + maxLength;//結(jié)束截取的位置
// //這里也可以加一個(gè)是否是最后一行的判斷，但是不加也沒有影響两踏，那就不加吧
// 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', // 更改坐標(biāo)軸文字顏色
fontSize: 12// 更改坐標(biāo)軸文字大小
}
},
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,//顯示所有折線點(diǎn)
symbol:(val,param)=>{//根據(jù)值判斷點(diǎn)是否顯示以及點(diǎn)的顯示類型
if(this.queryType==1){
if(param.dataIndex%4==0){
return 'emptyCircle'
}else{
return 'none'
}
}
return 'emptyCircle'
}, //折線點(diǎn)設(shè)置為實(shí)心點(diǎn)
symbolSize: 12, // 折線點(diǎn)的大小
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'實(shí)線
},
borderColor: '#1EB0FC',
color: new echarts.graphic.LinearGradient(//折線顯示顏色败京，可設(shè)置漸變色
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初始化的時(shí)候獲取不到節(jié)點(diǎn)
這是因?yàn)轫撁鎑om節(jié)點(diǎn)未初始化完成梦染，所以可能會拿不到dom節(jié)點(diǎn)赡麦，可以用下面vue方法等待節(jié)點(diǎn)渲染完成或者setTimeout加一個(gè)延時(shí)獲取該節(jié)點(diǎn)
this.$nextTick(() => {
this.domTop = echarts.init(document.getElementById('water-chart-top'))
})
3、echart渲染的canvas高度帕识，寬度為0
有時(shí)候需要?jiǎng)討B(tài)的渲染echart泛粹，會用到用vue的v-show或者v-if語法，這時(shí)候會遇到寬高為0的情況肮疗。寬度設(shè)置100%,內(nèi)部會把100%轉(zhuǎn)化為100px哦（自行了解）晶姊。這時(shí)候你可以在頁面初始化的時(shí)候獲取一個(gè)在頁面一直顯示的父級節(jié)點(diǎn)的高度。然后在echart渲染的時(shí)候重新設(shè)置寬高
created() {
//頁面渲染的時(shí)候伪货，獲取一個(gè)頁面存在的父級節(jié)點(diǎn)的寬高
var container=document.getElementById('app')
this.height=container.offsetHeight-97
this.width=container.offsetWidth
},
...
//echart圖表v-show為true的時(shí)候重新設(shè)置寬高
this.line_echart=echarts.init(document.getElementById('line-echart'))
this.line_echart.resize({height:this.height-40,width:this.width})
4们衙、echart圖表出現(xiàn)之前的縱軸數(shù)據(jù)
當(dāng)你的縱軸數(shù)據(jù)是動(dòng)態(tài)變化的時(shí)候，圖表數(shù)據(jù)需要更新碱呼，有時(shí)候會出現(xiàn)之前的數(shù)據(jù)沒有消失蒙挑，和當(dāng)前的數(shù)據(jù)混合在一起展示。這時(shí)候可以在給你圖表設(shè)置配置項(xiàng)的時(shí)候愚臀，加個(gè)true就可以解決這個(gè)問題忆蚀。
this.line_echart.setOption(option,true)
