自己买域名可以做网站吗,微信网站怎么做的,优化网站首页,永城房产网不知道是不是最优解#xff0c;但是当前解决了我遇到的问题#xff0c;如有更好的方法#xff0c;希望看到这篇文章的同学可以不吝指导一番#xff0c;非常感谢 1、问题描述#xff1a;
因Ecahrts柱状图数据有时多有时少#xff0c;所以在数据达到一定程度之后#xff… 不知道是不是最优解但是当前解决了我遇到的问题如有更好的方法希望看到这篇文章的同学可以不吝指导一番非常感谢 1、问题描述
因Ecahrts柱状图数据有时多有时少所以在数据达到一定程度之后必须自定义每个数据的宽度使用滑动框来查看数据但是当自定义数据宽度之后再随意缩放浏览器Ecahrts的窗口将不再自适应缩放比例导致展示效果非常不好
2、为什么不用dataZoom
因为每个图都有配置保存为图片功能如果使用dataZoom来实现左右滑动查看数据那么只能将当前可视范围内的数据保存为图片而不能将所有数据都保存为图片当然如果没有保存为图片或者只需要保存当前可视范围内的数据保存成图片的同学可以使用dataZoom来实现
3、举例
正常显示 异常显示
4、处理方式
export function ImplantRegionEcharts(myChart, data) {
// 这里的配置只会在第一次加载的时候执行并不能Get到浏览器缩放事件
// 当数据大于13条之后将自定义Echarts的宽度if (data.length 14) {// * 70150 这些数据都可以自己修改const autoWidth data.length * 70 150;myChart.resize({ width: autoWidth });} else {// 当数据小于14条时根据配置的Echarts宽度来自适应// 浏览器宽度分成24份Echarts宽度占了14份所以当前计算为Echarts宽度 浏览器宽度 / 24 * 14// -35px是因为有的时候Echarts右侧显示不全可以自己修改myChart.resize({ width: document.body.clientWidth / 24 * 14 - 35 });// 如果else不配置也可以浏览器缩放捕获方法直接用myChart.resize()就行// 但是当浏览器缩放到50%及以下所有数据都在可视化窗口展示的时候还是会出现异常显示// 50%及以下基本上不会有人切换到所以基本不用配置else别问我为什么还要配置问就是强迫症}const title XXXX;const option {......} // 自己的配置if (data.length) {// 如果切换数据Echarts图出现混乱则可以先清空再加载// myChart.clear();// 使用刚指定的配置项和数据显示图表。myChart.setOption(option, true);} else {// 没有数据时显示暂无数据myChart.setOption({title: [{text: title,top: 5,left: 10},{subtext: 暂无数据,top: center,left: center,subtextStyle: {fontSize: 24}}]}, true);}// 浏览器缩放可以被该配置捕获到window.addEventListener(resize, function() {// 如果没有配置Echarts宽度则可以直接使用myChart.resize()// myChart.resize();// 如果自定义了Echarts宽度我使用的如上的处理方式if (data.length 14) {const autoWidth data.length * 70 150;myChart.resize({ width: autoWidth });} else {myChart.resize({ width: document.body.clientWidth / 24 * 14 - 35 });}});
}
