最近项目中需要做一些数据可视化,大屏可视化类似的展示, 之前没有任何这方面的经验,于是先后尝试了d3,echars等主流的框架,在引用官网提供的examples的时候遇到了一大堆问题,在此记录下,方便日后查询学习;
Echarts官网:https://echarts.apache.org/en/index.html
Echarts菜鸟教程:https://www.runoob.com/echarts/echarts-setup.html
问题1:为 ECharts 准备一个具备高宽的 DOM 容器
按之前的经验,认为div会继承父类的width和height,所以没有给 用于包含 ECharts 绘制的图表的div添加width和height属性,
结果程序不报错但是用ECharts绘制的canvas怎么也不能显示在页面上;
问题2:如何把echarts绘制的canvas动态图作为背景图?
度娘很久,网上答案乱七八八糟,如按照网上说的去做的话九成都没有起作用,于是乎,查看api,各种尝试,现在发现有两种情况,一种情况是canvas图片是静态的,一种是canvas图片是动态图,这两种风格迥异的canvas决定了不同的处理方法;
1 针对静态的canvas图片,其实非常简单;
<div class="eaHome-rMain" id="eaHome-rMain">
<canvas id="can" width="1280" height="578"></canvas>
<div id="aaa" class="eaHome-rMain-content" ></div>
</div>
var canvas = document.getElementById('can'),
var ctx = canvas.getContext('2d'),
....
//省略生成canvas图片的代码
//设置背景图
document.getElementById('aaa').style.backgroundImage = 'url("' + document.getElementById('can').getContext('2d').canvas.toDataURL() + '")';
注意,这种方式只能设置静态的背景图,就算canvas本身是动态图,用这种方式设置后也会变成静态图,所以要注意
2 针对动态的canvas图片,如何设置为背景图呢?
很简单,使用css去处理:
<div class="eaHome-rMain" id="eaHome-rMain">
<canvas id="can" width="1280" height="578"></canvas>
<div id="aaa" class="eaHome-rMain-content" ></div>
</div>
#can{
position: absolute;
z-index:10;
}
#aaa {
position: absolute;
z-index:200;
}
该处理方式核心在于作为背景图的canvas动态图和div首先都要绝对定位,而且通过z-index分层,从而达到作为背景图的目的;
最后附上在网上找到的可以很好的去参考的例子,有详细的html,css,js代码和演示效果,方便大家参考:
https://codepen.io/akm2/pen/rHIsa
有任何问题可以私信我,由于平时加班较多,可能回复较慢,但是看到一定会回复的,谢谢!