如何给echarts图形设置背景图片
echarts是JavaScript的一种图形插件，官方给的实例都没有设置背景图片，有时项目中需要给图形一个背景图片。查看了官方的API文档，自带有个属性renderAsImage
，可以设置背景，具体如下：
MyEclipse10
Tomcat7.0.x
echarts-2.2.1有关的js
新建一个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({
echarts: "&%=basePath%&/scripts/echarts-2.2.1/build/dist"
如下图所示：
然后，设置echarts容器，放在body中间
&div id="columnChart" style="height:500"&&/div&
如下图所示：
接着，编写形成echarts图形的js，如下图所示：
在浏览器地址栏中输入：
结果发现图形没有出来，经过调试发现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"&
background: url("&%=basePath%&/images/image.jpg");
&div id="backImg" style="width:100%;height:100%;"&
&div id="columnChart" style="height:570width:100%;"&&/div&
如下图所示：
再次刷新页面，发现图形有了背景图片，这就说明第二种方法奏效了
跟第一种方法利用renderAsImage属性设置背景图片，第二种方法起到了关键性作用
了解echarts中一些常用的属性
注意div的用法
echarts图形设置背景图片相关文章
echarts是一种很好的js插件,拥有丰富的图类型,并且每个新版本都会有新特性.但是,有时这些新特性也会给人带来麻烦,比如它的重新计算特性,随着鼠标移动,会改变图形样式,导致图形不美观且改变了原来的需求,那么该如何避免 ...
在做项目的过程中,我要用到echarts图形,并且要获取点击折线点的值.之前一直都在用FusionCharts,没有用到echarts,现在要用到得学习下,了解它的属性和事件.以下是怎么获取折线图中点的X轴值和Y轴值,具 ...
之前花时间研究了下怎么使用echarts画图表,了解了各种属性并调试成功,然后就以为自己下次遇到就可以直接使用了.很快这样的机会就来了,然后换了个项目居然发现引入echarts都忘记了,老是出bug,看来还是要记下来.
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,fi ...
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,fi ...
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/11,chrome,f ...
ECharts是百度商业前端数据可视化团队的一款开源图表控件,下面介绍结合SQL Server 2008进行数据绑定显示图表. 方法/步骤 打开百度echarts首页,点击下载最新的开发包,下载下来的文件如下图所示: 打 ...
主要如下:1显示第一个echarts,2从后台获取到模拟的数据,显示在echarts上面,3真正调用数据库里面的信息,显示在echarts上面了 工具/原料 MyEclipse MySQL echarts 第一echar ...
想要实现echarts地图放大可以显示街道这些真实地图的内容,然后在上面实现自己想要的功能.echarts官网文档写的很简单,没怎么看懂,没头苍蝇一样找了很久,甚至特地跑去开源中国等地方逛来了逛去了,最后还是在echar ...
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,fi ...
百度新出来个热力图,还蛮好玩的,就去研究了一下 工具/原料 vs2012 sql server 方法/步骤 先去网上下载些基本的东西,像echarts啊zrender啊这些,之前的经验都有讲过,大家可以去看下.这里还要外 ...
真是为了发个经验我容易嘛 工具/原料 vs2012
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,fi ...
关于javascript使用经验分享2--控件监听器的问题:在实际开发中,总会遇到很多问题,解决办法也有很多种,但在开辟的第一种的时候,总有那么一点辛苦和耗时,所以分享一下,大家共享! 工具/原料 楼上5框架 echar ...
Win10怎么设置图形密码,Win10图片图形密码怎么设置?使用过Win8系统的朋友一定会设置图形密码的,Win10系统也有图片图形密码.用户也可以用图形密码作为Win10系统的开机密码,那么Win10的图形密码到底应该 ...
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,下面介绍柱状图示例. 方法/步骤 标准柱状图,标注.标线,代码如下: option = { title :
使用过Windows8操作系统的同学们一定会发现在该系统中,Windows8推出了图形密码的功能,允许用户使用图形密码作为电脑系统的开机密码,好了,那么图形密码到底应该如何设置呢?在本篇经验中,我将向大家详细介绍一下设置 ...
不少人想要在win10系统中设置图形密码,却不懂的如何进行设置.下面就一起来看看设置win10系统图形密码的方法: 方法/步骤 点击开始菜单 - 电脑设置: 在打开的设置窗口中依次展开:账户 - 登录选项 - 密码,然后 ...
[分析] 图形的背景设置只能选用颜色吗?答案是不一定,若需要的话,还可以选择纹理图案作为背景效果,使图形看起来更具质感. [操作] 双击图形,打开[设置自选图形格式]对话框, 在[颜色与线条]选项卡中展开[填充]的颜色列 ...
黔ICP备号-1更多数码资讯，请关注南窗数码
“图形背景图片”相关经验echarts辅助线问题
你好，想跟你请教个问题：您好，请问您是不是已经解决了markline在y坐标轴顶端重叠的问题呢？我的两条辅助线的值均高于series中data的最大值，然后就出现了重叠，谢谢！jQuery插件echarts去掉垂直网格线用法示例
作者：翱翔天地
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery插件echarts去掉垂直网格线用法,结合实例形式对比分析了jQuery图标插件echarts针对垂直网格线的相关设置操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery插件echarts去掉垂直网格线用法。分享给大家供大家参考，具体如下：
1、问题背景
设计一条统计人数的折线，其中网格线没有垂直线
2、实现源码
（1）有垂直网格线
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&echarts-有垂直网格线&/title&
&link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" &
&script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" &&/script&
&script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" &&/script&
body,html{
width: 99%;
height: 99%;
font-family: "微软雅黑";
font-size: 12
width: 100%;
height: 100%;
$(function(){
var chart = document.getElementById('chart');
var echart = echarts.init(chart);
var option = {
tooltip: {
trigger: 'axis'
data:['人数']
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
toolbox: {
feature: {
saveAsImage: {}
type: 'category',
boundaryGap: false,
splitLine:{
data: ['周一','周二','周三','周四','周五','周六','周日']
type: 'value'
name:'人数',
type:'line',
stack: '人数',
data:[, , , 3210]
echart.setOption(option);
&div id="chart"&&/div&
（2）无垂直网格线
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&echarts-去掉垂直网格线&/title&
&link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" &
&script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" &&/script&
&script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" &&/script&
body,html{
width: 99%;
height: 99%;
font-family: "微软雅黑";
font-size: 12
width: 100%;
height: 100%;
$(function(){
var chart = document.getElementById('chart');
var echart = echarts.init(chart);
var option = {
tooltip: {
trigger: 'axis'
data:['人数']
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
toolbox: {
feature: {
saveAsImage: {}
type: 'category',
boundaryGap: false,
splitLine:{
show:false
data: ['周一','周二','周三','周四','周五','周六','周日']
type: 'value'
name:'人数',
type:'line',
stack: '人数',
data:[, , , 3210]
echart.setOption(option);
&div id="chart"&&/div&
3、实现结果
（1）有垂直网格线
（2）无垂直网格线
4、问题说明
去掉网格中的垂直线，只需在xAxis中加入splitLine属性的设置show:false
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具