设置canvas图作为背景图？亲测有效

最近项目中需要做一些数据可视化，大屏可视化类似的展示， 之前没有任何这方面的经验，于是先后尝试了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图片，其实非常简单；

 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去处理：

#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

有任何问题可以私信我，由于平时加班较多，可能回复较慢，但是看到一定会回复的，谢谢！