echarts-gl 3D柱状图保存为图片,打印
echarts-gl生成的立体柱状图生成图片是平面的,但是需求是3D图并且可以打印,我们的思路是先转成图片,然后再打印,代码如下:
生成3D图
<td>图表分析</td>
<td colspan="" style="width: 500px;height:500px;margin: 0 auto;">
<div style="width: 50px;height: 50px;float: left">
<div style="width: 20px;height: 20px;margin-left:20px;background-color: #C33531;"></div>
<p>人数</p>
</div>
<div style="width: 50px;height: 50px;margin-right:500px;float: right;">
<div style="width: 20px;height: 20px;margin-left:20px;background-color: #4A235A;"></div>
<p>占比</p>
</div>
<div id="Img" style="display: none">
<img src="#" id="jlcg"/>
</div>
<div id="main" style="width: 500px;height: 400px;margin: 0 auto;"></div>
</td>
$(function(){
getData();
});
function getData() {
var pieChart = echarts.init(document.getElementById('main'));
var hours = ['90-100', '80-89', '70-79', '60-69', '<60'];
var days = ['', '', '', '', ''];
var best=$("#best").val()==undefined?0.0:$("#best").val();
var good=$("#good").val()==undefined?0.0:$("#good").val();
var midd=$("#medium").val()==undefined?0.0:$("#medium").val();
var pass=$("#pass").val()==undefined?0.0:$("#pass").val();
var fail=$("#fail").val()==undefined?0.0:$("#fail").val();
var bestRate=$("#bestRate").val()==undefined?0.0:$("#bestRate").val();
var goodRate=$("#goodRate").val()==undefined?0.0:$("#goodRate").val();
var middRate=$("#mediumRate").val()==undefined?0.0:$("#mediumRate").val();
var passRate=$("#passRate").val()==undefined?0.0:$("#passRate").val();
var failRate=$("#failRate").val()==undefined?0.0:$("#failRate").val();
var data = [[,,best],[,,good],[,,midd],[,,pass],[,,fail],
[,,bestRate],[,,goodRate],[,,middRate],[,,passRate],[,,failRate]];
var colorList=new Array();
var option = {
tooltip: { }, xAxis3D: {
type: 'category',
data: hours,
name:'分数区间'
},
yAxis3D: {
type: 'category',
data: days,
},
zAxis3D: {
type: 'value',
name:'数据'
},
grid3D: {
boxWidth: ,
boxDepth: ,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
animation: false,
series: [{
name:"人数",
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[], item[], item[]],
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: ,
borderWidth:
}
},
itemStyle:{
normal: {
// 定制显示(按顺序)
color: function(params) {
var arr = params.data.value;
if(arr[]==){
colorList.push('#C33531');
}else{
colorList.push('#4A235A');
}
return colorList[params.dataIndex]
}
},
}
}]
}
pieChart.setOption(option);
}
生成图片
//将canvas转化成图片
var div = document.getElementById("Img");
div.style.display = "block";
var img = document.getElementById("jlcg");
img.style.width="450px";
img.style.height="350px";
var mycanvas = $("#main").find("canvas")[];
var image = mycanvas.toDataURL("image/png");
var $a = document.getElementById('jlcg').setAttribute('src',image);
注意:
如果生成出来的图片外面的div的display:none的话,在用LOdop打印预览的时候不会显示的
用js动态改变一下div的样式
echarts-gl 3D柱状图保存为图片,打印的更多相关文章
- echarts gl 3d地图,click事件失效,解决办法
问题 比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示: echart和gl版本 Loaded claygl, version 1.2. ...
- echart.gl.js实现动态3D柱状图
echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...
- ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...
- OpenGL中的深度、深度缓存、深度测试及保存成图片
1.深度 所谓深度,就是在openGL坐标系中,像素点Z坐标距离摄像机的距离.摄像机可能放在坐标系的任何位置,那么,就不能简单的说Z数值越大或越小,就是越靠近摄像机. 2.深度缓冲区 深度缓冲区原理就 ...
- Delphi RichEdit的内容保存为图片
uses RichEdit; {将RichEdit1的内容保存为图片,此函数也适合于RxRichEdit,即RichEdit: TRxRichEdit}procedure RichEditToCanv ...
- 如何把Excel中的单元格等对象保存成图片
对于Excel中的很多对象,比如单元格(Cell),图形(shape),图表(chart)等等,有时需要将它们保存成一张图片.就像截图一样. 最近做一个Excel相关的项目,项目中遇到一个很变态的需求 ...
- C# 创建EXCEL图表并保存为图片
数据表格能够清晰的呈现数据信息,但是我们对于一些繁杂多变的数据想要很直观的看到数据变化走势或者数据的占比时,数据图表会更具代表性,并且在呈现数据信息上也更形象,也能获取更多纯数字信息所不能直接展现的信 ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- 用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视元素保存为图片的控件,Binding刷新的时机
原文:用MVVM模式开发中遇到的零散问题总结(5)--将动态加载的可视元素保存为图片的控件,Binding刷新的时机 在项目开发中经常会遇到这样一种情况,就是需要将用户填写的信息排版到一张表单中,供打 ...
随机推荐
- chrome webstore
chrome webstore https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfil ...
- 面向对象:元类、异常处理(try...except...)
元类: python中一切皆对象,意味着: 1. 都可以被引用,如 x = obj 2. 都可以被当做函数的参数传入 3. 都可以被当做函数的返回值 4. 都可以当做容器类的元素(列表.字典.元祖.集 ...
- [K/3Cloud] 单据新增、复制、新增行、复制行的过程
整单复制:先执行CopyData(获得数据包),在执行AfterCreateNewData(可处理数据包),不会执行AfterCreateNewEntryRow 单据新增:先执行AfterCreate ...
- 【ZJOI2017 Round1练习&UVA1057】D6T1 Routing(DP,SPFA)
题意:给你一个有向图, 并指定起点和终点. 问要从起点走向终点, 再从终点走向起点, 最少需要走过多少不同的节点. 对于 100%的数据, 有 N<=100, M<=min(1000,N* ...
- SOJ 2818_QQ音速
[题意]两只手,一次只能用一只手按一个键子(0,1,2,3),给出从i键到j键所需的消耗的体力,求依次按下一系列键子所需最小体力. [分析] 法一:开一个三维数组,分别记录移动到位置及左右手按的键子. ...
- Bad Hair Day-POJ3250(简单的入栈出栈)
Description Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow ...
- AtCoder Grand Contest 011 E - Increasing Numbers(灵性乱搞)
题意: 当一个整数高位数字总不小于低位数字,或者说写成字符串之后单调不下降,称之为上升数.求一个整数最少能表示为多少个上升数的和.(n<=1e500000) 分析: 考虑那些不下降的数字,一定可 ...
- Windows TAKEOWN & ICACLS
TAKEOWN:takeown /f 文件名 获取该文件的所属权takeown /f /r /d n 文件夹 获取整个文件夹及其下面子目录文件的所属权 TAK ...
- iOS_开发中遇到的那些问题_1
[自编号:60][AutoLayout中,怎样让ImageView保持固定的宽高比?比如1:1] 先将imageViewframe手动写成:宽20,高20,再勾选Aspect Ratio加入宽高比约束 ...
- cocos2d-x 3.0 CREATE_FUNC解析
#define CREATE_FUNC(__TYPE__) \ static __TYPE__* create() \ { \ __TYPE__ *pRet = new __TYPE__(); \ i ...