vue+echarts绘制多个折线图并自适应宽度
问题描述:在绘制多个折线图时,虽然在初始化echarts实例的dom上设置了宽度(宽度百分比,最小宽度像素值),但是折线图并没有按照宽度自适应。解决方法:html:<div :id='"myChart"+id' :ref="'myChart'+id" style="width: 90%;min-width: 950px;height: 165px;margin: 0 auto;">&l
·
问题描述:在绘制多个折线图时,虽然在初始化echarts实例的dom上设置了宽度(宽度百分比,最小宽度像素值),但是折线图并没有按照宽度自适应。
解决方法:
html:
<div :id='"myChart"+id' :ref="'myChart'+id" style="width: 90%;min-width: 950px;height: 165px;margin: 0 auto;"></div>
js:
drawLine(chartxData, chartyData, xName){
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'+this.id));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis', //显示提示框
formatter: '{b}<br/>总调用量:{c}' // b为x轴数据,c为y轴数据
},
// grid官方解释为grid 组件离容器的距离,具体得要自己调
grid:{
left: 60,
right: 60,
top: 30,
bottom: 30,
},
xAxis: {
name: xName,// x轴单位
type: 'category',// 坐标轴类型,category类目轴,适用于离散的类目数据。
boundaryGap: false, //标签和数据显示在刻度下面
data: chartxData
},
yAxis: {
name: '调用量',// y轴单位
type: 'value',// 坐标轴类型, value数值轴,适用于连续数据。
axisLine: {
show: true, //显示刻度线
lineStyle: {
type: 'solid', //实线
}
}
},
series: [{
data: chartyData,
type: 'line',// 图标类型,折线图
itemStyle : {
normal : {
color:'#5B8FF9', //折点的颜色
lineStyle:{
color:'#5B8FF9' //折线的颜色
},
}
}
}]
});
// 修复echarts设置百分比宽度90%后实际宽度只有90px,动态直接对echarts设置宽度,但是也不能设置百分比宽度,只能设置像素宽度
let that = this;
// 定时为了chart能够先初始化
setTimeout(function(){
console.log(that.id+'offsetWidth'+that.$refs[`myChart${that.id}`].offsetWidth)
// $refs[`myChart${that.id}`]为动态获取元素ref
document.getElementById('myChart'+that.id).style.width=that.$refs[`myChart${that.id}`].offsetWidth+'px';
// 改变宽度后chart自适应
myChart.resize();
// echarts根据浏览器窗口大小改变自适应,改变浏览器宽度后chart自适应
window.addEventListener("resize", () => { myChart.resize(); });
},20)
}
// chartxData数据为数组格式,例如:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']。chartyData也一样。
更多推荐
已为社区贡献6条内容
所有评论(0)