echarts和v-chart使用心得

echarts的响应式

每次窗口大小改变的时候都会触发onresize事件，这个时候咱们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的状况
window.onresize = echart.resize;
echart.setOption(option);

echarts异步请求

使用ajax获取数据的时候，能够先设置完其余样式，显示一个空直角坐标。而后用ajax获取数据请求。

x轴数据显示不全，被截取的操做

当X轴上面要渲染的数据太多的时候就会出现只渲染出来一部分，可是图表中的数据显示(好比说柱状图中的每一个柱子)又会自动的进行宽度的缩放，因此会致使X轴与图中的信息不相匹配的问题，解决的方法是在X轴设置axisLabel :{ interval:0 }这个属性问题就能够解决了，Y轴的使用方法相同

当碰到有tab切换时，再显示图表出现的问题
最近在使用echart时，出现了一个问题就是：手机上使用echarts，页面中有tab切换图表。除了第一个能够正常显示外，其余的图表的宽度必须设置成很大。好比说第一个tab的图表的宽度我设置为100%，第二个tab图表的宽我必须设置成300%才行。并且使用grid还不行。在手机端须要作适配，因此设置具体的宽度并很差，设置成百分比会出现问题。

解决：

缘由：缘由多是在进行tab切换时，其宽度并无加载出来。此时，咱们须要将宽度从新加载一遍。

document.getElementById('box').style.width = window.innerWidth+'px';
获取屏幕宽度，echarts的宽度和屏幕的宽度一致

let box= echarts.init(document.getElementById('box'));
再进行初始化，这个时候设置宽度为百分之100就能够了。不用担忧适配问题

v-charts用法小结
v-charts是基于echarts的二次封装，使用起来异常方便，地址：https://v-charts.js.org/#/。

功能没有echarts那么丰富，但通常状况下是够用了。在这里不讲怎么引入，使用，直接看官方的api便可。因为其API写的比较简单。所以在使用过程当中踩过很多的坑，现作一个小结，方便后来人。

1.在v-charts中使用xAxis

在v-charts中使用xAxis时，须要执行3步。第一个步骤是在html中使用:xAxis=“xAxis”；第二步是在data里面定义xAxis，声明为一个空对象；第三步也就是很是重要的一步就是在methods中，使用

this.xAxis={}

可是在这一步，咱们至关因而用xAxis将原有的覆盖了，因此咱们要在this.xAxis中从新定义横坐标data，不然图表会变形。只要从新定义了data，以后咱们就可使用xAxis的其余任何属性了。

二、横坐标被截取

横坐标太多不能显示彻底，经常使用的解决办法有两种：

一种是横坐标倾斜，一种就是自定义横坐标间距。

this.xAxis = {
type:'category',
data:rows1,
boundaryGap:true,
axisLabel:{
rotate:30,
interval:0
}
};
用法和echarts相似，interval表示间距，为0表示横坐标数据所有展现，rotate表示倾斜角度。

若是不想使用倾斜，那就自定义间隔，设置interval的数值便可。

可是我在实际工做中，还碰到一个问题就是：一样的代码，一样的浏览器，一样的电脑配置，当横坐标是日期时，横坐标最右边的数值被截取了。这让我非常无语。找了不少缘由，最后解决的办法是加上：grid=grid，而后给grid设置right值才解决的。

三、图表不出现或只出现一部分

最近的一个项目中，使用v-chart在本地显示正常，但项目上线后显示不正常，只显示出一部分。其中缘由我也不是很明白。最后只是将图表的宽度由原来的100%改成具体的px，这才显示彻底。可能数据在传输的时候有网络问题，致使百分数不能解析吧。

 

原文连接：https://blog.csdn.net/weixin_38384967/article/details/87692513