水监测图表.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)