You are here
如何给echarts图形设置背景图片
echarts是JavaScript的一种图形插件，官方给的实例都没有设置背景图片，有时项目中需要给图形一个背景图片。查看了官方的API文档，自带有个属性renderAsImage
，可以设置背景，具体如下：
方法/步骤
新建一个Web Project项目，并在项目中的web目录下，创建一个jsp页面“backImage.jsp”，并将title修改如下：
<title>echarts设置图形背景图片</title>
编写echarts图形，关键要引入它的核心JS，echarts.js
<script type="text/javascript" src="../scripts/echarts-2.2.1/build/dist/echarts.js"></script>
配置echarts有关JS路径
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: "<%=basePath%>/scripts/echarts-2.2.1/build/dist"
}
});
</script>
如下图所示：
然后，设置echarts容器，放在body中间
<body>
<div id="columnChart" style="height:500px;"></div>
</body>
如下图所示：
接着，编写形成echarts图形的js，如下图所示：
将jsp中的设置路径添加进去
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
再次刷新页面，出现如下图形：
然后，我查找了echarts官方网站，找到了一个设置图形背景图片的属性
renderAsImage
按照官方的说法，设置了属性
利用了属性renderAsImage
renderAsImage:"<%=basePath%>/images/image.jpg"，发现这个属性没有起作用
如下图所示：
接着，我想到了一个办法，在echarts容器外面嵌套一个div层，在外层的div设置背景图片
<style type="text/css">
#backImg{
;
}
</style>
<body>
<div id="backImg" style="width:100%;height:100%;">
<div id="columnChart" style="height:570px;width:100%;"></div>
</div>
</body>
如下图所示：
再次刷新页面，发现图形有了背景图片，这就说明第二种方法奏效了
跟第一种方法利用renderAsImage属性设置背景图片，第二种方法起到了关键性作用
END
