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的主要内容,如果未能解决你的问题,请参考以下文章

怎么在js删除jsp上的echarts图表

echarts图表基础配置

echarts动态改变图表的大小

一个页面中既有echarts2的图表也有echarts3的图表应该怎么做

echart图表里怎么样title换行

echarts图表页面加载隐藏图表宽度失效问题