echarts图表——3d
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts图表——3d相关的知识,希望对你有一定的参考价值。
参考技术A 在日常项目中使用3d图表的情况比较少,但是毫无疑问这是一个数据可视化的趋势。echarts目前示例中包括地球、柱状图、散点图、曲面、地图、路径图和折线图。Echarts图表变形与自适应解决方案
原因:是Echarts在初始化实例的时候,对应dom元素的宽高还没有确定。
1. 监听对应dom元素,如果大小发生变化,调用resize()
方法。
let chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 若dom尺寸变化,则resize
const chartObserver = new ResizeObserver(() =>
myChart.resize();
);
chartObserver.observe(chartDom);
2. 自适应是浏览器窗口变化的时候,echarts图表大小能够相应的变化。可通过监听浏览器窗口实现
// 单个
window.onresize = () =>
myChart.resize();
// 不在同一个作用域内,如果多次调用window.onresize(),后一个将会覆盖掉前一个
window.onresize = () =>
myChart1.resize();
myChart2.resize();
// 完美解决方案 window.addEventListener('resize', callback)
window.addEventListener('resize', () =>
myChart1.resize();
, false);// false代表事件句柄在冒泡阶段执行
...
window.addEventListener('resize', () =>
myChart2.resize();
, false);
以上是关于echarts图表——3d的主要内容,如果未能解决你的问题,请参考以下文章